Cara Memasang Navigasi Mega Menu Dropdown di Blogger

Cara Memasang Navigasi Mega Menu Dropdown di Blogger

Cara Memasang Navigasi Mega Menu Dropdown di Blogger.

Navigasi Mega Menu Dropdown adalah navigasi menu yang menampilkan banyak sekali link menu berisi label, kategori, atau menu linnya. Ini penampakannya.


Navigasi Mega Menu Dropdown

Cara Memasang Navigasi Mega Menu Dropdown di Blogger

1. Tema > Edit HTML
2. Copas kode CSS Navigasi Mega Menu Dropdown berikut ini di atas kode ]]></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 kode penutup 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 bisa dilihat di Evanto Tuts.

Navigasi Mega Menu

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

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


Related Posts

0 Komentar untuk "Cara Memasang Navigasi Mega Menu Dropdown di Blogger"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *