CODEWITHSUNDEEP
jqueryhtmlcss
Jenie
Jenie

Reputation: 31

drop down menu on click

My drop down is messing up. Can somebody help. I can't make the drop down menu hide when clicking other element (menu). Also the hover of the main menu does not stays while the drop down menu is shown. 

$('.menus >li').on('click', '> a' ,function() {
    $(this).siblings('.main-subs').show();      
}).on('click', function(){  
    $(this).siblings('.main-subs').hide();      
});

for demo see here

Upvotes: 3

Views: 150

Answers (5)

Adrian Menendez
Adrian Menendez

Reputation: 490

I think the simplest solution is adding a new rule to your CSS

.menus .main-subs.active { display: block;}

And modify your function to:

$('.menus >li').on('click',function() {
    $("a", this).siblings('.main-subs').toggleClass("active");
    $(this).siblings().children(".main-subs").removeClass("active");
});


$('.menus >li').on('click',function() {
	$("a", this).siblings('.main-subs').toggleClass("active");
    $(this).siblings().children(".main-subs").removeClass("active");
});
.menus { display: table; width: 70%; height: 76px; }
.menus li { position: relative; display: table-cell; height: 48px; padding: 0; text-transform: uppercase; font-size: 17px; font-family: 'Myriad Pro'; text-align: center; }
.menus li:hover {background:green;}
.menus li.order a { color: #ffffff; }
.menus li.order .main-subs { display: none; }
.menus li a { width: 100%; height: 48px; padding-top: 28px; display: block; color: #b1bbbe; }
.menus li a:hover { color: #fff; }
.menus li:hover { background: green; }
.menus li.current { background: #0383E7; }
.menus li.current a { color: #fff; }
.menus .main-subs { display: none; position: absolute; width: 100%; left: -40px; top: 76px; z-index: 999; }


.menus .main-subs.active { display: block;}


.menus .main-subs li { display: block; height: 51px; padding: 0; border-bottom: 1px solid #0383e7; text-align: left; text-transform: uppercase; background: #0870d3; font: normal 12px 'Malgun Gothic'; }
.menus .main-subs li a { display: block; height: 31px; padding-left: 12px; padding-top: 20px; color: #fff; }
.menus .main-subs li:hover { background: #0866c5; }
.menus .main-subs li:last-child { border-bottom: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menus">
		<li>
			<a href="#">Main Menu</a>						
			<ul class="main-subs">
				<li><a href="#">Sub Menu 1</a></li>							
				<li><a href="#">Sub Menu 1</a></li>
			</ul>						
		</li>
		<li>
			<a href="#">Main Menu2</a>
			<ul class="main-subs">
				<li class="withsub"><a href="#">Sub Menu 2</a>
				</li>							
				<li class="withsub"><a href="#">Sub Menu 2</a>
				</li>
				<li><a href="#">Sub Menu 2</a></li>
			</ul>						
		</li>
		<li>
			<a href="#">Main Menu3</a>						
			<ul class="main-subs">
				<li><a href="#">Main Menu3</a></li>							
				<li><a href="#">Main Menu3</a></li>
				<li><a href="#">Main Menu3</a></li>
			</ul>						
		</li>
		
	</ul>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Simple:

.menus .activ { background: green; }

js:

$('.menus >li').on('click', '> a' ,function() {
        //resets
         $('.menus li a').removeClass('activ');
         $('.main-subs').hide();
         //toggle the green
        $(this).addClass('activ');
        //show the menu
        $(this).siblings('.main-subs').show();  
    });

http://jsfiddle.net/u1jt500x/

Upvotes: 0

sailens
sailens

Reputation: 1614

Full CSS approach. No need to click to show the menu and hide it. Just add this to your CSS:

.menus li:hover a ~ ul {
    display: block;
}

See it working here: http://jsfiddle.net/0smo76be/3/

Upvotes: 1

VishwaKumar
VishwaKumar

Reputation: 3433

$('.menus >li').on('click', '> a' ,function() {
        $('.main-subs').hide();
        $(this).siblings('.main-subs').show();  
    }).on('click', function(){  
        $(this).siblings('.main-subs').hide();      
    });

$(document).click(function(event) { 
    if(!$(event.target).closest('.menus >li > a').length) {
        if($('.menus >li > a').is(":visible")) {
            $('.main-subs').hide();
        }
    }        
})

Fiddle

Upvotes: 0

Tintu C Raju
Tintu C Raju

Reputation: 2700

Hide all other submenus with class name main-subs on mouse over

$('.menus >li').on('click', '> a' ,function() {
  $('.main-subs').hide();   
  $(this).siblings('.main-subs').show();    
})

$('.menus >li').on('mouseover', '> a' ,function() {
  $('.main-subs').hide();   
})

Fiddle : http://jsfiddle.net/tintucraju/c5ebqaje/1/

Upvotes: 1

Related Questions