.
Home » » Cara membuat menu drop down cantik menggunakan CSS

Cara membuat menu drop down cantik menggunakan CSS

Written By Admin on Selasa, 06 Desember 2011 | 12:54 AM




1. Masuk ke akun blogger
2. Pilih rancangan
3. Pilih menu elemen laman
4. Tambah gadget, pilih html/java script
    Copy pastekan kode dibawah ini  dan hapus tulisan yang berwarna biru.
    *Script ini saya dapat dari master Gubhugreyot.blogspot.com

Kode CSS Multilevel Drop Down Menu

<style type="text/css">
#bgsGR_HzMenu {
 margin: -10px 0 0 0;
 padding: 7px 6px 0;
 background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -99px;
 line-height: 100%;
 border-radius: 0.2em;
 -webkit-border-radius: 0.2em;
 -moz-border-radius: 0.2em;
 box-shadow: 1px 1px 15px rgba(0,0,0, .4);
 -moz-box-shadow:1px 1px 15px rgba(0,0,0, .4);
 -webkit-box-shadow: 1px 1px 15px rgba(0,0,0, .4);
 }
#bgsGR_HzMenu:hover {
 box-shadow: 1px 3px 10px rgba(0,0,0, .5);
 -moz-box-shadow:  1px 1px 15px rgba(0,0,0, .5);
 -webkit-box-shadow:  1px 2px 15px rgba(0,0,0, .5);
 }
#bgsGR_HzMenu li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
 }
#bgsGR_HzMenu a {
 font-weight: bold;
 color: #e7e5e5;
 text-decoration: none;
 display: block;
 padding:5px 12px;
 margin:0;
 border-radius:0.7em;
 -moz-border-radius: 0.7em;
 -webkit-border-radius: 0.7em;
 text-shadow: 2px 2px 4px #000;
 } 
#bgsGR_HzMenu a:hover {
 background:#000;
 color: #fff;
 }
#bgsGR_HzMenu a#satu{
 transition:2s ease-in-out;
 -o-transition:2s ease-in-out;
 -moz-transition:2s ease-in-out;
 -webkit-transition:2s ease-in-out;
 transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 border:1px solid #444;
 box shadow:0px -1px 4px #999;
 background:#333 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px;
 }
#bgsGR_HzMenu a#satu:hover{
 transform: scale(1.3);
 -o-transform: scale(1.3);
 -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
 text-shadow:2px 3px 4px #000;
 border:1px solid #fff;
 }
#bgsGR_HzMenu .current a, #bgsGR_HzMenu li:hover > a {
 background: blue url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
 border-top: solid 1px #f8f8f8;
 box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 text-shadow: 0 1px 0 rgba(156,156,156, 1);
 } 
#bgsGR_HzMenu .current a{color:#3399FF;}
#bgsGR_HzMenu li:hover > a {color:red;}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a {
 background: none;
 border: none;
 color: #666;
 box-shadow:none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out; 
 }
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a{
    border-radius:0.1em;
 -moz-border-radius: 0.1em;
 -webkit-border-radius: 0.1em;
 } 
#bgsGR_HzMenu ul a:hover {
 background: #000 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px !important;
 color: #fff !important;
 text-shadow: 0 1px 1px rgba(0,0,0, .1);
 }
#bgsGR_HzMenu li:hover > ul {
 display: block;
 }
#bgsGR_HzMenu ul {
 display: none;
 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 28px;
 left: 0;
 background: #444 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 0;
 border: solid 1px #b4b4b4;
 border-radius: 10px;-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0 2px 13px #777;
 -webkit-box-shadow: 0 2px 13px #777;
 -moz-box-shadow:  0 2px 13px #777;
 transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 }
#bgsGR_HzMenu ul:hover {
 margin-top:10px;
 transform: scale(1.1);
 -o-transform: scale(1.1);
 -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
 box-shadow: 0 2px 13px #000;
 -webkit-box-shadow: 0 2px 13px #000;
 -moz-box-shadow:  0 2px 13px #000;
 }
#bgsGR_HzMenu ul li {
 float: none;
 margin: 0;
 padding: 0;
 border-radius:none;
 -moz-border-radius:none;
 -webkit-border-radius:none;
 }
#bgsGR_HzMenu ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 border-radius: 0px;
 -moz-border-radius: 0x;
 -webkit-border-radius: 0px;
 }
#bgsGR_HzMenu ul ul {
 left: 181px;
 top: -3px;
 }
#bgsGR_HzMenu ul li:first-child > a {
 background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
 border-top-left-radius:9px;
 border-top-right-radius:9px;
 -moz-border-radius-topleft: 9px;
 -moz-border-radius-topright: 9px;
 -webkit-border-top-left-radius: 9px;
 -webkit-border-top-right-radius: 9px;
 text-shadow:0px 1px 1px #000;color:white;
 }   
#bgsGR_HzMenu ul li:last-child > a {
 border-bottom-left-radius:9px;
 border-bottom-right-radius:9px;
 -moz-border-radius-bottomleft: 9px;
 -moz-border-radius-bottomright: 9px;
 -webkit-border-bottom-left-radius: 9px;
 -webkit-border-bottom-right-radius: 9px;
 text-shadow:0px 1px 1px #000;color :white;
 }
#bgsGR_HzMenu:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
 }
#bgsGR_HzMenu {
 display: inline-block;
 }
html[xmlns] #bgsGR_HzMenu {
 display: block;
 }
* html #bgsGR_HzMenu {
 height: 1%;
 }
</style>

Kode HTML CSS3 Multilevel Drop Down Menu

<ul id="bgsGR_HzMenu">

  <li class="current"><a id="satu" href="Link-1">Nama Link-1    </a></li>
    <li><a id="satu" href="Link-2">Nama Link-2</a>
      <ul>
        <li><a href="Link-2a">Nama Link-2a</a>
          <ul>
            <li><a href="Link-2a-1">Nama Link-2a-1</a></li>
            <li><a href="Link-2a-2">Nama Link-2a-2</a>
              <ul>
                <li><a href="Link-2a-2.1">Nama Link-2a-2.1</a></li>
                <li><a href="Link-2a-2.2">Nama Link-2a-2.2</a></li>
                <li><a href="Link-2a-2.3">Nama Link-2a-2.3</a></li>
              </ul>
            </li>
            <li><a href="Link-2a-3">Nama Link-2a-3</a></li>
          </ul>
        </li>
      <li><a href="Link-2b">Nama Link-2b</a></li>
      <li><a href="Link-2c">Nama Link-2c</a></li>
      <li><a href="Link-2d">Nama Link-2d</a>
        <ul>
          <li><a href="Link-2d-1">Nama Link-2d-1</a></li>
          <li><a href="Link-2d-2">Nama Link-2d-2</a></li>
          <li><a href="Link-2d-3">Nama Link-2d-3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a id="satu" href="Link-3">Nama Link-3</a>
    <ul>
      <li><a href="Link-3a">Nama Link-3a</a>
        <ul>
          <li><a href="Link-3a-1">Nama Link-3a-1</a></li>
          <li><a href="Link-3a-2">Nama Link-3a-2</a></li>
          <li><a href="Link-3a-3">Nama Link-3a-3</a></li>
          <li><a href="Link-3a-4">Nama Link-3a-4</a></li>
        </ul>
      </li>
      <li><a href="Link-3c">Nama Link-3c</a></li>
      <li><a href="Link-3d">Nama Link-3d</a></li>
    </ul>
  </li>
 
  <li><a id="satu" href="Link-4">Nama Link-4</a>
    <ul>
      <li><a href="Link-4a">Nama Link-4a</a></li>
      <li><a href="Link-4b">Nama Link-4b</a></li>
    </ul>
  </li>
 
  <li><a id="satu" href="Link-5">Nama Link-5</a></li>
 
  <li><a id="satu" href="Link-5">Nama Link-6</a></li>

</ul>

Catatan: Gantu tulisan link diatas sesuai link yang anda punya, dan ganti nama linknya sesuai keinginan Anda.

Semoga berhasil
Share this article :

0 komentar:

Posting Komentar

Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Rizgun(dot)com - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger