Multi Level Menu Dropdown Hanya dengan CSS

 Author : hadinug, 04 April, 2014, Komentar

Beberapa wkatu lalu penulis mencoba berekplorasi membuat sebuah menu dengan level yang lebih dari satu hanya dengan CSS. Cukup dengan css saja kita bisa membuat sebuah menu website yang menarik tentunya. Ditutorial kali ini penulis hanya akan memberikan contoh frame menu css yang sangat sederhana, dan diharapkan oleh teman-teman sekalin bisa di modifikasi dan dikembangkan untuk pembelajaran.





Struktur HTML

Kalau berbicara menu, pastinya syntak HTML yang sering digunakan adalah ul atau ol. Nah begitu juga dengan tutorial kali ini, langsung saja lihat di script HTML nya.



<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Groups</a></li>
        </ul>
    </li>
    <li><a href="#">Research</a>
        <ul>
            <li><a href="#">Games <span class="arrow">&raquo;</span></a>            
                <ul>
                    <li><a href="#">Board Games</a></li>
                    <li><a href="#">Card Games</a></li>
                    <li><a href="#">Puzzle Games</a></li>
                    <li><a href="#">Skill Games <span class="arrow">&raquo;</span></a>
                        <ul>
                            <li><a href="#">Pool</a></li>
                            <li><a href="#">Chess</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Answsers</a></li>
        </ul>
    </li>
    <li><a href="#">Tutorial</a>
        <ul>
            <li><a href="#">PHP & MySQL</a></li>
            <li><a href="#">HTML & CSS</a></li>
            <li><a href="#">Javascript <span class="arrow">&raquo;</span></a>
                <ul>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Sencha</a></li>
                </ul>
            </li>
        </ul>
    </li> 
</ul>


CSS

Dengan CSS script inilah syntax atau struktur HTML yang kita tulis sebelum nya menjadi sebuah menu yang menarik.


#nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
margin: 0px;
padding: 0px; 
}   

#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
}

#nav li a{
padding: 0px 10px 0px 10px;
margin: 0px 0;
line-height: 40px;
border-right: 1px solid #ddd;
height: 40px;
}

#nav ul{
padding: 0px;
width:170px;
border:1px solid #ddd;
margin: 0px;
left: 0px;
} 
#nav li a{
display: block;
text-decoration: none;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
}
#nav ul li a {
border-right: none;
border-bottom:1px solid #FFFFFF;
}

/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 39px;
left: -1px;

} 
/* Third-level menus */
#nav ul ul{
top: -1px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: -1px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}

#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
#nav ul li span.arrow{
position: absolute;
right: 10px;
}


Semoga bermanfaat, lihat demo dan download file nya.



 
Bagikan halaman ke sosial media
 
Tags :   html    css    css menu       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda