Making vertical menu with CSS
Posted by Gosu on 27 November, 2007
No comments yet
This item was filled under [ Wordpress ]
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
