Cara Membuat Navigasi Menu Responsive Multilevel di Blog

Baca Juga

Cara Membuat Navigasi Menu Responsive Multilevel di Blog

MELENGKAPI koleksi membuat navigasi menu responsive yang sudah dishare sebelumnya, berikut ini CB share lagi kode menu responsive dropdown dengan icon awesome font guna mempercantik tampilan blog Anda.

Ini penampakannya di layar komputer desktop:

Ada tiga kode untuk memasang menu responsive blogger ini, yakni Javascript, CSS, dan HTML. Lakukan atau pasang kode-kode berikut ini dengan teliti agar tampil sesuai dengan demo.

KODE JAVASCRIPT
Pasang di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>

</script>

KODE CSS
Simpan di atas kode ]]></b:skin> atau </style>

nav {
    display: block;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #F70000;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #F70000;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #F70000;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #F70000;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

KODE HTML
Simpan di atas kode </header>

<nav>

<a class="responsive-menu" href="#" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    

   <ul class="menu">

<li><a class="homer" href="/"><i class="fa fa-home"></i> HOME</a>

   <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a></li>

<li><a href="#">Sub-Menu 3</a></li>

<li><a href="#">Sub-Menu 4</a></li>

<li><a href="#">Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>

<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>

  <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#">Sub-Menu 3</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>

<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>

  <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#">Sub-Menu 3</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>

<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>

<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>

</ul>

</nav>

LINK KE FONT AWESOME & jQUERY 

Simpan di atas kode </head>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Catatan: 
Jika link ke css awesome font dan link ke jQuery tersebut sudah ada di template blog Anda, tidak usah dipasang lagi.

Save Template!

Sumber