Menu Navigasi Dengan Kotak Pencarian Dan Efek Bounce

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

Demo

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>

Tweet