cara membuat menu drop down dengan css3 transisi

Oleh Heri Lesmana 4/19/2015 05:55:00 PM Posting Komentar

بسم الله الرحمن الرحيم

Hay... Kali ini saya akan membagikan sebuah tutorial cara membuat menu dropdown dengan css3 dan html tentunya.

Langsung ke tutorial aja deh.

1. Buka notepad atau text editor kesukaan sobat.

2. Masukan kode berikut.

<head>
<style>

* {margin:0; padding:0;}

body {
 background-color:#333;
 font-family:Arial, Helvetica, sans-serif;
 color:#FFF;
}

nav {
 height:50px; 
 line-height:50px; 
 position:relative;
 width:770px;
 margin:auto;
 margin-top:80px;
}

nav ul {
 list-style:none;
}
nav ul li a {
 border: 2px solid #000;
 float:left; 
 width:150px; 
 display:block; 
 text-align:center; 
 color:#FFF; 
 text-decoration:none; 
 text-transform:uppercase;
 transition-duration: 0.7s;
 -moz-transition-duration: 0.7s;
 -moz-animation-duration: 0.7s;
}

nav ul li a:hover {
 background-color:#666; 
 display:block;
 border-radius:20px;
}

nav ul li:hover ul {
 display:block;
}
nav ul ul {
 display:none; 
 list-style:none; 
 position:absolute;
 left:300px; 
 top:50px; 
 width:190px;
}

nav ul ul li a {
 border:2px solid #000;
 float:none; 
 display:block; 
 padding-left:10px;
 text-align:left; 
 width:105px;
 margin:5px;
 transition-duration:0.7s;
 -moz-transition-duration:0.7s;
}

nav ul ul li a:hover {
 color:#990;
 padding-left: 30px;
 width:130px;
 text-align:center;
}

</style>

</head>

<body>
<nav>
     <ul>
         <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li>
             <a href="#">Products</a>
             <ul>
                 <li><a href="">Products 1</a></li>
                    <li><a href="">Products 2</a></li>
                    <li><a href="">Products 3</a></li>
                    <li><a href="">Products 4</a></li>
                    <li><a href="">Products 5</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</body>

Catatan : Simpan dengan extensi *.html

Sekian tutorial dari saya kali ini, semoga bermanfaat. Terimakasih.

Blog Heri Lesmana

cara membuat menu drop down dengan css3 transisi

Posting Komentar untuk "cara membuat menu drop down dengan css3 transisi"