Apr 19, 2015

cara membuat menu drop down dengan css3 transisi

cara membuat drop down menu dengan css3

بسم الله الرحمن الرحيم
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.

Heri Lesmana, seorang manusia biasa yang memiliki begitu banyak keterbatasan. Menyukai programing ( ngoding ) terutama PHP. Bermimpi ingin kuliah di Informatika ITB atau Ilkom Ui.

0 komentar: