Home » , » Membuat Menu Dropdown dengan CSS3

Membuat Menu Dropdown dengan CSS3


Kali saya akan memberikan cara membuat menu dropdown dengan css. Menu Dropdown ini sangat menarik sekali karena murni memakai CSS tidak ada tambah code.



Mari kita simak bersama-sama trik kali ini.

Langkah 1
Index. HTML


<div class="wrapper">
<ul>
<li id="a"><a href="#a">Web Design</a>
<div>
<hr/><b>HTML:</b> <a href="#">Tutorials</a> | <a href="#">Resources</a>
<hr/><b>CSS:</b> <a href="#">Tutorials</a> | <a href="#">Examples</a>
<hr/><b>CMS:</b> <a href="#">Drupal</a> | <a href="#">Wordpress</a>
</div>
</li>
<li id="b"><a href="#b">Graphic Design</a>
<div>
<hr/><b><a href="#">Printmaking</a></b>
<hr/><b><a href="#">Visual Arts</a></b>
</div>
</li>
<li id="c"><a href="#c">Animation &amp; Graphics</a>
<div>
<hr/><b>2D Animation:</b><br /> <a href="#">Analog animation</a> | <a href="#">Flash animation</a>
<hr/><b>3D Animation:</b><br /> <a href="#">Motion capture</a> | <a href="#">Photo realistic</a>
</div>
</li>
<li id="d"><a href="#d">Design Resources</a>
<div>
<hr/><b><a href="#">w3schools.com</a></b>
<hr/><b><a href="#">alistapart.com</a></b>
<hr/><b><a href="#">smashingmagazine.com</a></b>
</div>
</li>
</ul>
</div>



Langkah 2
Index. CSS



.wrapper {
width: 600px;
position: absolute; }
.wrapper ul {
list-style: none; }
.wrapper ul li {
background-color: #F8F8F8;
border: 1px solid #a9a9a9;
display: block;
float: left;
font: bold 12px arial;
height: 30px;
line-height: 30px;
overflow: hidden;
padding-left: 15px;
position: absolute;
width: 135px;
z-index: 10000;
-webkit-box-shadow:0px 3px 5px #cacaca;
-moz-box-shadow:0px 3px 5px #cacaca;
box-shadow:0px 3px 5px #cacaca;
background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);}
.wrapper ul li:hover {
background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}
.wrapper ul li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.wrapper ul li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.wrapper ul li#b {
margin-left: 151px; }
.wrapper ul li#c {
margin-left: 302px; }
.wrapper ul li#d {
margin-left: 453px; }
.wrapper ul li a {
display: block;
text-decoration: none;
color: #303030; }
.wrapper ul li div {
text-align: left;
font: normal 11px arial;
line-height: 19px;
margin: 10px 0; }
.wrapper ul li div a {
display: inline; }
.wrapper ul li div a:hover {
text-decoration: underline; }
.wrapper ul li div hr {
border: none;
border-top: 1px dotted #a0a0a0;
margin: 5px 0;
width: 95%; }
.wrapper ul li:hover:target {
display: inherit;
padding: 0px;
padding-left:15px;
opacity: .97;
-moz-opacity: .97;
-webkit-transition: height 0.4s ease-in; }
.wrapper ul li#a:hover:target {
height: 130px;
width: 350px;
background: #f0f9ff; }
.wrapper ul li#b:hover:target {
height: 105px;
background: #ffffd6; }
.wrapper ul li#c:hover:target {
height: 145px;
width: 200px;
background: #f8ffe8; }
.wrapper ul li#d:hover:target {
height: 140px;
width: 165px;
position: relative;
float: right;
margin-right: -5px;
z-index: 0;
text-align: center;
background: #f9f286; }
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

27 Oktober 2011 13.59

sangat menarik ilmunya dan ingin memasangnya, sayang nubi sekali jadi pemahaman dan cara pasangnya dan dimana pasangnya saya tidak mengerti.

Terimakasih Geotroy atas Komentarnya di Membuat Menu Dropdown dengan CSS3

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger