SEO BLOG : MENU NAVIGASI DROP-DOWN

SEO BLOG kali ini akan membahas cara pembuatan menu navigasi dropdown dengan metode css, menu navigasi dropdown versi SEO BLOG ini bertujuan untuk mempercantik penampilan blog yang kita miliki. Menu navigasi dropdown ini mudah untuk dibuat, yaitu langsung dari blog tanpa melakukan edit html template blog, melainkan tinggal dipasangkan pada add widget html. Selain cantik, hasil pemakaian menu navigasi dropdown ini terlihat elegant. Bagaimana bentuknya ? Anda bisa lihat gambar di bawah ini.

Bagaimanakah cara membuatnya, gampang kok, langsung aja, anda tinggal masuk rancangan, pilih tata letak tambahkan menu html di bawah header blog anda, kemudian copy kan rangkaian script di bawah ini  

 

<style>
    /*------ CSS3 Drop Down Menu By shareaja21.blogspot.com ---------*/
    #menu
    {
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);


    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    }
    #menu li
    {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
    }
    #menu a
    {
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a
    {
    color: #fafafa;
    }
    *html #menu li a:hover /* IE6 */
    {
    color: #fafafa;
    }
    #menu li:hover > ul
    {
    display: block;
    }
    /* Sub-menu */
    #menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    #menu ul ul
    {
    top: 0;
    left: 150px;
    }
    #menu ul li
    {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    #menu ul li:last-child
    {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #menu ul a
    {
    padding: 10px;
    height: 10px;
    width: 130px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
    *html #menu ul a /* IE6 */
    {
    height: 10px;
    }
    *:first-child+html #menu ul a /* IE7 */
    {
    height: 10px;
    }
    #menu ul a:hover
    {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec, #0186ba);
    background: -o-linear-gradient(#04acec, #0186ba);
    background: -ms-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }
    #menu ul li:first-child > a
    {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }
    #menu ul li:first-child > a:after
    {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
    }
    #menu ul ul li:first-child a:after
    {
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
    }
    #menu ul li:first-child a:hover:after
    {
    border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after
    {
    border-right-color: #04acec;
    border-bottom-color: transparent;
    }

    #menu ul li:last-child > a
    {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    }
    /* Clear floated elements */
    #menu:after
    {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html #menu { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    </style>
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
    </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

NB : Ganti tanda # dengan URL yang di tuju.
         Jika kamu mau menambah menu Drop Downya tinggal tambah kode di bawah ini
<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>

Sehingga jika disatukan dengan yang di atas menjadi kaya gini

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Drop Down 1</a>
<ul>
<li><a href="#">MENU DR 1</a></li>
<li><a href="#">MENU DR 2</a></li>
<li><a href="#">MENU DR 3</a></li>
<li><a href="#">MENU DR 4</a></li>
</ul>
</li>
</ul>

 

Sampai di sini dulu pembahasan tentang menu navigasi dropdown ini, lain waktu akan diuraikan menu navigasi dropdown model yang lain. Salam, semoga bermanfaat dan jangan lupa tinggalkan jejak anda lewat komentar.

Artikel terkait :