Way to style nav bar similar to one attached - javascript

I am in the process of trying to style this navigation bar to this image:
Currently I have this:
https://jsfiddle.net/jd3tgzme/1/
<!-- Custom CSS -->
<style>
.alphabetNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
background-color: #cecece;
padding: 3px;
margin: 2px;
}
.noNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
color: #FFFFFF;
background-color: #000000;
padding: 3px;
margin: 2px;
}
.letter:hover {
color: red;
}
.letter:visited {
background-color: red;
}
.submenuDiv ul {
display: inline;
}
.submenuDiv ul li {
float: left;
list-style: none;
padding: 5px;
margin: 10px;
background-color: #cecece;
border: solid 1px black;
border-radius: 10px;
font-size: 12px;
}
.submenuDiv {
display: none;
}
</style>
<!-- JS -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
$(document).ready(function() {
$(".letter").click(function(e) {
var letter = $(this).html().trim();
$(".submenuDiv").hide();
x = e.clientX - 100;
pos = $(this).position();
y = pos.top + 50;
$("#div" + letter).css({
left: x,
top: y,
position: 'absolute'
});
$("#div" + letter).show();
});
});
</script>
</head>
<body>
<ul class='alphabetNav'>
<li><a class='letter' id='letterA'>A</a>
</li>
<li><a class='letter' id='letterB'>B</a>
</li>
<li><a class='letter' id='letterC'>C</a>
</li>
<ul class='noNav'>
<li>D</li>
</ul>
<li><a class='letter' id='letterE'>E</a>
</li>
<ul class='noNav'>
<li>F</li>
</ul>
<li><a class='letter' id='letterG'>G</a>
</li>
<li><a class='letter' id='letterH'>H</a>
</li>
<ul class='noNav'>
<li>I</li>
</ul>
<ul class='noNav'>
<li>J</li>
</ul>
<li><a class='letter' id='letterK'>K</a>
</li>
<li><a class='letter' id='letterL'>L</a>
</li>
<li><a class='letter' id='letterM'>M</a>
</li>
<ul class='noNav'>
<li>N</li>
</ul>
<li><a class='letter' id='letterO'>O</a>
</li>
<li><a class='letter' id='letterP'>P</a>
</li>
<li><a class='letter' id='letterQ'>Q</a>
</li>
<li><a class='letter' id='letterR'>R</a>
</li>
<li><a class='letter' id='letterS'>S</a>
</li>
<li><a class='letter' id='letterT'>T</a>
</li>
<ul class='noNav'>
<li>U</li>
</ul>
<li><a class='letter' id='letterV'>V</a>
</li>
<li><a class='letter' id='letterW'>W</a>
</li>
<li><a class='letter' id='letterX'>X</a>
</li>
<li><a class='letter' id='letterY'>Y</a>
</li>
<li><a class='letter' id='letterY'>Z</a>
</li>
</ul>
<!-- Submenu for letter A -->
<div class='submenuDiv' id='divA'>
<ul>
<li>
Abbotsford-Mission (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter B -->
<div class='submenuDiv' id='divB'>
<ul>
<li>
Barrie (Ont.)
</li>
<li>
Brantford (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter C -->
<div class='submenuDiv' id='divC'>
<ul>
<li>
Calgary (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter D -->
<div class='submenuDiv' id='divD'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter E -->
<div class='submenuDiv' id='divE'>
<ul>
<li>
Edmonton (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter F -->
<div class='submenuDiv' id='divF'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter G -->
<div class='submenuDiv' id='divG'>
<ul>
<li>
Greater Sudbury (Ont.)
</li>
<li>
Guelph (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter H -->
<div class='submenuDiv' id='divH'>
<ul>
<li>
Halifax (N.S.)
</li>
<li>
Hamilton (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter I -->
<div class='submenuDiv' id='divI'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter J -->
<div class='submenuDiv' id='divJ'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter K -->
<div class='submenuDiv' id='divK'>
<ul>
<li>
Kelowna (B.C.)
</li>
<li>
Kingston (Ont.)
</li>
<li>
Kitchener-Cambridge-Waterloo (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter L -->
<div class='submenuDiv' id='divL'>
<ul>
<li>
London (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter M -->
<div class='submenuDiv' id='divM'>
<ul>
<li>
Moncton (N.B.)
</li>
<li>
Montréal (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter N -->
<div class='submenuDiv' id='divN'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter O -->
<div class='submenuDiv' id='divO'>
<ul>
<li>
Oshawa (Ont.)
</li>
<li>
Ottawa-Gatineau (Ont.-Que.)
</li>
</ul>
</div>
<!-- Submenu for letter P -->
<div class='submenuDiv' id='divP'>
<ul>
<li>
Peterborough (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter Q -->
<div class='submenuDiv' id='divQ'>
<ul>
<li>
Québec (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter R -->
<div class='submenuDiv' id='divR'>
<ul>
<li>
Regina (Sask.)
</li>
</ul>
</div>
<!-- Submenu for letter S -->
<div class='submenuDiv' id='divS'>
<ul>
<li>
Saguenay (Que.)
</li>
<li>
Saint John (N.B.)
</li>
<li>
Saskatoon (Sask.)
</li>
<li>
Sherbrooke (Que.)
</li>
<li>
St. Catharines-Niagara (Ont.)
</li>
<li>
St. John's (N.L.)
</li>
</ul>
</div>
<!-- Submenu for letter T -->
<div class='submenuDiv' id='divT'>
<ul>
<li>
Thunder Bay (Ont.)
</li>
<li>
Toronto (Ont.)
</li>
<li>
Trois-Rivières (Que.)
</li>
</ul>
</div>
<!-- Submenu for letter U -->
<div class='submenuDiv' id='divU'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter V -->
<div class='submenuDiv' id='divV'>
<ul>
<li>
Vancouver (B.C.)
</li>
<li>
Victoria (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter W -->
<div class='submenuDiv' id='divW'>
<ul>
<li>
Windsor (Ont.)
</li>
<li>
Winnipeg (Man.)
</li>
</ul>
</div>
</body>
I was just wondering how I can style it so that 'D, F, I, J, N, U, X, Y, & Z' can be greyed out and unclickable. I was also just wondering how to get the grey background and when a letter it clicked, the background fills with white (like the M in the image). Any and all help is greatly appreciated!
Thank you!


Add this to your CSS
.noNav{
color:#aaa;
}
https://jsfiddle.net/jd3tgzme/2/
For the active LI: https://jsfiddle.net/jd3tgzme/3/
add in CSS:
.alphabetNav li.active{
background-color:#fafafa;
}
and in jQuery:
e.preventDefault();
$(".letter").closest("li").removeClass("active");
$(this).closest("li").addClass("active");


1- To make unclickable letters greyed out, you can use this CSS:
.noNav li {
cursor:default;
color:#ccc
}
2- To add a gray background to your navigation, you will need to set a height for your alphabetNav and a background like this:
.alphabetNav {
width:550px;
height:27px
}
3- To modify the style of the clicked element, you will need to add something like this in your click function:
$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');
4- To style the clicked element, you will need to add something like this in your css:
li.current {
background:#fff
}
5- To add rounded corner, you will need to use border-radiusin your css like this:
.alphabetNav li {
border-top-left-radius:5px;
border-top-right-radius:5px;
}
You can see your updated fiddle


https://jsfiddle.net/jd3tgzme/9/
.noNav {
background-color: #aaa;
}
.active {
background-color: white!important;
}
$("#letter"+letter).parent().addClass('clicked')
Here I do the following:
I changed the colour of .noNav class to grey
I added a class called .active that turns the parent element background (Li) white, you can change the colour to match your selected background (in this case white) of the content wrapper below the navbar, and voila it blends in.
I added border radius to the top corners of the li's of .alphabetNav to round the edges
Whats up to you:
Remove .active from previously clicked letter when a new one is clicked. Should be simple.
P.S: The "!important" after 'white' basically means that the browser should ignore any other setting that applies to the same object. (overriding)
Cheers!

Related

jquery menu with slide from left for sub menus

I wanted to slide sub menus from left or right if i click on li.menu-items for each item of a menu which have sub menus. here is my html markup
<ul class="menu">
<ul>
<li class="menu-item">
<a href="#">item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li><a href="">item 1</li></li>
<li><a href="">item 1</li></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>
</ul>
if I click on menu item which have sub-menu then the sub menu will open from slide left or right and other menu items should be hide and a back button should be there at top left to back on main menu
here is my js
$('.menu-item').click(function(e){
if ($('.sub-menu', this).length >=1) {
e.preventDefault();
}
$(this).siblings().find('> .sub-menu').hide();
$(this).find('> .sub-menu').slideLeft();
e.stopPropagation();
});
please help me for this

I don't think is there any function in jQuery like slideLeft as far as I know. although you can do it with jQuery UI with a little trick like this.
$(this).show("slide", { direction: "left" }, 1000);
but I will prefer a custom CSS example based on jQuery classes.
check below code example. if you need anything else. please let me know.
and yes you also did a small mistake: you are having a UL direct child of your Menu UL, Ul can only have LI as a direct child, Correct it and pls close all the tags properly.
$('.menu-item').click(function(e) {
if ($('.sub-menu', this).length >= 1) {
e.preventDefault();
}
debugger;
$(this).siblings().find('> .sub-menu').removeClass('open');
$(this).find('> .sub-menu').addClass("open");
e.stopPropagation();
});
$('.back').click(function(e){
$(this).closest('.sub-menu').removeClass('open');
e.stopPropagation();
})
.menu {
background: #cccccc;
position: relative;
}
* {padding :0; margin: 0; box-sizing: border-box;}
.sub-menu {
display: block;
position: absolute;
height: auto;
width: 100%;
left: -100%;
transition: all 0.5s;
top: 0%;
}
.sub-menu.open {
left: 0;
background: #666;
}
.back {cursor: pointer; margin-bottom: 20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li class="back">back</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>

My code is not jQuery but I hope it works for you.
var x = document.getElementsByClassName('menu');
var y = x[0].getElementsByTagName('a');
for (let i = 0; i < y.length; i++) {
y[i].addEventListener("click", function () {
var z = this.nextElementSibling;
if(z){
var s = z.getAttribute('style');
if(s === 'display:none;') {
z.setAttribute('style', 'display:block;')
} else {
z.setAttribute('style', 'display:none;')
}
}
});
}
<ul class="menu">
<ul>
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
<ul class="sub-menu">
<li class="menu-item">
item 4
</li>
<li class="menu-item">
item 5
</li>
</ul>
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
</ul>
</ul>

Only one bootstrap dropdown menu open at a time

I have a bootstrap navbar where the dropdowns open on hover. The problem is, when I click on one link to open the menu and then hover to another link, the initial one stays open. I need it so that only one dropdown menu can be open at a time. I don't mind a js solution.
Here's a bootply: http://www.bootply.com/TcskjKOWfA
/* CSS used here will be applied after bootstrap.css */
#main_navbar .navbar-nav {
margin: 0 auto;
display: table;
table-layout: auto;
float: none;
width: 100%;
}
#main_navbar .navbar-nav > li {
display: table-cell;
float: none;
text-align: center;
}
#main_navbar .dropdown-toggle:active,
#main_navbar .open .dropdown-toggle,
#main_navbar .dropdown-toggle:hover,
#main_navbar .open .dropdown-toggle {
background-color: #fff;
color: #000 !important;
font-weight: 600;
border-top: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
border-left: 1px solid #ccc !important;
border-bottom: 2px solid #fff !important;
z-index: 1005;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
background-color: #fff !important;
border-color: #ccc;
}
.nav .dropdown-menu {
padding: 20px;
top: 98%;
}
.dropdown-menu {
min-width: 230px;
}
.dropdown-header {
padding-left: 0 !important;
color: #000;
font-weight: 600;
font-size: 14px;
}
li + .dropdown-header {
padding-top: 20px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-4 {
min-width: 766px;
}
.multi-column-dropdown {
list-style: none;
padding-left: 15px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.7;
color: #000;
white-space: normal;
font-weight: 400;
font-size: 15px;
}
.dropdown-menu.multi-column {
padding-bottom: 20px;
}
#main_navbar .multi-column-dropdown a:hover {
opacity: 0.7;
}
#main_navbar .dropdown:hover .dropdown-menu {
display: block;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown">BRANDS
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a>
</li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a>
</li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a>
</li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a>
</li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a>
</li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a>
</li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a>
</li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a>
</li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a>
</li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a>
</li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a>
</li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a>
</li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a>
</li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a>
</li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a>
</li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a>
</li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a>
</li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a>
</li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a>
</li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a>
</li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a>
</li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a>
</li>
<li><a title="Michele" href="/brand/michele.html">Michele</a>
</li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a>
</li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a>
</li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a>
</li>
<li><a title="Oris" href="/brand/oris.html">Oris</a>
</li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a>
</li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a>
</li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a>
</li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a>
</li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a>
</li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a>
</li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a>
</li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a>
</li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a>
</li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown">MEN'S WATCHES
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All men's watches
</li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li>All men's sale
</li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li>Quartz
</li>
<li>Automatic
</li>
<li>Manual Wind
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown">WOMEN'S WATCHES
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All women's watches
</li>
<li class="dropdown-header">SHOP BY SALE</li>
<li>Women's watches on sale
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000
</li>
<li>$2,000 - $5,000
</li>
<li>$5,001 - $8,000
</li>
<li>$8,001 - $12,000
</li>
<li>$12,001 and up
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">POLICIES
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li>Returns and Exchanges
</li>
<li>Payment and Shipping
</li>
<li>Warranty and Repair
</li>
<li>International Ordering
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</ul>
</li>
<li>WATCH TRADE-IN
</li>
<!-- Policies Dropdown -->
<li>PREOWNED
</li>
<li>ADVANCED SEARCH
</li>
</ul>
</div>

Could You try this?
I removed <a href=""> in <li> tags
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown">
BRANDS
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a></li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a></li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a></li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a></li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a></li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a></li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a></li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a></li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a></li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a></li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a></li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a></li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a></li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a></li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a></li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a></li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a></li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a></li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a></li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a></li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a></li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a></li>
<li><a title="Michele" href="/brand/michele.html">Michele</a></li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a></li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a></li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a></li>
<li><a title="Oris" href="/brand/oris.html">Oris</a></li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a></li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a></li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a></li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a></li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a></li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a></li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a></li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a></li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a></li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown">
<a>MEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All men's watches</li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li>All men's sale</li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li>Quartz</li>
<li>Automatic</li>
<li>Manual Wind</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown">
<a>WOMEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li>All women's watches</li>
<li class="dropdown-header">SHOP BY SALE</li>
<li>Women's watches on sale</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li>under $2,000</li>
<li>$2,000 - $5,000</li>
<li>$5,001 - $8,000</li>
<li>$8,001 - $12,000</li>
<li>$12,001 and up</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a>POLICIES</a>
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li>Returns and Exchanges</li>
<li>Payment and Shipping</li>
<li>Warranty and Repair</li>
<li>International Ordering</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</ul>
</li>
<li>WATCH TRADE-IN</li>
<!-- Policies Dropdown -->
<li>PREOWNED</li>
<li>ADVANCED SEARCH</li>
</ul>

Zurb Foundation dropdown position to very first parent

In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:
Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:
I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!
This is a snippet of the default code from Foundation site
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li>Item 1A Loooong
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
</ul>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 1B
</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A
</li>
<li>Item 2B
</li>
</ul>
</li>
<li>Item 3
</li>
<li><a href='#'>Item 4</a>
</li>
</ul>
Here is a fiddle of the default: http://jsfiddle.net/65017wc2/

Here is a possible fix to do this :
.dropdown.menu {
top: 0!important;
}
.dropdown.menu {
position: relative;
}
.dropdown.menu li {
position: static !important;
}
.dropdown.menu ul {
margin-top: -1px;
}
I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.
See this fiddle

make child ul slide-down on page load

My HTML is like this
<div id="cssmenu">
<ul>
<li class="has-sub open ">
<a href="/rigging.aspx " > rig </a>
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>
on page load if any <li> has class open I want its child <ul> element to be slide down. I have written something like this
$(document).ready(function () {
if ($('#cssmenu li').hasClass('open')) {
$(this).children('ul').slideDown();
}
}
But its not working (slide down not happens) can any one point out what I am missing here?

This selects all ul children of li which have the class .open and applies slideDown.
$('#cssmenu li.open > ul').slideDown();
$('li.has-sub > ul').slideDown();
.has-sub > ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>

jQuery how to selected the current list item in a nested list then hide all others

I have a menu that has 3 list options. Inside each of these list options there is another unordered list that has 2 list options inside.
Inside the unordered list with two options the first list item is an image and the second is a link.
When the user clicks one of the links, I want that current whole group(consisting of the image and the link) to stay showing while the other 2 menu options disappear.
I am having trouble coming up with the right selection.
$('.menu ul>li>ul>li:last-child>a').click(function() {
var currentLink = $(this);
var currentGroup = $(this).closest('li').closest('li');
$('.menu ul>li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link One</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Two</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Three</li>
</ul>
</li>
</ul>
</div>

The problem is $('.menu ul>li') which selects all li including the second level one's.
So try
$('.menu ul ul li:last-child > a').click(function() {
var currentGroup = $(this).closest('.menu > ul > li');
$('.menu > ul > li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link One
</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Two
</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Three
</li>
</ul>
</li>
</ul>
</div>

Categories

Resources