Google +

Minggu, 09 Juni 2013

CSS ~ Simple Horizontal Menu

Assallamualaikum wr. wb.

Back to Writing :D ,



Dalam Postingan ini nisan akan mencoba share kembali tutorial sederhana, membuat simple Horizontal Menu di CSS.

Langsung saja, pertama tulis kode HTML berikut :


<div id="menu_wrapper">
<ul id="menu">
<li class="visited"><a href="hor_menu.html" title="Home" > Home </a> </li>
<li><a href="#" > About </a> </li>
<li><a href="#" > Product </a> </li>
<li><a href="#" > Service </a> </li>
<li><a href="#" > Contact </a> </li>
</ul>
</div>


dan berikut kode CSS nya :

body{
padding : 50px;
background:#fff;
}

#menu{
width:1024px;
margin: 50px auto;
font-family:Arial, Sans-serif;
padding:0;
height:40px;
background:#3498DB;
font-weight:bold;
list-style:none;
border-top:2px solid #3498DB;
border-bottom: 2px solid #34495E;
}


#menu li {
float:left;
margin:0;
margin-left:15px;
}

#menu li a {
text-decoration:none;
width:75px;
line-height:40px;
color:#666;
display:block;
text-align:center;
}

#menu_wrapper li a{
color: #ECF0F1;
}

#menu_wrapper li a:hover, #menu_wrapper li.visited a{
color:#F39C12;
background:#2980B9;
border-bottom:2px solid #3498DB;
}




Sekian dari Nisan, semoga bermanfaat

wassalamualaikum wr. wb




0 komentar:

Poskan Komentar