Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

 
byte Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 12-2006
Posts: 2
Karma: 0 (+1/-1)
ReplyQuote
posticon Fixed Menu


well same as the topic says basicly. Just thought i posted it here for the people who dont visit runboard extra! emoticon

Click Here To Preview

I know that some people would like a fixed menu but cannot because of the JavaScript bann well while i was browsing the internet i found a fixed menu that works better than the JavaScript fixed menu, It is just a matter of you knowing a bit of HTML.

Well first off add this code to you CSS:


body { margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; }
#page {margin:310px 0 50px 250px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}
#page .right {font-size:30px; float:right;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#aaa; color:#fff;}
.clear {clear:both;}
p:first-letter {font-size:25px; color:#d88;}
#fixpic {display:block; width:108px height:145px; position:fixed; bottom:0; left:0;}
* html #fixpic {position:absolute;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
   /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
<![endif]-->


And Then Add This To Your HTML Header/Footer:


<div id="menu">
MENU NAME
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
<a href="#" title="TITLE HERE">NAME HERE</a>
</div>


Please do remember to change TITLE HERE to your own title (ALT title), change NAME HERE to the name of your link, And change # to the URL of the location you want the user to visit.

Oh yeh one more thing,
You can change where the fixed menu by:


#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid


Just change the px of
top:10px; left:10px; 

You can also change the width of the fixed menu by changing the px of
width:130px






Well Enjoy,
view source


Edited to add <style type="text/css"> between <!--[if lte IE 6]> and /*<![CDATA[*/ and a couple more lines of CSS

Last revised by Lesigner Girl, 12/19/2006, 11:42 pm


---
Humans need fantasy to be human, to be the place where the falling angel meets the rising ape.
12/19/2006, 9:51 pm Link to this post PM byte
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Fixed Menu


Welcome to the Temple, byte! emoticon

Thank you for posting this code to help others in need! emoticon I tried it out in IE and FF and it wouldn't scroll in IE, so I looked at the source code at the link you posted and saw that you omitted some of the CSS, so I added it to your post above.

To make it so the menu doesn't overlap the content, you can change padding:0 10px 0 10px; to padding:0 10px 0 170px; in the body{} definitions.

Also, if you don't want the first letter of every paragraph to be big and red, you can get rid of this line:

p:first-letter {font-size:25px; color:#d88;}

Thanks again, byte! emoticon


For anyone who's interested, here's a simpler way to make a fixed menu without javascript, and it works in all the major browsers without the confusing if/then browser-specific hacks. It also has the added effect of faking a frameset when the content in the sidebar is taller than the window.

CSS:

body, html {

&nbsp; &nbsp; height: 100%;
&nbsp; &nbsp; margin:0;
&nbsp; &nbsp; overflow:hidden;
}
#content {
&nbsp; &nbsp; height: 100%;
&nbsp; &nbsp; margin-left: 160px;
&nbsp; &nbsp; overflow: auto;
}
#sidebar {
&nbsp; &nbsp; position: absolute;
&nbsp; &nbsp; top:0; left: 0;
&nbsp; &nbsp; height: 100%;
&nbsp; &nbsp; width: 150px;
&nbsp; &nbsp; overflow:auto;
}


HTML follows. But first, a couple of notes on the CSS:

If you want the sidebar wider or narrower, change the two parts in bold above. I made the left margin of the content 10px wider than the width of the sidebar in this example to create space between the two.

If you don't want an actual sidebar but just a small menu like the one byte posted, you can omit the height definition in the #sidebar. You can even make them overlap (not that I recommend it) by making the margin-left of the #content area smaller than the width of the #sidebar.

HTML Header:

<div id="content">

Everything you want at the top of your board here


HTML Footer:

Everything you want at the bottom of your board here

</div><!-- end content -->

<div id="sidebar">
Sidebar stuff here
</div><!-- end sidebar -->


For those of you who are used to using tables, it may seem a little backwards to put the menu in the footer. But one great thing about using CSS instead of tables for layout is that you can put the content first, and this is great for search engine rankings because they usually don't read the whole page if there's a lot on it.

Last revised by Lesigner Girl, 12/19/2006, 11:46 pm


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
12/19/2006, 11:39 pm Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion




You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT