Making vertical menu with CSS
Posted by Gosu on 27 November, 2007
1 comment so far
This item was filled under [ News ]
Now i will teach you how to make a simple vertical menu using CSS,first we must add this code after
|
<style>
|
|---|
tag ;
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
after adding the codes above,we can edit our menu’s editing px value of this code
{ width: 200px; }
to change font
“font family;”font names”
to change color
color-”color code”
Now we need the codes below to create our CSS menu
<>
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”>
<a href=”#” id=”current”>Menü 1</a></li>
<li><a href=”#”>Menü2</a></li>
<li><a href=”#”>Menü3</a></li>
<li><a href=”#”>Menü4</a></li>
<li><a href=”#”>Menü5</a></li>
thats aLL
One Comment on “Making vertical menu with CSS”
yeah…thanks before…this good tutorial