prev next

17/11/12

Cara Mudah Membuat Navbar Menu

Posted on 08.28 by tris KT

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"

.
gravatar
zaki abdurrahman Says....

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

Komentar Anda