I have trouble trying to figure out the dropdown for my list.It is similar to ul li:hover ul li.What im trying to figure out is like ul li:focus ul li but in jquery since i dont think doing it in css works.The goal im trying to get at is when i click on the ul li the ul li drops down.
Html
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>
jquery
$(".navbar-tab-1").focus(function(){
$(".hoverlist li").css("display","block").fadeOut();
});
You have several issues in your code:
focus do not work with the ul element. You can use hover for that.
You need to change your class selector to .hover-list instead of .hoverlist
You should initially set display:none to all .hover-list elements so that when you hover over the ul they are displayed.
Use fadeIn() to show them in fade in effect.
You can use cursor: pointer; css for you ul elements to have a proper cursor pointer for the links
$(".navbar-tab-1").hover(function(){
$('.hover-list').css("display","none");
$(this).find(".hover-list").css("display","block").fadeIn();
});
.hover-list{
display: none;
}
.navbar-tab-1{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>
If you also want to hide the li items when mouse is not hovering over the ul then you can use the mouseover and mouseout event instead of hover:
$(".navbar-tab-1").mouseover(function(){
$('.hover-list').css("display","none");
$(this).find(".hover-list").css("display","block").fadeIn();
});
$(".navbar-tab-1").mouseout(function(){
$('.hover-list').css("display","none");
});
.hover-list{
display: none;
}
.navbar-tab-1{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>
Related
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>
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>
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>
Is it possible on JS to remove a label of a menu? I want to remove the text on the anchor menu without changing anything on the html. In replace of removing the menu I will add a new label via CSS using pseudo element before.
HTML:
<div class="navlink">
<ul>
<li class="page_item page-item-2 current_page_item active">About</li>
<li class="page_item page-item-6">Skills</li>
<li class="page_item page-item-4">Project</li>
<li class="page_item page-item-8">Contact</li>
</ul>
</div>
CSS:
.navlink li a:before { content:'1'; }
I think using CSS can achieve this. Fiddle
Using CSS only.
HTML:
<div class="navlink">
<ul>
<li class="page_item page-item-2 current_page_item active">About</li>
<li class="page_item page-item-6">Skills</li>
<li class="page_item page-item-4">Project</li>
<li class="page_item page-item-8">Contact</li>
</ul>
</div>
CSS:
.navlink li a:before { content:'1'; visibility: visible; }
.navlink li a { content: ''; visibility: hidden; }
FIDDLE
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/