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
Add A Comment
You're right :)
This boxes remind me Windows 3.11 :)
to be honest, I prefer the menu with this coding:
<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>
than the second with boxes