how to activate current navigation link with jQuery - javascript

my Fiddle : https://jsfiddle.net/atg5m6ym/6471/
i was trying to create a navigation bar with the active border below each navigation link, when the user hovers on it. but i want that border on the current item that was hovered. i want to remove that border from that other links. i was trying the code, but it seems my logic is not working.
my javascript
$('ul > li > a').mouseenter(function(){
$(this).find('div').addClass('activeItemNav').siblings('div').removeClass('activeItemNav');
});


You can use css :hover, you don't need jQuery for this:
ul li{
text-align:center;
}
a:hover > div{
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>


Is this what you look for?
Updated fiddle
ul li:hover div {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
list-style-type: none;
text-align:center;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>


You could do this using CSS instead, and set the border as an ::after element. Then you can show this ::after only on hover as such: ul li:hover::after.
An ::after or ::before is a pseudo element in the targeted element.
This way you do not need the unnecessary div.
I have updated your fiddle: https://jsfiddle.net/atg5m6ym/6475/


This Help you :
<!DOCTYPE html>
<html>
<head>
<style>
.activeItemNav {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
text-align:center;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-right">
<li>HOME<div></div></li>
<li>ABOUT<div></div></li>
<li>TEAM<div></div></li>
<li>SERVICES<div></div></li>
<li>PORTFOLIO<div></div></li>
<li>CONTACT<div></div></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul li a ").mouseenter(function(){
$("div",this).addClass("activeItemNav");
}).mouseleave(function(){
$("div",this).removeClass("activeItemNav");
})
})
</script>
</body>
</html>

Related

jQuery Reverse Drop Toggle & CSS Fix

≫ Live Demo On JSFiddle ≪
Occurring Problems / Questions
1). Toggling Show/Hide
Upon clicking on the same drop toggle, or another, I need to reverse the process of any already clicked drop toggles and then show the clicked drop toggle. The current version simply uses the following jQuery code:
$(".HonorBarsList a").click(function(){
$(this).parent().parent().parent().css({ marginBottom : "296px" });
$(this).parent().css({ borderBottom : "none" });
$(this).parent().find("ul").show();
});
I understand that I could loop through the entire scope, applying the initial CSS to all, however this seems like a rather lengthy way to do this.
Q). What is my best solution to use here?
2). Last List Set > UL > Top Left Border
This list is generated via a PHP PDO query, therefore the amount of list items will be unknown. On my provided demo, the last set has only three LI's meaning at the top left corner, there appears to be missing border.
Q). Should I fake this by having the link drop toggle's bottom border white and the UL simply have all borders, or is there another trick I can use, remembering that the last set could have 1-4 LI's within.

It is ok to reset the CSS to all the relevant elements. It might be better to do it with an active class though to make the jQuery code a bit cleaner.
Below is an example of just setting the CSS back to it's defaults before applying the relevent CSS to the clicked element.
$(document).ready(function(){
"use strict";
$(".myList a").click(function(){
// store relevent elements
var parentUl = $(this).parent().parent().parent();
var $this = $(this);
if($this.hasClass("active-li")) {
// if clicked element is already active then toggle class
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
} else {
// otherwise remove active class from active elements
$(".active-ul").removeClass("active-ul");
$(".active-li").removeClass("active-li");
// then toggle the active class on the clicked parent element
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
}
});
});
.myList {
display: block;
float: left;
width: 600px;
height: auto;
margin:0;
padding:0;
border-top:1px solid black;
}
.myList > li,
.myList > li > ul {
display: block;
float: left;
height: 50px;
width: 600px;
margin: 0;
padding: 0;
}
.myList > li > ul > li {
display: block;
float: left;
height: 51px;
width: 150px;
border-left: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
.myList > li > ul > li:last-of-type { border-right: 1px solid black; }
.myList > li > ul > li a {
display: block;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
position:relative;
z-index:2;
}
.myList > li > ul > li > a > div {
display: block;
float: left;
}
.myList > li > ul > li > ul {
display: none;
position: absolute;
height: 150px;
width: 600px;
margin-top: -1px;
margin-left: -1px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-sizing: border-box;
z-index:1;
}
.myList > li > ul > li:nth-of-type(2) > ul { margin-left: -151px; }
.myList > li > ul > li:nth-of-type(3) > ul { margin-left: -301px; }
.myList > li > ul > li:nth-of-type(4) > ul { margin-left: -451px; }
.myList .active-ul {
margin-bottom:150px;
}
.myList .active-li {
border-bottom:1px solid white;
}
.myList .active-li + ul {
display:block;
}
<ul class="myList">
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Maybe it's better to use the .toggle from jQuery
you can handle initial state and new state onclick event
$(".myList a").click(function(){
$(this).parent().parent().parent().toggle(function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "150px"});
}, function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "0px"});
});
)};

drop-down menu that lists columns

I'm trying to create a football website and I need someone to help me . I want to add a drop-down menu that lists columns of football competitions .Exactly in "competitions " just like this drop-down menu that lists columns.
#Mostafa Baezid Here is the code:
<!-- outer-wrapper start -->
<body>
<nav class='navbar navbar-default'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.js-navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>LOGO</a>
</div>
<div class='collapse navbar-collapse js-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>EUROPE</a></li>
<li><a href='#'>AFRICA</a></li>
<li><a href='#'>WORLDWIDE</a></li>
<li class='dropdown mega-dropdown'>
<a class='dropdown-toggle arrow' data-toggle='dropdown' href='#'>Competitions <span class='glyphicon glyphicon-chevron-down '/></a>
<ul class='dropdown-menu mega-dropdown-menu'><!--megaMenu Wih 3 column start-->
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>France</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>Europe</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>INTERNATIONAL</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li><a href='#'>Live Matches</a></li>
<li><a href='#'>Mercato</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
<h1 class='c-text'> Mega Menu Demo </h1>
<script type='text/javascript'>$(function () { $('.arrow').click(function () { $('.glyphicon-chevron-down').toggle(); }); }); </script>
</body>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to Search...";}' onfocus='if (this.value == "Text to Search...") {this.value = "";}' type='text' value='Text to Search...'/>
</form>
</div>
<div class='clear'/>
<!-- secondary navigation menu end -->
<!-- content wrapper start -->

You can easily do this in bootstrap framework. Demo. This is just an example. You can follow this. If you Have Any question ask me in comment. I will explain for you. Good Luck.
[N.B: Don't use !important on css if you have custom css file for your project. I use !important here because overwrite the css in same page.]
/* CSS used here will be applied after bootstrap.css */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: white;
}
nav.navbar-default{
background: #35c353;
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
color:white !important;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover{
color:black !important;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-color:#35c353;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: black !important;
background-color:#35c353 !important;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #20ff4f;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 550px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #20ff4f;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 548px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
background:#777;
}
h1.c-text{
text-align:center;}
/*Usefull class*/
.nopadding {
padding-left:0 !important;
padding-right:0 !important;
}
.nomargin{
margin-left:0;
margin-right:0;
}
#media (max-width:947px) and (min-width:769px) {
.navbar-nav {
display: inline-flex;
margin: 0;
}
.mega-dropdown-menu:before {
left: 495px !important;
}
.mega-dropdown-menu:after {
left: 495px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- All links cdn's Before Body tag end -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>EUROPE</li>
<li>AFRICA</li>
<li>WORLDWIDE</li>
<li class="dropdown mega-dropdown">
Competitions <span class="glyphicon glyphicon-chevron-down "></span>
<ul class="dropdown-menu mega-dropdown-menu"><!--megaMenu Wih 3 column start-->
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">France</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">Europe</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">INTERNATIONAL</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li>Live Matches</li>
<li>Mercato</li>
<li>Videos</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav><!-- /.nav-End -->
<h1 class="c-text"> Mega Menu Demo </h1>
<!-- All Scripts Before Body tag end -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.arrow').click(function () {
$('.glyphicon-chevron-down').toggle();
});
});
</script>
</body>
Add this query this will display the navbar after click on the burger menu on mobile view(media screen 768)
#media only screen and (max-width:768px)
{
.navbar-nav{
display: block !important;
z-index: 1000;
position: absolute !important;
width: 100% ;
border: green !important;
background: #35c353 !important;}
}

Active child menu when I active this url using jQuery

I have created a sidebar, activation class work properly when I stay just parent menu like Sidebar Menu, if I then click on a Sub Menu, although the correct article displays, the NAV bar closes and lose my navigation position.
Below my work code:
Html:
<div id='sidebar'>
<ul>
<li><a href='#'>Sidebar Menu</a></li>
<li class='sub'><a href='#'>Sidebar</a>
<ul>
<li class='sub'><a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li class='sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery
$("#sidebar > ul > li").each(function() {
var sideItem = $(this);
if (sideItem.find("a").attr("href") == location.pathname) {
sideItem.addClass("activation");
}
});
$('#sidebar li.active').addClass('open').children('ul').show();
$('#sidebar li.sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
Issue 1: leave submenues open if I not close submenues
Like below image:
At the same time open three submenu I implement like this.
Issue 2: Active child menu when I active this url
How can I reach this solution?
JSFiddle

I think this is what you want. I only concerned about your main point.sorry about the UI.try this and tell me is this your case.you can try it in here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.navi{
width: 200px;
}
ul{
color: orange;
cursor: pointer;
font-weight: bold;
}
ul li{
list-style-type: none;
color: black;
text-indent: 20%;
font-weight: normal;
display: list-item;
display: none;
}
ul li:hover{
background-color: orange;
color: white;
}
ul li:active{
background-color: orange;
color: white;
}
</style>
<body>
<div class="navi">
<ul class="one"><span class="onez"> > Sub One</span>
<li>First</li>
<li>Second</li>
</ul>
<ul class="two"> <span class="twoz"> > Sub Two</span>
<li>Third</li>
<li>Four</li>
</ul>
</div>
<script type="text/javascript">
$(".onez").click(function(){
if ($("ul.one li").is(':visible')){
$("ul.one li").slideUp();
}
else{
$("ul.one li").slideDown();
}
});
$(".twoz").click(function(){
if ($("ul.two li").is(':visible')){
$("ul.two li").slideUp();
}
else{
$("ul.two li").slideDown();
}
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active child test</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
text-decoration: none;
}
.glyphicon {
top: -3.1px;
font-size: 14px;
}
.uparrow{
display: none;
}
</style>
</head>
<body>
<div id='sidebar'>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar</a>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("a").click(function(){
var parent=$(this).parent();
$('.downarrow',parent).toggle();
$('.uparrow',parent).toggle();
$("ul",parent).slideToggle("fast");
$(this).toggleClass("up");
});
})
</script>
</body>
</html>

Dropdown menu bootstrap multilevel

I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

Hide CSS menu on click

Any idea how I can hide this dropdown when any item is clicked on? return it to its resting state? I want it to be hidden mainly for mobile users. It works fine as is right now, but on mobiles it stays open until another element of the page "happens" to be clicked on.
HTML
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li>
</ul>
</div>
CSS
ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;}
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial,
Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;}
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;}
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden;
display: none; border: 1px #000000 solid; border-bottom: none;}
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display:
block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;}
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;}
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;}
jsfiddle http://jsfiddle.net/omvvL5z5/1/

Use the JQuery $(".menubar").toggle() function inside a function you call when you click on a item.
http://api.jquery.com/toggle/
This is the code I tried on jsfiddle: Try three
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li>
</ul>
</div>
Then just put in your other jquery
instead of what I did try
$('.menu > ul > li').click(function() {
$('.menu > ul.menu').toggle();
});
$('.button').hover(function(){$('.menu > ul.menu').show();});
You may also use something like bootstrap: http://getbootstrap.com/components/#navbar

Please give this CSS for mobile css
.menubar{
display:none;
}

Categories

Resources