byte
Citizen
Registered: 12-2006
Posts: 2
Karma: 0 (+1/-1)
|
ReplyQuote
|
|
Fixed Menu
well same as the topic says basicly. Just thought i posted it here for the people who dont visit runboard extra!
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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Fixed Menu
Welcome to the Temple, byte!
Thank you for posting this code to help others in need! 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!
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 {
height: 100%;
margin:0;
overflow:hidden;
}
#content {
height: 100%;
margin-left: 160px;
overflow: auto;
}
#sidebar {
position: absolute;
top:0; left: 0;
height: 100%;
width: 150px;
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
|
12/19/2006, 11:39 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|