CSS - Berkreasi dengan Menu Drop Down Navigasi

Hai, Selamat datang kembali. Materi kali ini masih tentang berkreasi dengan menu navigasi dan merupakan materi terakhir. Menu navigasi yang akan dibahas sangat berkaitan dengan materi aksesibiltas navigasi yang lalu. Ya, Yang ini meskipun tidak jauh beda dengan materi menu navigasi sebelumnya, tapi navigasi kali ini kita punya sub menu, yang tentu saja aksesibilitas-nya sangat ditonjolkan. Cara ini, dan saya juga menggunakannya, anda membuat tautan navigasi yang begitu banyak dibagian submenu sebagai bagian dari list atau menu navigasi.

Saya punya daftar, yang jumlahnya banyak, dan cara paling sederhana agar orang bisa mengaksesnya adalah anda membuatnya dengan menu navigasi drop down, anda bisa membuatnya dari menu navigasi vertical atau menu navigasi horizontal. Ya cara ini cukup membantu pengunjung anda nanti. Jika tidak ada sub menu yang besar maka pengunjung anda akan bingung, tersesat, ketika bekunjung ke website anda.

Jadi sekali lagi, ini adalah teknik yang saya ingin berbagi dengan Anda dan membantu Anda untuk memahami, saya harap Anda akan melakukannya dan pastikan bahwa apa pun yang Anda lakukan, lakukanlah yang terbaik untuk memastikan navigasi itu Dapat diakses sebaik mungkin.

Mari kita, anda memiliki Navigasi Home, Categori, Contact Us. Categori yang anda miliki terdiri dari beberapa category, dan beberapa category tersebut punya artikel sejak tahun 2015 – 2018. Oke kita lihat Code HTML berikut:

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Category</a>
    <ul><li><a href="">Category 1</a>
                        <ul>            
                        <li><a href="">2015</a></li>
            <li><a href="">2016</a></li>
            <li><a href="">2017</a></li>
                        <li><a href="">2018<a></li>
            </ul></li>
        <li><a href="">Category 2</a>
                <ul>            
                        <li><a href="">2015</a></li>
            <li><a href="">2016</a></li>
            <li><a href="">2017</a></li>
                        <li><a href="">2018</a></li>
            </ul></li>
        </ul></li>
    <li><a href="">Contact Us</a></li>
</ul>

Hasilnya :

ccc

Jika dimateri navigasi yang lalu kita sudah mempelajari bagaimana cara menghilangkan dot list dan garis bawah sebuah tautan, dll-ny, disini kita akan mencoba mengubah semua list submenu diatas, dengan penggunaan

<div class="nav">,

jadi semua aturan CSS lansung berefek pada property div di elemen HTML kita.

<html>
<head>
<style type="text/css">
.nav {
    width: auto;
    height: 60px;
    float: left;
    height: 60px;
    margin: auto;
}
.nav ul {
    list-style: none;
    display: inline-table;
    position: relative;
    padding: 0 20px;
    background: #006faa;
}
.nav ul li:hover > ul {
    display: block;
}
.nav ul:after {
    content: "";
    clear: both;
    display: block;
}
.nav ul li {
    float: left;
}
.nav ul li a{
    padding: 20px;
    text-decoration: none;
    color: white;
    display: block;
    cursor: pointer;
}
.nav ul ul {
    background: #006faa;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    display: none;
}
.nav ul ul li {
    float: none;
    border-top: 1px solid #def4ff;
    border-bottom: 1px solid #def4ff;
    position: relative;
}
.nav ul ul li a {
    padding: 15px 40px;
}
.nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
</style>
</head>
<body>
<div class="nav">
 <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Category</a>
    <ul><li><a href="">Category 1
                        <ul>            
                        <li><a href="">2015</a></li>
            <li><a href="">2016</a></li>
            <li><a href="">2017</a></li>
                        <li><a href="">2018<a></li>
            </ul></a></li>
        <li><a href="">Category 2
                <ul>            
                        <li><a href="">2015</a></li>
            <li><a href="">2016</a></li>
            <li><a href="">2017</a></li>
                        <li><a href="">2018</a></li>
            </ul></a></li>
        </ul></li>
    <li><a href="">Contact Us</a></li>
</ul>    </div>
</body>
</html>

Result diatas adalah navigasi horizontal yang telah kita pelajari sebelumnya, namun disini kita memiliki elemen drop down. Jadi, ketika saya menuju ke home, tidak terjadi apa-apa, namun ketika masuk pada menu category, kita meihat ada 2 sub menu category 1 dan category 2 , yang masing-masig juga memimiliki sub-sub menu artikel di tahun 2015 – 2018. Jadi ketika anda mengunjungi link category dan maka secara melayang “hover” semua sub menu muncul.

Ini adalah kode yang sangat sederhana, sangat singkat, konsep yang sangat kuat untuk dipahami. Jadi saya telah menunjukkan kepada Anda beberapa cara yang berbeda Anda dapat mengatur gaya bar navigasi Anda. Anda bisa membuat menu horizontal, vertikal, drop down. Saya sangat berharap bahwa Anda akan memilih satu itu dan Anda merasa paling nyaman dengan, atau benar-benar, yang paling bersemangat, dan buat satu proyek website anda. Semoga berhasil.