Menu Manager styling part one, basics
Styling menus with css is fun and productive. Menu is one of the most important aspects of your site, it will quide your visitors through your pages on either easy or difficult way
We'll first need a sample html for these tests:
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
This menu will render like this by default
Now that doesnt look nice at all
Lets stylize a bit
We'll create a block like menu with "3D" hover states
some width for the menu
#menutest2 ‹border:1px solid black;
width:10em;
›
ul has padding and margin by default, we dont want em nor do we want list bullet
#menutest2 ul ‹list-style:none;
padding:0;
margin:0;
›
Make a block level to fill all the area and style with some borders
#menutest2 ul li a, #menutest2 ul li a:visited, #menutest2 ul li a:active ‹display:block;
background-color:#aaa;
color:black;
padding:.2em .2em .2em .5em;
margin:.2em;
text-decoration:none;
border-top:2px solid #eee;
border-right:2px solid #eee;
border-bottom:2px solid #555;
border-left:2px solid #555;
›
For hover we just change the borders a bit this will create button like behaviour
#menutest2 ul li a:hover ‹color:white;
border-top:2px solid #eee;
border-right:2px solid #eee;
border-bottom:2px solid #aaa;
border-left:2px solid #aaa;
›
This ends part one
- rayH -
July 24, 2008, 9:30 am
- nerinho -
January 30, 2009, 3:17 pm
- Berrek -
February 4, 2009, 2:41 pm
Add A CommentThanks for taking the time putting this together- Yes of course I prefer the clean lines of the first - but - this tutorial is just that - a tutoria; how you decide to style is your opinion - I read this as purely a guide for 'newbies' who don't know how to style. Less critic more thanks is my view.
please note that there are aome problems with the internet explorer. to solve the problems simply add a little javascript to your site:
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
--------------------
to make this work you have to add a simple id="nav" to your first parent-<ul>-tag:
<ul id="nav">
The menu can be edited with css by using the techniques described in the tutorial. with this the div-container isn't necessary anymore.
have fun
I am new to cms made simple......I am using the Outdoors.xml template downloaded from this site.
I need to have the top and side navagation menus have drop down sub menus.
Is there a way I can have the drop down sub menus added when I add the individual content pages with out having to go into the template or CSS every time I need to add a page.
Any help is much appreciated!!
Add A Comment