I am working on a site that has more menu items than will fit on the screen of standard monitors. I am looking for a nice, simple, and easy to implement free horizontal menu that fits on one line and has left and right arrows to scroll the hidden menu items onto the screen.
I do not want to go to two lines of menu items or multilevel.
CSS and jQuery code are OK. I have not been able to find anything. If you know of any, please let me know. Other ideas are welcome also.
Thanks.
Go for the market leader...
superfish FTW
alistapart may have some examples?
Quick and simple code for what you have asked for.
Place this after the <title> </title> tags and before the </head> tag.
<style type="text/css">
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:700px
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:80px;
background:#485e49;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
</style>If you read the script carefully you will be able to change the color of the buttons and the color it turns when the mouse is hovering over it. Also you can change the width of each button and the total length of the navigation bar.
And in-order to add the navigation buttons use...
(place this after the <body> tag.)
<ul id="list-nav">
<li><a href"#">(Page name)</a></li>
</ul>To add in more pages simple keep the simple follow this format...
<ul id="list-nav">
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
</ul>Get the idea?
With the # you simple replace this with where you want the button to go.
And the (Page name), well speaks for its self?
Hope this helps you
KG171
*If you need help understanding what to change on the script for colors and width/length please PM me with what you need and i will be happy to help.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.