how can one add a dropdown caret to the account link in the html code below
.
.
.
<nav>
<ul id="menu">
<li class="home"><a href= "home.html" class="menu" ><h3>Home</h3></a></li>
<li class="news"><h3>News</h3></li>
<li class="account"><h3>Account</h3></li>
</ul>
</nav>
There are many ways to do this. Here is a way using only CSS and the ::after psuedo element.
.dropdown-toggle {
display: flex;
align-items: center;
}
.dropdown-toggle::after {
content: "⬇️";
margin-left: 10px;
}
<nav>
<ul id="menu">
<li class="home"><a href="home.html" class="menu">
<h3>Home</h3>
</a></li>
<li class="news"><a href="news.html" class="menu" target="_blank">
<h3>News</h3>
</a></li>
<li class="account"><a href="#" class="menu dropdown-toggle" target="_blank" data-toggle="dropdown">
<h3>Account</h3>
</a></li>
</ul>
</nav>
Related
i have the followwing structure in my html code:
<ul id="urlcss">
<li class="nav-submenu">
<a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
ADMIN
</a>
<div class="collapse" id="submenu0" aria-expanded="false">
// Some menus check the image below
</div>
</li>
</ul>
And if you see that on browser, it looks like this:
With the menu collapse show, like this:
Ok what i want to do is, when a user press the li with nav-submenu class i want to show an arrow indicating that the collapse menu below belong to that li, and change the background color, i tried with css but nothing happens, here is an example of what i want (Look the arrow):
I tried doing this piece of code to place something like a holder but i doesn't work:
.nav-submenu[data-toggle].collapsed:after {
content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
content: " ▴";
}
This is using BootStrap 5 Nav Using Dropdowns
With very little css you can achieve what you are looking for.
.nav-link.dropdown-toggle:after {
transform: rotateX(-180deg);
transition: transform 500ms;
}
.nav-link.dropdown-toggle.show:after {
transform: rotateX(0deg);
}
.nav .nav-item:hover{
transition: background-color 500ms
}
.nav .nav-item:hover{
background-color: lightblue;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
I've created for you a small example. Also is used a small js code to toggle default class name.
const menus = document.querySelectorAll('[data-toggle="collapse"]')
for (const menu of menus) {
menu.addEventListener('click', function(event) {
this.classList.toggle('collapsed');
})
}
.nav-submenu a.collapsed:after {
content: " ▾";
}
.nav-submenu a:not(.collapsed):after {
content: " ▴";
}
.nav-submenu a:not(.collapsed)+div {
display:none;
}
<ul id="urlcss">
<li class="nav-submenu">
<a class="" href="#" data-toggle="collapse">
ADMIN
</a>
<div>
// Some menus check the image below
</div>
</li>
</ul>
This is my first time writing a JS function. I am trying to get the navigation bar to open when the hamburger is clicked but it's not working. I have attached my HTML and JS.
It works when I don't allow the function to have any parameter and instead manually write "nav" where nav_type is, so I'm not sure why it's not working.
The code:
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction(nav_type) {
var i;
var x;
for (i = 1; i < 6; i++) {
x = document.getElementById(nav_type + i);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
<nav aria-label="Main Navigation" class="topnav">
<a aria-hidden="true" href="javascript:void(0);" ; class="menu show-mobile" onclick="myFunction(" nav ")">
<img src="img/menu-icon.svg" alt="toggle menu" />
</a>
<ul class="topnav">
<li>Home</li>
<li>Humans</li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction(" drp ")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li>Presentations</li>
<li>About Islam</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</nav>
You are using multiple quotations marks together, the parser is considering the first pair of quotation mark to me the value of the onload attribute, which is "myFunction(" and the rest are considered gibberish.
Use double quotations (") and single quotations (') together to avoid this error
onclick="myFunction('nav')">
Similarly
onclick="myFunction(" drp ")"
Just use HTMLElement.classList.toggle(class)
document.querySelector('#navShow').addEventListener('click', () => {
document.querySelector('ul.topnav').classList.toggle('show');
});
ul.topnav {
display: none;
}
ul.topnav.show {
display: block;
}
<nav aria-label="Main Navigation" class="topnav">
<a id="navShow" aria-hidden="true" href="#"; class="menu show-mobile">
Menu
</a>
<ul class="topnav">
<li>Home</li>
<li>Humans</li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li>Presentations</li>
<li>About Islam</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</nav>
For a more modern approach dispose of Javascript for the function altogether.
Here we use a label and a hidden checkbox combined with CSS to control our menu show/hide.
#chkNav {
display: none;
}
.nav-bar {
display: block;
width: 30px;
height: 0px;
margin-bottom: 2px;
border: 3px solid black;
}
ul.topnav {
display: none;
}
#chkNav:checked + ul.topnav {
display: block;
}
<nav aria-label="Main Navigation" class="topnav">
<label for="chkNav" aria-label="show nav">
<span class="nav-bar"></span>
<span class="nav-bar"></span>
<span class="nav-bar"></span>
</label>
<input type="checkbox" id="chkNav" />
<ul class="topnav">
<li>Home</li>
<li>Humans</li>
<li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
</a></li>
<li class="dropdown" id="nav3">
<button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
<img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
</button>
<ul class="topnav dropdown-content">
<li>Presentations</li>
<li>About Islam</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</nav>
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>
I need to find all the anchor tags till parent of a specific element. Example is here-
<li id="li4">
<a id="ancHideShow4" onclick="hide('4');" href="#" style="font-weight:bold;">SECURITY</a>
<ul id="ul4" style="display: block; margin-left: -20px; list-style: none;">
<img onclick="hide('5');" id="img5" src="../../images/asd.gif" class="Hover">
<li id="li5">
<a id="ancHideShow5" onclick="hideshow('5');" href="#" style="">GROUP</a>
<ul id="ul5" style="">
<div class="QWER"></div>
<li id="leafli6">
<a id="ancRedirect312" onclick="Redirect('#')" href="#"><span>XYZ</span></a>
</li>
</ul>
</li>
</ul>
</li>
So, If I click --> "ancRedirect312"
These IDs should be found --> ancRedirect5, ancRedirect4
help me out !!
You can find all the parent li elements then its a child like
$('a').click(function() {
var ids = $(this).closest('li').parents('li').children('a').map(function() {
return this.id
}).get();
alert(ids)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li id="li4">
<a id="ancHideShow4" onclick="hide('4');" href="#" style="font-weight:bold;">SECURITY</a>
<ul id="ul4" style="display: block; margin-left: -20px; list-style: none;">
<img onclick="hide('5');" id="img5" src="../../images/asd.gif" class="Hover" />
<li id="li5">
<a id="ancHideShow5" onclick="hideshow('5');" href="#" style="">GROUP</a>
<ul id="ul5" style="">
<div class="QWER"></div>
<li id="leafli6">
<a id="ancRedirect312" onclick="Redirect('#')" href="#"><span>XYZ</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
The animation of the drop down menu gets stuck while it is supposed to create a slide effect animation
JSFiddle link: http://jsfiddle.net/uqcLn/73/
This is the css that may have caused the problem but it is necessary to my code
(it makes the bottom div's of my site stationary) so it cannot be changed.
#nav ul ul {
display: none;
z-index: 1000;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
}
With this your code is already more valid
<div id="top_menu">
<div id="logo"><img src="images/logo.png"></div>
<div id="nav">
<ul>
<li class="links_wrapper">ABOUT US
<ul class="dropdown">
<li>About us</li>
<li>Our Vision</li>
<li>Our Technology</li>
<li>Our Customers</li>
</ul></li>
<li class="links_wrapper">SOLUTIONS
<ul class="dropdown">
<li> Solutions</li>
<li>General Descreption</li>
<li>Detailed Descreption</li>
</ul></li>
<li class="links_wrapper">CUSTOMERS
<ul class="dropdown">
<li> Solutions</li>
<li>General Descreption</li>
<li>Detailed Descreption</li>
</ul></li>
<li class="links_wrapper">CONTACT US
<ul class="dropdown">
<li>Solutions</li>
<li>General Descreption</li>
<li> Descreption</li>
</ul></li>
</ul>
<div id="login">LOGIN</div>
<div id="lang_btn">He En
</div><!--close nav-->
</div><!--top menu-->
You should from time to time test your code inside W3C's validator
http://validator.w3.org/