Cara Membuat Menu Navigasi Drop Down Responsive Keren
Namun demikian, kita sebagai blogger yang baik tentu akan berusaha menerapkan hal terbaik bagi design sebuah template. Untuk itu, berikut akan coba kita berikan tips cara membuat menu navigasi drop down responsive keren di blog.
1. Buka akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>
nav { display:block; margin-top:100px; background:#374147; border-bottom:4px solid #07ACEC; }4. Copas kode di bawah ini tepat di atas kode </head> atau </body>
.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:#07ACEC; }
.menu ul { visibility:hidden; opacity:0; margin:0; padding:0; width:150px; position:absolute; left:0; 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:#07ACEC; color:#fff; }
.menu li:hover>ul { visibility:visible; opacity:1; transform:translate(0,0); }
.menu ul ul { left:149px; top:0; 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:#07ACEC; }
@media (min-width:768px) and (max-width:979px) {
.mainWrap { width:768px; } .menu ul { top:37px; } .menu li a { font-size:12px; } a.homer { background:#07ACEC; }
}
@media (max-width:767px) {
.mainWrap { width:auto; padding:50px 20px; } .menu { display:none; } .responsive-menu { display:block; margin-top:100px; } 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:#07ACEC; 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; }
}
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>5. Copas kode di bawah ini untuk mengganti menu navigasi yang lama.
<script type="text/javascript">
$(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>
<nav>6. Save template
<a id="resp-menu" class="responsive-menu" href="#"><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>
7. Cek aja hasilnya.
Mudah kan? Demikian tips design blog kali ini. Semoga bermanfaat. Salam.
(By : forumblogindo.com/).*
Tidak ada komentar:
Posting Komentar