Membuat Navigasi Menu Responsive Di Blog

membuat navigasi menu responsive di blog

Assalamualaikum.
Bagi anda yang sedang mendesain atau mengedit sebuah template blogger,anda tentunya juga memikirkan satu hal yang akan mengganjal di fikiran anda yaitu navigasi menu dan tentunya juga memiliki responsive yang baik.
Seperti yang kita ketahui bahwa pada umumnya menu navigasi biasanya diletakkan di bagian header blog,entah itu diletakkan diatas header atau dibawah header,bahkan ada juga yang meletakkannya dibagian sidebar.

membuat navigasi menu responsive di blog

Di tutorial kali ini saya akan share cara membuat atau memasang menu navigasi di bagian header blog dengan memanfaatkan css,html jquery.Navigasi yang akan saya share ini terbilang cukup simple,bertingkat dan memiliki responsive yang cukup baik.Untuk preview silahkan anda lihat gambar pertama di posting ini (tampilan di pc) dan gambar kedua diposting ini (tampilan dalam mode responsive),karena saya tidak dapat membuat preview online karena masalah penghematan waktu.

Berikut cara membuat navigasi menu responsive di blog.
1.Login seperti biasa ke www.blogger.com
2.Berikutnya silahkan anda klik template edit html seperti biasa.
3.Di halaman pengeditan HTML,silahkan anda cari kode ]]></b:skin> (untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop aau komputer).
4.Berikutnya,letakkan kode berikut ini diatas kode
 ]]></b:skin>

#cssmenu {
    position: relative;
    height: 44px;
    background: #2b2f3a;
    width: auto;
}
#cssmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}
#cssmenu > ul {
    position: relative;
    display: block;
    background: #2b2f3a;
    width: 100%;
    z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu.align-center ul {
    text-align: center;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu > ul > li {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}
#cssmenu > ul > #menu-button {
    display: none;
}
#cssmenu ul li a {
    display: block;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
}
#cssmenu > ul > li > a {
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    color: #7a8189;
    text-transform: uppercase;
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -ms-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
    padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
    color: #ffffff;
}
#cssmenu li.has-sub::after {
    display: block;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}
#cssmenu > ul > li.has-sub::after {
    right: 10px;
    top: 20px;
    border: 5px solid transparent;
    border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
    border-top-color: #ffffff;
}
#indicatorContainer {
    position: absolute;
    height: 12px;
    width: 100%;
    bottom: 0px;
    overflow: hidden;
    z-index: -1;
}
#pIndicator {
    position: absolute;
    height: 0;
    width: 100%;
    border: 12px solid transparent;
    border-top-color: #2b2f3a;
    z-index: -2;
    -webkit-transition: left .25s ease;
    -moz-transition: left .25s ease;
    -ms-transition: left .25s ease;
    -o-transition: left .25s ease;
    transition: left .25s ease;
}
#cIndicator {
    position: absolute;
    height: 0;
    width: 100%;
    border: 12px solid transparent;
    border-top-color: #2b2f3a;
    top: -12px;
    right: 100%;
    z-index: -2;
}
#cssmenu ul ul {
    position: absolute;
    left: -9999px;
    top: 70px;
    opacity: 0;
    -webkit-transition: opacity .3s ease, top .25s ease;
    -moz-transition: opacity .3s ease, top .25s ease;
    -ms-transition: opacity .3s ease, top .25s ease;
    -o-transition: opacity .3s ease, top .25s ease;
    transition: opacity .3s ease, top .25s ease;
    z-index: 1000;
}
#cssmenu ul ul ul {
    top: 37px;
    padding-left: 5px;
}
#cssmenu ul ul li {
    position: relative;
}
#cssmenu > ul > li:hover > ul {
    left: auto;
    top: 44px;
    opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
    opacity: 1;
}
#cssmenu ul ul li:hover > ul {
    left: 170px;
    top: 0;
    opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
    left: auto;
    right: 170px;
    top: 0;
    opacity: 1;
    padding-right: 5px;
}
#cssmenu ul ul li a {
    width: 130px;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 20px;
    font-size: 12px;
    color: #9ea2a5;
    background: #ffffff;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
    text-align: right;
}
#cssmenu ul ul li:hover > a {
    background: #f2f2f2;
    color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
    border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
    content: '';
    border: 6px solid transparent;
    width: 0;
    height: 0;
    border-bottom-color: #ffffff;
    position: absolute;
    top: -12px;
    left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
    left: auto;
    right: 30px;
}
#cssmenu ul ul li.has-sub::after {
    border: 4px solid transparent;
    border-left-color: #9ea2a5;
    right: 10px;
    top: 12px;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
    border-left-color: transparent;
    border-right-color: #9ea2a5;
    right: auto;
    left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
    border-left-color: #ffffff;
    right: -5px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
    border-right-color: #ffffff;
    border-left-color: transparent;
    left: -5px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
        width: auto;
    }
    #cssmenu.align-center ul {
        text-align: left;
    }
    #cssmenu.align-right > ul > li {
        float: none;
    }
    #cssmenu ul {
        width: auto;
    }
    #cssmenu .submenuArrow,
    #cssmenu #indicatorContainer {
        display: none;
    }
    #cssmenu > ul {
        height: auto;
        display: block;
    }
    #cssmenu > ul > li {
        float: none;
    }
    #cssmenu li,
    #cssmenu > ul > li {
        display: none;
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul,
    #cssmenu ul > li:hover > ul,
    #cssmenu ul ul > li:hover > ul,
    #cssmenu.align-right ul ul,
    #cssmenu.align-right ul ul ul,
    #cssmenu.align-right ul > li:hover > ul,
    #cssmenu.align-right ul ul > li:hover > ul {
        position: relative;
        left: auto;
        top: auto;
        opacity: 1;
        padding-left: 0;
        padding-right: 0;
        right: auto;
    }
    #cssmenu ul .has-sub::after {
        display: none;
    }
    #cssmenu ul li a {
        padding: 12px 20px;
    }
    #cssmenu ul ul li a {
        border: 0;
        background: none;
        width: auto;
        padding: 8px 35px;
    }
    #cssmenu.align-right ul ul li a {
        text-align: left;
    }
    #cssmenu ul ul li:hover > a {
        background: none;
        color: #8c9195;
    }
    #cssmenu ul ul ul a {
        padding: 8px 50px;
    }
    #cssmenu ul ul ul ul a {
        padding: 8px 65px;
    }
    #cssmenu ul ul ul ul ul a {
        padding: 8px 80px;
    }
    #cssmenu ul ul ul ul ul ul a {
        padding: 8px 95px;
    }
    #cssmenu > ul > #menu-button {
        display: block;
        cursor: pointer;
    }
    #cssmenu #menu-button > a {
        padding: 14px 20px;
    }
    #cssmenu ul.open li,
    #cssmenu > ul.open > li {
        display: block;
    }
    #cssmenu > ul.open > li#menu-button > a {
        color: #fff;
        border-bottom: 1px solid rgba(150, 150, 150, 0.1);
    }
    #cssmenu ul ul::after {
        display: none;
    }
    #cssmenu #menu-button::after {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #7a8189;
        border-bottom: 2px solid #7a8189;
        right: 20px;
        top: 15px;
    }
    #cssmenu #menu-button::before {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #7a8189;
        right: 20px;
        top: 25px;
    }
    #cssmenu ul.open #menu-button::after,
    #cssmenu ul.open #menu-button::before {
        border-color: #fff;
    }
}

5.Jika sudah,berikutnya anda masukkan kode jquery berikut ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Keterangan: Jika di template anda sudah terdapat kode jquery seperti diatas,maka tidak perlu anda tambahkan lagi.

6.Berikutnya masukkan kode berikut ini diatas kode
 </head>
<script src='http://joe.wen.ru/js/main.js'/>

7.Jika sudah,silahkan anda copy kode HTML dibawah ini.

<div id="cssmenu"><div id="indicatorContainer"><div id="pIndicator" style="left: 262px;"><div id="cIndicator"></div></div></div>
  <ul><li id="menu-button"><a>Menu</a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li class="active has-sub"><a href="#"><span>Products</span></a>
      <ul>
        <li class="has-sub"><a href="#"><span>Product 1</span></a>
          <ul>
            <li><a href="#"><span>Product 1 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 2</span></a>
          <ul>
            <li><a href="#"><span>Product 2 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 3</span></a>
          <ul>
            <li><a href="#"><span>Product 3 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 3 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 4</span></a>
          <ul>
            <li><a href="#"><span>Product 4 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 4 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 5</span></a>
          <ul>
            <li><a href="#"><span>Product 5 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 5 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 6</span></a>
          <ul>
            <li><a href="#"><span>Product 6 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 6 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 7</span></a>
          <ul>
            <li><a href="#"><span>Product 7 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 7 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 8</span></a>
          <ul>
            <li><a href="#"><span>Product 8 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 8 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 9</span></a>
          <ul>
            <li><a href="#"><span>Product 9 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 9 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 10</span></a>
          <ul>
            <li><a href="#"><span>Product 10 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 10 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 11</span></a>
          <ul>
            <li><a href="#"><span>Product 11 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 11 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 12</span></a>
          <ul>
            <li><a href="#"><span>Product 12 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 12 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 13</span></a>
          <ul>
            <li><a href="#"><span>Product 13 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 13 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 14</span></a>
          <ul>
            <li><a href="#"><span>Product 14 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 14 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 15</span></a>
          <ul>
            <li><a href="#"><span>Product 15 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 3</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 4</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 5</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 6</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 7</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 8</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 9</span></a></li>
            <li class="last"><a href="#"><span>Product 15 - 10</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="active has-sub"><a href="#"><span>Places</span></a>
      <ul>
        <li class="has-sub"><a href="#"><span>Place 1</span></a>
          <ul>
            <li><a href="#"><span>Place 1 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 1 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 2</span></a>
          <ul>
            <li><a href="#"><span>Place 2 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 2 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 3</span></a>
          <ul>
            <li><a href="#"><span>Place 3 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 3 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 4</span></a>
          <ul>
            <li><a href="#"><span>Place 4 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 4 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 5</span></a>
          <ul>
            <li><a href="#"><span>Place 5 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 5 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 6</span></a>
          <ul>
            <li><a href="#"><span>Place 6 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 6 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 7</span></a>
          <ul>
            <li><a href="#"><span>Place 7 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 7 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 8</span></a>
          <ul>
            <li><a href="#"><span>Place 8 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 8 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 9</span></a>
          <ul>
            <li><a href="#"><span>Place 9 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 9 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 10</span></a>
          <ul>
            <li><a href="#"><span>Place 10 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 10 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 11</span></a>
          <ul>
            <li><a href="#"><span>Place 11 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 11 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 12</span></a>
          <ul>
            <li><a href="#"><span>Place 12 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 12 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 13</span></a>
          <ul>
            <li><a href="#"><span>Place 13 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 13 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 14</span></a>
          <ul>
            <li><a href="#"><span>Place 14 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 14 - 10</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Place 15</span></a>
          <ul>
            <li><a href="#"><span>Place 15 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 1</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 2</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 3</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 4</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 5</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 6</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 7</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 8</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 9</span></a></li>
            <li class="last"><a href="#"><span>Place 15 - 10</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#"><span>About</span></a></li>
    <li class="last"><a href="#"><span>Contact</span></a></li>
  </ul>
</div>

8.Berikutnya silahkan anda letakkan kode HTML yang sudah anda copy diatas dengan cara paste kode ke area header yang anda inginkan.
Jika anda ingin meletakkannya diatas header,maka silahkan anda paste kodenya diatas kode
 </header> atau diatas kode <div id='header-wrapper'>.
Jika anda ingin meletakkan dibagian bawah header maka silahkan anda paste kodenya dibawah kode
 </header> atau dibawah <div id='header-wrapper'> atau dibawah <div id='content-wrapper'> juga bisa,bagi anda yang biasa mengedit template blogger maka anda bisa meletakkannya sesuai selera anda.

9.Jangan lupa,kode
 # anda ganti dengan alamat URL yang anda inginkan,dan nama product,place silahkan anda ganti dengan nama link yang anda inginkan.

10.Jika sudah,silahkan anda save atau simpan.

Silahkan anda kunjungi blog anda,maka menu navigasi responsive telah hadir di blog anda.
Demikianlah cara membuat navigasi menu responsive di blog.
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

3 komentar

makasi ... sukses deh pasang navigasi responsive nya ... sukses buat anda ya. terima kasih

cuma ada tanda klik navigasi tapi ketika layar di perkecil tidak merespon menunya untuk kecil juga maaf saya terlalu newbie . tolong pencerahanya

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan