Cara Mudah Membuat Navbar Menu

17/11/12

Cara Mudah Membuat Navbar Menu

Posted on 08.28 by Unknown

Navbar atau navigasi pada sebuah blog. horisontal dan vertical.bertingkat

Berikut disini saya akan menambahkan satu masukkan untuk anda yaitu cara membuat menu horizontal dengan jQuery "metode baru dalam pemakaian javaScript".

Cara ini tergolong cara yang paling sederhana dan mudah, namun terkesan elegan untuk hasil akhirnya.

Syarat untuk memakai system jQuery ini salah satunya adalah dengan menambahkan suatu framework yang dikembangkan oleh jQuery.

Cara menambahkan menubar horizontal ala jQuery

Pertama-tama kita tambahkan dulu source jquery dibawah ini kedalam template blogspot anda diatas tag </head>

<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Langkah berikutnya adalah menambahkan plugin jQuery yang berfungsi sebagai fungsi horizontal.

CoPas plugin jQuery berikut diatas tag </head>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
    $('.menudd li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(200);
    }, function() {
        $(this).children('ul').slideUp(200);
    });
});
//]]>
</script>

Langkah berikutnya adalah tambahkan style dari menu horizontalnya diatas code ]]></b:skin>

.menudd{font:normal 14px;line-height:normal;text-transform:none;margin:0;padding:0px 0px;color:white;text-decoration:none;text-align:left}
.menudd ul{border:1px solid #536FA7;background-color:#3057A5;height:30px;line-height:30px;margin:0;padding:0px 0px}
.menudd li{list-style:none;margin:0px 0px;padding:0px 0px;color:white;float:left;display:inline;position:relative}
.menudd li a{display:block;margin:0px 0px;padding:0px 15px;color:white;text-decoration:none;font-weight:bold;line-height:30px;outline:none;border-left:1px solid #536FA7;border-right:1px solid #3B4D72}
.menudd li a:hover{background:#394F7B}
.menudd li ul{position:absolute;z-index:10;left:0px;top:100%;height:auto;margin:0px 0px;padding:0px 0px;width:200px;display:none}
.menudd li ul a{border-left:none;border-right:none;border-bottom:1px dotted #6F80A1;display:block}
.menudd ul li a:hover{background:#394F7B}
.menudd li ul li{float:none;display:block;width:auto}
.menudd li ul ul{top:0px;left:100%}
.menudd li a:focus{background-color:#4B67A1;border-left-color:#777;border-right-color:#555}
.menudd ul li a:focus{background-color:#4B67A1;border-top-color:#777;border-bottom-color:#555}
.menudd li a:hover,.menudd li:hover > a{background-color:#4B67A1}

Langkah berikutnya adalah pasang kerangka menu navigasi horizontal berikut kedalam template anda.
dengan cara memasukan code kedalam "HTML/Javascript" Anda bisa menempatkan kerangka menu navigasi horizontal ini sesuai dengan keinginan.

<div class='menudd'>
    <ul>
        <li><a href='#edit me'>HOME</a></li>

        <li><a href='#edit me'>MENU1</a>
            <ul>
                <li><a href='#edit me'>SubMENU1.1</a></li>
                <li><a href='#edit me'>SubMENU1.2</a></li>
                <li><a href='#edit me'>SubMENU1.3</a></li>
            </ul>
        </li>
        <li><a href='#edit me'>MENU 2</a>
            <ul>
                <li><a href='#edit me'>subMenu3</a></li>
                <li><a href='#edit me'>subMenu4</a></li>
                <li><a href='#edit me'>subMenu5</a>
                    <ul>
                        <li><a href='#edit me'>submenu5.1</a></li>
                        <li><a href='#edit me'>submenu5.2</a></li>
                        <li><a href='#edit me'>submenu5.3</a></li>
                    </ul>
                </li>
                <li><a href='#edit me'>MENU6</a></li>
                <li><a href='#edit me'>MENU7</a></li>
            </ul>
        </li>
        <li><a href='#edit me'>MENU8</a>
            <ul>
                <li><a href='#edit me'>Submenu8.1</a></li>
                <li><a href='#edit me'>Submenu8.2</a></li>
                <li><a href='#edit me'>Submenu8.3</a></li>
            </ul>
        </li>
    </ul>
</div>

Kemudian masukkan link2 dan nama menu yang anda inginkan kedalam kerangka tersebut.

selamat mencoba belajar mengubah menurut keinginan anda :)

1 Response to "Cara Mudah Membuat Navbar Menu"

Successfarmer Says....

8 Juli 2014 pukul 22.50

biar menu 2, menu 3 ... sbt nampilin tampilan yang beda gimana? di rubah di bagian manya hehe
maaf new be http://morelshop.blogspot.com

Belajar Itu Mengasikkan

Sistem Gerak Mobile Robot Berkak

17/11/12