Cara Dan Metode Menciptakan Navigasi Hidangan Responsive Multilevel Di Blog

cara Dan Teknik Membuat Navigasi Menu Responsive Multilevel di Blog

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

Ini penampakannya di layar komputer desktop:

Ada tiga instruksi untuk memasang sajian responsive blogger ini, yaitu Javascript, CSS, dan HTML. Lakukan atau pasang kode-kode berikut ini dengan teliti semoga tampil sesuai dengan demo.

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var sajian  = $('.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 instruksi ]]></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

Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Navigasi Hidangan Responsive Multilevel Di Blog

4/ 5

Oleh Unknown

Unknown Mei 01, 2016