Cara Memasang Navigasi Mega Menu Dropdown di Blogger.

Navigasi Mega Menu Dropdown yakni navigasi hidangan yang menampilkan aneka macam link hidangan berisi label, kategori, atau hidangan linnya. Ini penampakannya.


Cara Memasang Navigasi Mega Menu Dropdown di Blogger Cara buat blog itu- Cara Memasang Navigasi Mega Menu Dropdown di Blogger

Cara Memasang Navigasi Mega Menu Dropdown di Blogger

1. Tema > Edit HTML
2. Copas instruksi CSS Navigasi Mega Menu Dropdown berikut ini di atas instruksi ]]></b:skin>

.megamenu{height:50px;width:100%;max-width:1024px;margin:auto;background:#f7f7f7;margin-bottom:10px}
.megamenu > ul{height:100%;position:relative;list-style:none;margin:5px 0;padding:0;z-index:9999}
.megamenu > ul > li{float:left;height:100%;position:initial;list-style:none}
.megamenu > ul > li > nav{position:absolute;perspective:500px;left:0;bottom:0;width:100%}
.megamenu > ul > li > a{height:100%;display:block;padding:15px 15px;text-decoration:none;position:relative;color:#444;transition:all 0.5s ease;transition-delay:0.2s;text-shadow:0 -1px 0 rgba(0,0,0,0.1)}
.megamenu > ul > li > a .fa{margin-right:0.5em;color:rgba(0,0,0,0.4)}
.megamenu > ul > li > a:after{content:'\25be';margin-left:0.5em;color:rgba(0,0,0,0.4);display:inline-block;transform-origin:50% 60% 0;transition:transform 0.3s 0.2s ease-in}
.megamenu > ul > li:hover > a:after{transform:rotateZ(180deg)}
.megamenu > ul > li:hover > a{background:#0277bd;color:#fff}
.megamenu > ul > li:hover > nav > ul{transform:rotateX(0deg);transition-delay:0.2s;opacity:1;z-index:1}
.megamenu > ul > li:nth-child(1) > a{border-bottom-color:#4caf50}
.megamenu > ul > li:nth-child(1):hover > a,.megamenu > ul > li:nth-child(1) > nav > ul{background:#4caf50}
.megamenu > ul > li:nth-child(2) > a{border-bottom-color:#009688}
.megamenu > ul > li:nth-child(2):hover > a,.megamenu > ul > li:nth-child(2) > nav > ul{background:#009688}
.megamenu > ul > li:nth-child(3) > a{border-bottom-color:#0277bd}
.megamenu > ul > li:nth-child(3):hover > a,.megamenu > ul > li:nth-child(3) > nav > ul{background:#0277bd}
.megamenu > ul > li:nth-child(4) > a{border-bottom-color:#ab47bc}
.megamenu > ul > li:nth-child(4):hover > a,.megamenu > ul > li:nth-child(4) > nav > ul{background:#ab47bc}
.megamenu > ul > li > nav > ul{color:#fff;position:absolute;left:0;padding:0;width:100%;z-index:-2;transform:rotateX(-90deg);transform-origin:top center;transition:all 0.3s ease-out;transition-delay:0.3s;transform-style:preserve-3d;border-bottom:5px solid rgba(0,0,0,0.2);display:flex;flex-flow:row;min-height:200px;opacity:0}
.megamenu > ul > li > nav > ul img{box-shadow:0 1px 3px rgba(0,0,0,0.2);background:rgba(255,255,255,.4);border:1px solid rgba(0,0,0,0.5)}
.megamenu > ul > li > nav > ul li.bg{opacity:0.1;position:absolute;width:100%;top:0;left:0}
.megamenu > ul > li > nav > ul li.bg img{width:100%;height:100%}
.megamenu > ul > li > nav > ul > li{padding:20px;line-height:1.4em;font-size:13px;flex:1;min-width:10%;min-height:0}
.megamenu > ul > li > nav > ul > li:nth-child(even){background:rgba(0,0,0,0.1)}
.megamenu > ul > li > nav > ul > li > h3{font-weight:bold;line-height:1.1em;font-size:1.2em;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > nav > ul > li > ul{list-style:square;padding-left:20px;color:rgba(255,255,255,0.6)}
.megamenu > ul > li > nav > ul > li > ul > li > a{color:rgba(255,255,255,0.6);margin-bottom:5px;display:block;text-decoration:none}
.megamenu > ul > li > nav > ul > li > ul > li > a:hover{color:#fff}
.wrapper{width:100%;min-height:360px;background:#2f3e55;padding:20px}
footer{display:block;position:fixed;text-align:center;color:#ddd;font-weight:normal;text-shadow:0 -1px 0 rgba(0,0,0,0.2);font-size:0.8em;bottom:10px;right:0;padding:20px}
footer a,footer a:link{color:#fff;text-decoration:none}
body,html{height:100%}
.wrapper{min-height:100%}

3. Copas HTML Navigasi Mega Menu Dropdown berikut ini di bawah instruksi epilog header blog Anda.

<nav class="megamenu">
  <ul>
    <li>
      <a href="#"><span class="fa fa-home"></span>Home</a>
      <nav>
        <ul>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </li>
    <li>
      <a href="#"><span class="fa fa-asterisk"></span>Lorem</a>
      <nav>
        <ul>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </li>
    <li>
      <a href="#"><span class="fa fa-rocket"></span>Ipsum</a>
      <nav>
        <ul>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
          <li>
            <h3>Lorem ipsum</h3>
            <ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </li>
  </ul>
</nav>

4. Save!

Demikian Cara Memasang Navigasi Mega Menu Dropdown di Blogger. Desain megamenu lainnya dapat dilihat di Evanto Tuts.

Cara Memasang Navigasi Mega Menu Dropdown di Blogger Cara buat blog itu- Cara Memasang Navigasi Mega Menu Dropdown di Blogger

Good Luck & Happy Blogging! (www.carabuatblogitu.com).*

Sumber:
See the Pen Mega drop down menu by Mohamed Boudra (@boudra) on CodePen.


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours