Membuat navigation menu pada blog. Navigasi menu berisi beberapa link, seperti about, sitemap, disclaimer dan lain sebagainya. Letaknya berada pada bagian paling atas template blog. Fungsi dari navigation menu ini adalah sebagai tempat untuk menampilkan berbagai informasi dari blog, seperti contohnya halaman about, contact dan lain sebagainya. Contoh dari navigation menu adalah seperti di bawah ini.
Untuk membuat navigation menu seperti pada blog ini membutuhkan kode css dan html. Pertama, tentukan nama selektor untuk navigasi menu ini. Misalnya pada tutorial ini akan menggunakan nama navigasi-menu.
Untuk kode html nya, adalah seperti ini.
<nav id='navigasi-menu'>
<input type='checkbox'/><label>≡</label>
<ul>
<li><a href=''>About</a></li>
<li><a href='#' target='_BLANK'>Sitemap</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
</nav>
Letakkan kode tersebut di atas kode </header>
Setelah itu, letakkan kode css berikut
#navigasi-menu{height:30px; width:100%;background-color:#f5f5f5;}#navigasi-menu li, #navigasi-menu ul{margin:0 auto;padding:0 0;list-style:none;}#navigasi-menu li{display:inline;}#navigasi-menu li a{padding:0.8em 1em;color:#424242;}#navigasi-menu li a:hover{transition:0.4s ease;color:#2288cc;}#navigasi-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}#navigasi-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer;}@media screen and (max-width: 800px){#navigasi{height:40px;}#navigasi-menu{top:5px;height:40px;}#navigasi-menu ul{background:#424242;position:absolute;top:30px;right:0;left:0;z-index:3;height:auto;display:none;}#navigasi-menu li{display:block;float:none;width:auto;font:normal Arial;}#navigasi-menu li a{color:white;}#navigasi-menu a{display: block;line-height: 25px;padding: 0px 14px;text-decoration: none;color: #FFF;}#navigasi-menu li a:hover{color: white;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}#navigasi-menu input,#navigasi-menu label{position:absolute;top:0;left:0;display:block;}#navigasi-menu input{z-index:4;}#navigasi-menu input:checked ~ ul,li{display:block;}}
Dan letakkan di bawah kode
<b:skin><![CDATA[
Simpan dan lihat perubahannya.
Setelah membuat navigation, langkah selanjutnya adalah membuat header di bawahnya. Klik Membuat header blog sebagai tutorial selanjutnya.
Related Posts