Menu Navigasi Dengan Kotak Pencarian Dan Efek Bounce

Menu Navigasi

Menu Navigasi Dengan Kotak Pencarian Dan Efek Bounce Sedikit mempercantik tampilan blog dengan menu navigasi yang dilengkapi dengan efek bounce menggunakan Javascript.



Copy code dibawah ini dan letakkan diatas code ]]></b:skin> atau <style> :


#nav {
    z-index:999;
    background:#2A497E;
    width:98.5%;
    color:white;
    font:normal 10px Arial, Sans-Serif;
    text-transform:uppercase;
    -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    border-top:2px solid #3B68B5;
    border-bottom:2px solid #3B68B5;
}

#nav ul {
    margin:0px 0px;
    padding:0px 0px;
    height:30px;
}
#nav li {
    margin:0px 0px;
    padding:0px 0px;
    float:left;
    display:inline;
    list-style:none;
    position:relative;
    border-top:1px solid #2A497E;
    -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
#nav a {
    display:block;
    padding:0px 15px;
    line-height:30px;
    text-decoration:none;
    background-color:#2A497E;
    color:white;
    border-bottom:1px solid #3B68B5;
}
#nav a:hover {
    background-color:#37f;
    -webkit-transition:all 1s ease-Out;
    -moz-transition:all 1s ease-Out;
    -ms-transition:all 1s ease-Out;
    -o-transition:all 1s ease-Out;
    transition:all 1s ease-Out;
}
#nav a:active {
    background-color:#11d;
}
#nav li ul {
    width:180px;
    height:auto;
    position:absolute;
    top:100%;
    left:0px;
    z-index:10;
    background-color:#000;
    display:none;
    -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
}

#nav li li {
    display:block;
    float:none;
}
#nav li.sc {
    float:right;
}
#nav a, #nav li.sc form {
    display:block;
    padding:0px 10px;
    line-height:30px;
    text-decoration:none;
    color:white;
}
#nav li.sc input[type="text"] {
    border:1px solid #333;
    background-color:white;
    padding:2px 5px;
    font:normal 11px Verdana, Arial, Sans-Serif;
    display:inline-block;
    margin:0px 0px 3px;
    vertical-align:middle;
}

Sekarang cari kode </body> dan letakkan kode dibawah ini diatas code </body> :


<script type="text/javascript">
//<![CDATA[
$(function() {
            $('#nav li').hover(function() {
                $(this).children('ul').slideDown(500, "easeOutBounce");
            }, function() {
                $(this).children('ul').slideUp(500, "easeOutExpo");
            });
        });
//]]>
</script>

cari kode </head> dan letakkan JQuery dibawah ini tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js' type='text/javascript'/>


Apabila template anda sudah dilengkapi dengan JQuery, jangan copy code yang saya beri garis bawah .

Tahap pemasangannya, copy code berikut dan letakkan dimana anda inign menaruhnya, biasanya sebelum header-wrapper :


<nav id="nav">
    <ul>
        <li><a href="#">Beranda</a>
        </li>
        <li><a href="#">Profil</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Jurnal</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Komentar</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li class="sc">
            <form>
                <input type="text" />
            </form>
        </li>
    </ul>
</nav>

8 Responses to "Menu Navigasi Dengan Kotak Pencarian Dan Efek Bounce"

  1. ditambehin css biar mantap menu navigasinya :D

    ReplyDelete
  2. keren kang :D
    izin nyoba dulu

    ReplyDelete
  3. Kalau ada bikin tutorial yang mega dropdown menu pakai css atau yang bersub tingkat 2

    ReplyDelete
  4. Udah aku tempelin di blog aku kak, cuman aku ganti warnanya, gakpapa kan ?

    Cek di www.sagitasoft.com

    ReplyDelete
  5. wahh keren gan oiaya saya mau request dong tolong postingin emoticon kaya di komentar ente :) makasih sebelumnya :)

    ReplyDelete
  6. pokonya keren deh ini artikelnya ,o iya ka ini aku mau reccomend tentang HOSTEL MURAH DI BANDUNG COCOK UNTUK BACKPACKER aku reccomed banget nih buat yang bingung cari penginapan di daerah bandung ..

    ReplyDelete