CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anu
anu

Reputation: 31

Stick second level navigation onclick

I have this 2 level navigation. If I click on second level it should not hide, but stick there. On hover, second level is showing properly, now what I want is, is I click on sub 2 and move my cursor out, the sub 2 should be selected and stay there.

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
    	    $('ul', this).stop(true, true).slideDown('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    	},
    	function() {
            $('ul', this).slideUp('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    	}
    );
});
      
#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 13px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    list-style: none;
}
#top_navigation ul li a {
  	display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation li li {
    height: 30px;
    line-height: 30px;
    border-top: #ccc 1px solid;
}
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body bgcolor="black">   
        <div id="top_navigation">
    		<ul>
    			<li><a href="#">item1</a></li>
    			<li><a href="#">item2</a>
    				<ul class="submenu">
    					<li><a href="#">sub1</a></li>
    					<li><a href="#">sub2</a></li>
    					<li class="selected_menu_item"><a href="#">sub3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    </body>
</html>

Upvotes: 3

Views: 220

Answers (2)

Vincent Panugaling
Vincent Panugaling

Reputation: 906

Try this: 

    $(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');

            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        },
        function() {
           if( ! $('ul', this).children().hasClass('show')) {
               $('ul', this).slideUp('fast');
           } else {
              $('#top_navigation ul').click(function(){
                $('ul.submenu').slideUp();
              })
           }
           $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        }
    );

    $('ul.submenu li').click(function(){
      $('ul.submenu li').removeClass('selected_menu_item')
        $(this).addClass('selected_menu_item show')
    });


});

Working Fiddle: https://jsfiddle.net/co7u8L23/2/

Upvotes: 1

Bijal
Bijal

Reputation: 132

 $(document).ready(function () {
    	var $nav = $('#top_navigation > ul > li');
   	    var $nav1 = $('#top_navigation > ul > li >ul >li');
    	$nav.hover(
    		function() {
    			$('ul', this).stop(true, true).slideDown('fast');
    
                $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    		},
    		function() {
    
    			$('ul', this).slideUp('fast');
               $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    		}
    	);
   $nav1.click(function(){
     $(this).addClass("selected_menu_item");
     }
   );
    });
      
#top_navigation {
    	width: 1248px;
    	margin: 0 auto;
    	position: relative;
    	text-transform: uppercase;
    	font-family: "Rounded Font", sans-serif;
    	font-size: 13px;
    }
    #top_navigation ul ul {
    	display: none;
    }
    #top_navigation ul {
    	padding-left: 0;
    }
    #top_navigation ul li {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 100px;
    	height: 30px;
    	line-height: 30px;
    	font-size: 13px;
    	list-style: none;
    }
    #top_navigation ul li a {
    	display: block;
    	text-align: center;
    	text-decoration: none;
    	color: #000;
    	background-color: #FFF;
    }
    #top_navigation ul li.selected_menu_item a {
    	background-color: #ccc;
    	color: #FFF;
    }
    #top_navigation ul li a:hover {
    	background-color: #ccc;
    	color: #FFF;
    }
    #top_navigation li li {
    	height: 30px;
    	line-height: 30px;
    	border-top: #ccc 1px solid;
    }
<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            
        </head>
      <body bgcolor="black">   
        <div id="top_navigation">
    		<ul>
    			<li><a href="#">item1</a></li>
    			<li><a href="#">item2</a>
    				<ul class="submenu">
    					<li><a href="#">sub1</a></li>
    					<li><a href="#">sub2</a></li>
    					<li class="selected_menu_item"><a href="#">sub3</a></li>
    				</ul>
    			</li>
    			
    		</ul>
    	</div>
    </body>
    
    
    </html>

I have added click event in your code.This is running snippest of it

Upvotes: 0

Related Questions