"Sticky" Navigation Menu

Siang All , Happy Weekend
Navigasi menu dengan efeck sticky banyak kita jumpai pada web/blog profesional , tujuannya supaya memudahkan pembaca untuk bermanuver dan membuat tampilan web/blog kita berkesan elegant dan profesional.Bagi sobat yang ingin mencoba sesuatu yang berbeda saatnya ikuti tutorial simple kali ini. 

  • Masuk Edit HTML
  • Cari kode ]]></b:skin> , paste kode dibawah ini tepat diatas kode ]]></b:skin>
/*--MyBloggerLab Sticky Navigation Bar--*/
    #MBL_wrapper .MBL_social_wrapper
    {
    margin-top: 15px;
    }

    #MBL_wrapper
    {
    width: 100%;
    margin: auto;
    background: #fff;
    height: 50px;
    border-top: 5px solid #2c2f32;
    border-bottom: 1px solid #EBEBEC;
    -webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
    -o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
    box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
    position: fixed;
    z-index: 999;
    }

    #MBL_wrapper .topmenu.notice
    {
    float: left;
    width: 500px;
    margin-top: 15px;
    color: #fff;
    }

    #top_menu a
    {
    color: #fff;
    }

    #top_menu
    {
    display: block;
    float: left;
    list-style: none;
    margin-top: 12px;
    }

    #top_menu li
    {
    display: inline-block;
    margin-right: 15px;
    font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    }

    #top_menu li ul
    {
    display: none;
    }

    #boxed_wrapper
    {
    width: 980px;
    margin: auto;
    }

    .MBL_standard_wrapper
    {
    width: 960px;
    margin: auto;
    }

    .MBL_standard_wrapper.wide
    {
    width: 980px;
    }

    .MBL_standard_wrapper.header
    {
    margin-bottom: 0px;
    }

    .MBL_social_wrapper
    {
    width: auto;
    float: right;
    }

    #menuforall .MBL_social_wrapper
    {
    margin-top: 15px;
    }

    .MBL_social_wrapper ul
    {
    list-style: none;
    }

    .MBL_social_wrapper ul li
    {
    float: right;
    margin-left: 5px;
    }

    .MBL_social_wrapper ul li img
    {
    width: 24px;
    }

    #MBL_menu_wrapper
    {
    width: 930px;
    height: 50px;
    padding: 0;
    margin:auto;
    }

    .mainmenu.notice
    {
    float: left;
    width: 600px;
    padding: 17px 0 10px 12px;
    z-index: 999;
    }

    #MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
    {
    list-style: none;
    display: block;
    float: left;
    margin: 0 23px 0 5px;
    width: 700px;
    }

    #MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
    {
    display: block;
    float :left;
    margin: 0;
    }

    #MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
    {
    display: none;
    list-style: none;
    background: #000;
    position:absolute;
    padding: 0;
    margin-top: 51px;
    width: 200px;
    height: auto;
    z-index: 1000;
    padding-top: 5px;
    border-bottom: 5px solid #000;
    border-left: 0;
    }

    #MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
    {
    margin-left: 200px;
    margin-top: 5px;
    }

    #MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
    {
    background: none;
    }

    .main_nav li ul li
    {
    width: 100%;
    }

    #MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
    {
    color: #fff;
    display: block;
    width: 188px;
    font-weight: bold;
    line-height: 1em;
    padding: 10px 0 10px 12px;
    background: none;
    }

    .main_nav ul, .main_nav
    {
    list-style: none;
    margin: auto;
    width: 600px;
    height: 50px;
    z-index: 999;
    float: left;
    border-left: 1px solid #EBEBEC;
    }

    .main_nav ul li,  .main_nav li
    {
    display: block;
    float :left;
    margin: 0;
    }

    .main_nav ul li a,  .main_nav li a
    {
    display: block;
    float :left;
    margin: 0 0 0 0;
    padding: 18px 15px 14px 15px;
    color: #2c2f32;
    font-family: 'Patua One';
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    border-right: 1px solid #EBEBEC;
    }

    .main_nav ul li ul li a,  .main_nav li ul li a
    {
    width: 165px;
    padding: 7px 19px 7px 16px;
    border: 0;
    font-size: 12px;
    font-weight: normal;
    color: #ccc;
    font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
    }

    .main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
    {
    border-bottom: 0;
    }

    .main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
    {
    color: #fff;
    background: #1bc4de;
    }

    .main_nav li:last-child a:hover, .main_nav li:last-child a.hover
    {
    border-right: 0;
    }

    .main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
    {
    display: block;
    width: 170px;
    line-height: 0.7em;
    padding: 5px 0 5px 30px;
    }

    .main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
    }

     div
    {
    margin:0;
    padding:0;
    border:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
    }

    a
    {
    color: #2C2F32;
    text-decoration: none;
    -webkit-transition: color .2s linear, background .1s linear;
    -moz-transition: color .2s linear, background .1s linear;
    -ms-transition: color .2s linear, background .1s linear;
    -o-transition: color .2s linear, background .1s linear;
    transition: color .2s linear, background .1s linear;
    }

    /* Font Face ----------------------------------------------- */
    @font-face {
    font-family: 'Patua One';
    font-style: normal;
    font-weight: 400;
    src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
    }

    ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }

Masih diruang Edit HTML
  • Cari kode </body> dan tempatkan kode dibawah ini tepat diatas kode </body>
<!-- Begin Navigation -->
    <div id='MBL_wrapper'>
    <div class='MBL_standard_wrapper'>
    <div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
    <a href='#'>Home</a></li>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Advertise Here</a></li>
    <li><a href='#'>Contact Us</a></li>
    <li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
    </ul></div>
    <div id='menu_border_wrapper'></div>
    <div class='MBL_social_wrapper'>
    <ul>
    <li><a href='#' target='_blank'><img alt='' src='http://4.bp.blogspot.com/-xodteBnLv_o/UMt2MhUxNTI/AAAAAAAAJkI/OaeijLxpGbM/s1600/facebook.png'/></a></li>
    <li><a href='#' target='_blank'><img alt='' src='http://3.bp.blogspot.com/-y2QGcmB-W8c/UMt2N7nGwZI/AAAAAAAAJkU/cgiX_vZKuJE/s1600/twitter.png'/></a></li>
    <li><a href='#' target='_blank' title='Flickr'><img alt='' src='http://1.bp.blogspot.com/-7QcpMgVNe7Q/UMt2Nd0-caI/AAAAAAAAJkM/COoeVsc8u-I/s1600/flickr.png'/></a></li>
    <li><a href='#' target='_blank' title='Vimeo'><img alt='' src='http://3.bp.blogspot.com/-9txEaiKK4tQ/UMt2fH9HZNI/AAAAAAAAJks/OyuUs6Iey70/s1600/vimeo.png'/></a></li>
    <li><a href='#' target='_blank' title='Tumblr'><img alt='' src='http://2.bp.blogspot.com/-T-gXdBaWDP8/UMt2eKpPnKI/AAAAAAAAJkk/DGb0SWy084Q/s1600/tumblr.png'/></a></li>
    <li><a href='#' target='_blank' title='Google+'><img alt='' src='http://1.bp.blogspot.com/-35AQ0H_SNHQ/UMt2dVSPtmI/AAAAAAAAJkg/cV1dPIIQoN4/s1600/google.png'/></a></li>
    <li><a href='#' target='_blank' title='Dribbble'><img alt='' src='http://3.bp.blogspot.com/-hP7Q0_xIyMs/UMt2wjfkxjI/AAAAAAAAJk8/cdn70uuqA00/s1600/dribbble.png'/></a></li>
    <li><a href='#' target='_blank' title='Digg'><img alt='' src='http://3.bp.blogspot.com/-GvBd6a5GqxQ/UMt2wFEbISI/AAAAAAAAJk4/ZM5I29YzOHE/s1600/digg.png'/></a></li>
    <li><a href='#' target='_blank' title='Linkedin'><img alt='' src='http://2.bp.blogspot.com/-qu2EsReNPng/UMt3aIQ6sSI/AAAAAAAAJlY/RcCW3BI06o4/s1600/linkedin.png'/></a></li>
    <li><a href='#' target='_blank' title='Pinterest'><img alt='' src='http://3.bp.blogspot.com/-nZJuxAiV91c/UMt2xc-ydNI/AAAAAAAAJlE/y_2cYBzI8-M/s1600/pinterest.png'/></a></li>
    <li><a href='#' target='_blank'><img alt='' src='http://2.bp.blogspot.com/-kjb4ky538Ss/UMt2yD_43JI/AAAAAAAAJlM/TsonJ3OT0r4/s1600/rss.png'/></a></li>
    </ul>
    </div>
    </div>
    </div>
    <!-- End Navigation -->

Save dan lihat hasilnya

NB : # ganti dengan URL sobat

Happy Bloging Guys

   

31 komentar

Liat Demonya aja Mas. Keren juga. hehe

sy malah blm liat nih...soale gi BW via hp :)

kode nya lumayan panjang juga ya kang...kayak kereta malem hehe .... :)

tapi emang sesuai sama hasilnya...yg elegance dan keliat menarik ya ... :)

Keren tapi nambah Berat nggak bro,,,,,,

wah dapat ilmu baru lagi nih
tutorial yg sangat membantusekali sobat, terima kasih sudah berbagi

hendrik : lumayan daripada luma... ( gak tega hehe )
Budi : lagi dijalan ya mas ..

dalam rangka menyambut hari buruh , longmarch nya panjang hehe
nah itu maksudnya mas bud nyang penting hasilnya ...

owh tidak kang .. ini sudah di compress .. meh turun panas na haha

terimakasih kembali mas

keren kang sticky navigationnya ... jdi pengen ikutan pasang nih hehehe... lgi sibuk kang, jdi baru sempet hadir... beginilah klo jdi wali kelas 6 hehehe... met mlm ya kang :)

aku udah siap bawa timbangan nih kang..

betul sekali bang PP ini, aku juga dapet ilmu baru kok. malahan limited edition ya mas :)
hohoho

sangat cocok dan serasi sekali ini mas, sesuai dengan namanya "sticky" navigation menu emang keren dan lebih waow untuk diterpakan kedalam blog.
tapi aku pikir2 kok namanya mirip saya ya mas "andes sticky"
hohoho

-__- andes stcikerr

ini aku udah bawain bawang buat di timbang.

gampang cara makenya .. :D
cuma kodenya panjang kali lebar sama dengan berapa..
.

kemarin iya kang......kalo sekarng lagi di warung makan nih....hehe :)

betul...betul....betul....hehe :)

saya yg jd tengkulak nya dagh... :)

kasih plus diskon...lagi :)

beuh mantap dong mas ...
kangen neh makan dijakarta hehe .. bungkus mas bud

upin dan ipin .. betul..betul.. betullllll

andes : emg punya berapa kilo jengkolnya ??
Miz : gak musim bawang tapi jengkol hehe
Budi : berapa sekilo nya mas ??

pasang ja kang ...
hebat neh calon menteri pendidikan kita hehe Amiennnn

belum saaatnya berdiskon mas .. lebaran masih jauhhh

bener tuh tia hahaa

sama dengan , masih tetep fast ko

jengkolku bukan sembarang jengkol mas *limited editions..
hoho

mantap kang.... tapi mamang belum berani utak atik mblog

mantafff.... :)