Etiket arşivi: nav menu

Html

HTML5 – Nav Menu Yapımı

Yorum yapın

html5 nav bar nav menuHtml5  ile birlikte nav tagı desteği gelmiştir. Aşağıda nav menu yapımını örneklemeye çalıştım, kodu kendinize göre değiştirip kullanabilirsiniz


<!doctype html>

<style>
nav {
background-color:#ababab;
height:40px;
margin-left:auto;
margin-right: auto;
width: 800px;
}
nav ul {
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #999999;
color: white;
margin-left: 1px;
white-space: nowrap;
height:30px;
width:90px;
text-align:center;
}
nav ul li a:hover {
background: #667788;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
}
nav li:hover a {
background: #3A464F;
height:30px;
}
nav li:hover li a:hover {
background: #93A1B3;
}
nav ul li ul li a {
text-align:left;
}
</style>

<nav>
<ul>
<li><a href="#">Ana Link 1</a></li>
<li><a href="#">Ana Link 2</a>
<ul>
<li><a href="#">Alt link</a></li>
<li><a href="#">Alt link</a></li>
</ul>
</li>
<li><a href="#">Ana Link 2</a>
<ul>
<li><a href="#">Alt link</a></li>
</ul>
</li>
</ul>
</nav>