Menu Dropdown

Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
<!-- mobile menu -->
<div class="mobilenav--wrap">
    <div class="mobilenav">
    <?php
    if(function_exists('wp_nav_menu')):
        wp_nav_menu( 
            array( 
            'menu' =>'primary_nav',
            'theme_location' => 'primary_nav', 
            'container'=>'', 
				'depth' => 2,
				'menu_id' => 'menu' ) 
		);
		endif;
		?>
	</div>
</div>
//hide sub-menus
jQuery('.mobilenav ul ul').hide();

jQuery('.mobilenav ul.sub-menu').each(function() {
	if(jQuery(this).children().length){
		jQuery(this,'li:first').parent().append('<a class="menu-expand" href="#" style="font-size:26px;color:white;"><span class="plus1"></span><span class="plus2"></span></a>');
	}
});

jQuery('.mobilenav ul li.menu-item-has-children').on('click',function(e){
	//jQuery('ul.sub-menu').slideUp(300, function(){});
	//e.preventDefault();
	if (jQuery(this).hasClass("menu-clicked")) {
		jQuery(this).removeClass("menu-clicked");
		jQuery(this).children('ul').slideUp(300, function(){});
	} else {
		jQuery(this).addClass("menu-clicked");
		jQuery(this).children('ul').slideDown(300, function(){});
	}
})
/* mobile menu */
.mobilenav {
	width: 100%;
	height: 100%;
	overflow: scroll;
	padding: 0;
}

.mobilenav > ul {
	width: 100%;
	box-sizing: border-box;
	padding-inline-start:0;
}

.mobilenav ul li {
	position: relative;

	list-style:none;
	font-size: 22px;
}

.mobilenav ul li a {
	display: block;
	padding: 15px 0px;
	text-decoration: none;
	color: color(3);
}

.mobilenav ul li a:hover {
	color: color(1);
	transition:all .6s ease;
}

.mobilenav ul li:hover ul {
	display:block;
}

.mobilenav ul ul li {
	border-bottom: 0;
	position: relative;
	font-size: 80%;	
	padding:0!important;
}

.mobilenav ul ul {
	padding-left: 20px;
	background:none;
	padding:0 0 0 20px!important;
}

.mobilenav ul ul li a {
    padding: 5px 0 5px 20px;
}

a.menu-expand {
	padding: 0 !important;
	background: transparent !important;
	width: 44px;
	height: 44px;
	position: absolute; 
	top: 7px;
	right: 0;
	z-index: 100;
}

.mobilenav ul li.menu-item-has-children .plus1{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-180deg);
}

.mobilenav ul li.menu-item-has-children .plus2{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-270deg);
}

.menu-clicked .plus2 {
	transform: rotate(0)!important;
}

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait

Gallery Slider Owl Caraousel + Lightbox
Daftar Children 1 Taxonomy + Active Class
Logo Carousel dengan Flickity
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross