membahas bagaimana cara membuat dropdown menu menggunakan css3 dan html5. Dropdown menu yang mengunakan css3 dan html5 ini berguna sekali dan sangat elegant, pada postingan kali ini saya akan memperkenalkan sintaks baru yang di gunakan yaitu "nav".
Sintaks tersebut bisa berdiri sendiri dalam css juga bisa di masukan dalam kelompok lain seperti header,ekstra dan lainnya.Sudah banyak memang yang memberikan tutorial tentang cara membuat dropdown menu navigasi akan tetapi yang ini berbeda karena ini menggunakan css3 dan html5 di sini saya akan memulainya dari atas yaitu navigasi untuk simple 35 juga bisa di gunakan oleh sobat dengan memakai template minima tapi sebelumnya templatenya di save terlebih dahulu..
Langsung saja kita Mulai...>>>
1. masuk ke blogger edit html
2. centang ekspand templatenya supaya mudah ditemukan Kode yang akan dicari
3.Letakan kode di bawah persis di atas ]]></b:skin>
untuk textshadow seperti yang saya bahas sebelumnya sobat bisa mengganti nilai px nya...
/*
Navigasi
*****************/
#nav{margin:0; padding:7px 6px 0; background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDTcZPYx0HvuP05shPpP1oySeULMmPwP9q4IWmvcOayjcqW7xzVpLDvIBptZv7gwqknLdlYdaPHivhDpC_zKW0JGIxGnEXux4rv7BsIFokwa0QY47CWLwIsdJW7NVmf1SHts_R86iww/s1600/gradient.hendro+pnk.PNG) repeat-x 0 -110px; line-height:100%; border-radius:2em; -webkit-border-radius:2em; -moz-border-radius:2em; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4)}
#nav li{margin:0 5px; padding:0 0 8px; float:left; position:relative; list-style:none}
#nav a{font-weight:bold; color:#e7e5e5; text-decoration:none; display:block; padding: 8px 20px; margin:0; -webkit-border-radius:1.6em; -moz-border-radius:1.6em; text-shadow:0 1px 1px rgba(0,0,0,.3)}
#nav a:hover{background:#000; color:#fff}
#nav .current a, #nav li:hover >a{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDTcZPYx0HvuP05shPpP1oySeULMmPwP9q4IWmvcOayjcqW7xzVpLDvIBptZv7gwqknLdlYdaPHivhDpC_zKW0JGIxGnEXux4rv7BsIFokwa0QY47CWLwIsdJW7NVmf1SHts_R86iww/s1600/gradient.hendro+pnk.PNG) repeat-x 0 -40px; color:#444; border-top:solid 1px #f8f8f8; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(255,255,255,1)}
#nav ul li:hover a, #nav li:hover li a{background:none; border:none; color:#666; -webkit-box-shadow:none; -moz-box-shadow:none}
#nav ul a:hover{background:#0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmlDcMzNsZGOcs5tD89ITx3pS9MgImXk35laR0N-SfVttfJCFPh6vnq4-kFjqbdCdUN975kP2b7tBJa3thPxkZphAV9Hw1suX3j1ce-MNYD-yeBARRKn4kaVmSipR-XCvKC38ZR9xXA/s1600/gradient.hendro.png) repeat-x 0 -100px !important; color:#fff !important; -webkit-border-radius:0; -moz-border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.1)}
#nav li:hover >ul{display:block}
#nav ul{display:none; margin:0; padding:0; width:185px; position:absolute; top:35px; left:0; background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmlDcMzNsZGOcs5tD89ITx3pS9MgImXk35laR0N-SfVttfJCFPh6vnq4-kFjqbdCdUN975kP2b7tBJa3thPxkZphAV9Hw1suX3j1ce-MNYD-yeBARRKn4kaVmSipR-XCvKC38ZR9xXA/s1600/gradient.hendro.png) repeat-x 0 0; border:solid 1px #b4b4b4; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3); -moz-box-shadow:0 1px 3px rgba(0,0,0,.3); box-shadow:0 1px 3px rgba(0,0,0,.3)}
#nav ul li{float:none; margin:0; padding:0}
#nav ul a{font-weight:normal; text-shadow:0 1px 0 #fff}
#nav ul ul{left:181px; top:-3px}
#nav ul li:first-child >a{-webkit-border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-right-radius:9px; -moz-border-radius-topright:9px}
#nav ul li:last-child >a{-webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px}
#nav:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
#nav{display:inline-block}
html[xmlns] #nav{display:block}
* html #nav{height:1%}
<ul id='nav'>
<li class='current'><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>kategory1</a>
<ul>
<li><a href='#'>Kategory2</a>
<ul>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a></li>
</ul>
</li>
<li><a href=''>kosong</a>
<ul>
<li><a href=''>kosong</a></li>
</ul>
</li>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a></li>
</ul>
</li>
<li><a href='#'>kosong</a>
<ul>
<li><a href='#'>kategory3</a>
<ul>
<li><a href='#'>Sub-Level Item</a></li>
<li><a href='#'>Sub-Level Item</a>
<ul>
<li><a href='#'>Sub-Level Item</a></li>
<li><a href='#'>Sub-Level Item</a></li>
<li><a href='#'>Sub-Level Item</a></li>
</ul>
</li>
<li><a href='#'>kosong</a></li>
</ul>
</li>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a></li>
<li><a href='#'>kosong</a>
<ul>
<li><a href='#'>Sub</a></li>
<li><a href='#'>Sub</a></li>
<li><a href='#'>Sub</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>profile</a></li>
<li><a href='#'>no hape</a></li>
</ul>
Keterangan:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDTcZPYx0HvuP05shPpP1oySeULMmPwP9q4IWmvcOayjcqW7xzVpLDvIBptZv7gwqknLdlYdaPHivhDpC_zKW0JGIxGnEXux4rv7BsIFokwa0QY47CWLwIsdJW7NVmf1SHts_R86iww/s1600/gradient.hendro+pnk.PNG
Perhatikan nilai <a href='#'>
sobat bisa mengganti # dengan link yang sobat kehendaki dan jangan di tutup nilai "nav" sesudah itu klik save template dan lihat hasilnya.
Sobat bisa cek di ie,safari,opera dan crome karena itulah kelebihan css3 dan html5 yang suport di berbagai browser.
Parse "nav" ini terpisah dan dapat juga di masukan kedalam "ekstra" yang nanti kita akan bahas untuk membelah template yang juga menggunakan "aside" silahkan di ikuti terus blog ini apabila penasaran dengan template barunya mohon maaf juga belum bisa di download karena lebih baik tutorial dan belajar daripada kita dapat yang langsung jadi.
Disini saya akan berbagi gambar gradientnya agar sobat bisa menggantinya sesuai keinginan sobat gambar gradientnya ada di code css3 berikut adalah source imagenya:
Warna pink
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDTcZPYx0HvuP05shPpP1oySeULMmPwP9q4IWmvcOayjcqW7xzVpLDvIBptZv7gwqknLdlYdaPHivhDpC_zKW0JGIxGnEXux4rv7BsIFokwa0QY47CWLwIsdJW7NVmf1SHts_R86iww/s1600/gradient.hendro+pnk.PNG
Warna cream
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmlDcMzNsZGOcs5tD89ITx3pS9MgImXk35laR0N-SfVttfJCFPh6vnq4-kFjqbdCdUN975kP2b7tBJa3thPxkZphAV9Hw1suX3j1ce-MNYD-yeBARRKn4kaVmSipR-XCvKC38ZR9xXA/s1600/gradient.hendro.png
Warna merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicwaYSGArwCZKwIJU71nxIh-txKnnGZR1laDPs_2kvA4f3x0diZeoo7yTwvZ_XWFLejqhLcdfdwQqRUXue5IvTAtd2A_pT2exTuJC5cAETEHaUuqwllcTlsHYuThT8x-cnKoTdIIyafQ/s1600/gradient.hendro+merah.PNG
Warna biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvSjxB-AuWsz0T2FEwyMCPnoFtE3AD6Mt_doIToovR_N-jAl-qA3XoZ9bx-XHcQReTycgzrVyqCAVSzDk5YLuwE1jZVk0IZIbGattldt-CcQahnsQa1lVPlSyeyaZ0KtQ6-kjRddoPpg/s1600/gradient.hendro+biru.PNG
Warna biru langit
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPpSR-U-uVZdkSIN2ZeDbCceaCWcTUCe997X6Da6lClI3Wuy6No7FqPj7tPjKv3HPiwyYSKacyNQyPJlGMddz5VJzTik94BwqMQryHuhHdJJDvSRKAu7Y8Za3-r5hFDQwyxbKJPkXKA/s1600/gradient.hendro+2.PNG
Okeh...silahkan di coba dan mudah2an berguna, bagi sobat yang sudah menerapkan html5 dan css3 di dalam templatenya mohon di isikan di kotak komentar dan di berikan alamat blognya,,juga mohon saran dan kritik apabila ada kesalahan dalam artikel ini.
Tag :
Tutorial Blog
0 Komentar untuk "Cara Membuat dropdown menu menggunakan css3 dan html5"
"Thanks telah mampir dan Berkomentar Disini, yo kita saling vote dan comment"