BERIKUT ini cara menciptakan navigasi sajian responsive (mobile friendly) dropdown dan multidropdown untuk blog blogger. Serupa dengan posting sebelumnya: cara menciptakan navigasi sajian responsive simple keren.
Penampakan sajian ini di dekstop ibarat pada umumnya sajian navigasi. Penampilan sajian responsivenya, ketika dibuka di mobile devices alias HP, ibarat gambar berikut ini:
Keren 'kan?
Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger
1. Template > Edit HTML2. Copas arahan CSS Menu Responsive berikut ini di atas arahan ]]></b:skin>
/* Responsive Menu Dropdown */
.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a {margin: 0; padding: 0;}
.dropdowns a {
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;}
.toggleMenu {
display: none;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
}
.nav a {
padding: 10px 15px;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
position: relative;
z-index:100;
}
.nav li li li a {
z-index:200;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
.toggleMenu {
background: #666;
color: #fff;
}
.nav {
background:#175e4c;
}
.nav a {
color:#fff;
}
.nav > li {
border-top: 1px solid #104336;
}
.nav li li a {
background: #1d7a62;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
border-top: 1px solid #1d7a62;
}
.dropdowns {
width: 100%;
max-width: 960px;
background: #111;
}
a.toggleMenu {
padding: 10px 15px;background: #111;
}
.nav ul {
width: 9em;
}
.nav > li > .parent {
}
3. Copas arahan JavaScript Navigasi Menu Responsive + Dropdown untuk Blogger berikut ini di atas arahan </body> atau </head>
<script type="text/javascript">
(function($){
$.fn.dropdowns = function (options) {
var defaults = {
toggleWidth: 768
}
var options = $.extend(defaults, options);
var ww = document.body.clientWidth;
var addParents = function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
}
var adjustMenu = function() {
if (ww < options.toggleWidth) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= options.toggleWidth) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
return this.each(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(this).next(".nav").toggle();
adjustMenu();
});
adjustMenu();
addParents();
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
});
}
})(jQuery)
</script>
<script>
$(".dropdowns").dropdowns();
</script>
4. Copas Kode HTML alias nama-nama dan link menunya di bawah arahan epilog </header> atau di atas arahan <div class='main-wrapper'> dan yang serupa dengannya.
<div class='dropdowns'>
<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li class='test'>
<a href='#'>Dropdown1</a>
<ul>
<li>
<a href='#'>Womens</a>
<ul>
<li><a href='#'>Sandals</a></li>
<li><a href='#'>Sneakers</a></li>
<li><a href='#'>Wedges</a></li>
<li><a href='#'>Heels</a></li>
<li><a href='#'>Loafers</a></li>
<li><a href='#'>Flats</a></li>
</ul>
</li>
<li>
<a href='#'>Mens</a>
<ul>
<li><a href='#'>Loafers</a></li>
<li><a href='#'>Sneakers</a></li>
<li><a href='#'>Formal</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Dropdown2</a>
<ul>
<li>
<a href='#'>Mens</a>
<ul>
<li><a href='#'>T-Shirts</a></li>
<li><a href='#'>Dress Shirts</a></li>
<li><a href='#'>Tank Tops</a></li>
</ul>
</li>
<li>
<a href='#'>Womens</a>
<ul>
<li><a href='#'>T-Shirts</a></li>
<li><a href='#'>Blouses</a></li>
<li><a href='#'>Dress Shirts</a></li>
<li><a href='#'>Tunics</a></li>
<li><a href='#'>Camisoles</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Pants</a>
<ul>
<li>
<a href='#'>Mens</a>
<ul>
<li><a href='#'>Trousers</a></li>
<li><a href='#'>Slacks</a></li>
<li><a href='#'>Jeans</a></li>
</ul>
</li>
<li>
<a href='#'>Womens</a>
<ul>
<li><a href='#'>Trousers</a></li>
<li><a href='#'>Slacks</a></li>
<li><a href='#'>Jeans</a></li>
<li><a href='#'>Leggings</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Skirts</a>
<ul>
<li>
<a href='#'>Long</a>
<ul>
<li><a href='#'>Denim</a></li>
<li><a href='#'>Knits</a></li>
</ul>
</li>
<li>
<a href='#'>Short</a>
<ul>
<li><a href='#'>Denim</a></li>
<li><a href='#'>Knits</a></li>
</ul>
</li>
<li>
<a href='#'>Mini</a>
<ul>
<li><a href='#'>Denim</a></li>
<li><a href='#'>Knits</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Dresses</a>
<ul>
<li>
<a href='#'>Casual</a>
</li>
<li>
<a href='#'>Formal</a>
<ul>
<li><a href='#'>Wedding</a></li>
<li><a href='#'>Party</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Seks</a>
<ul>
<li><a href='#'>Mens</a></li>
<li><a href='#'>Womens</a>
</li>
</ul>
</li>
<li>
<a href='#'>Link</a>
</li>
</ul>
</div>
Save Template!
NOTES!
Pastikan di template Anda suda link ke arahan jQuery ibarat ini:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
atau
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Jika belum ada, pasang/tambahkan salah satu arahan tersebut di atas arahan </head>
KHOTIMAH
Kode Navigasi Menu Responsive + Dropdown untuk Blogger di atas dimodifikasi dari sumbernya di Github. Wasalam. (http://blogromeltea.blogspot.com).*
Link Sumber Kode: https://github.com/tessalt/dropdowns
0 comments: