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/
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>
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>
I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?
See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>
if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
I have created a menu, what I am trying to achieve here is a full width sub menu whcig pushes the content on click and shows the submenu. I have a problem craeting full width sub menu and also when i click the previous menu content still shows up. here is my fiddle : http://jsfiddle.net/he4a0eL4/1/
HTML
<div id="wrapper">
<ul id="nav">
<li>link1
<div class="sub">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</li>
<li>link2
<ul class="sub">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>link3
<ul class="sub">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">content</div>
CSS
body{margin:0;}
#wrapper{background:#ccc;}
ul{
margin:0;
padding:0;
list-style:none;
}
#nav > li
{
float:left;
position:relative;
}
.sub
{
display:none;
widh:100%;
}
.clear
{
clear:both;
}
.content
{
height:300px;
background:#ff0000;
width:100%;
}
JS
$(document).ready(function() {
$("#nav > li", this).click(function() {
$(this).find(".sub").slideToggle();
});
});
Sorry, maybe I'm misunderstanding your problem.
When you want full width sub menu, you just have to set the CSS property width:100%;, or don't you? Is this what you expected?
<div id="wrapper">
<ul id="nav">
<li>link1
<div class="sub">
<ul style="float:left;width:100%;">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
<ul style="float:left;width:100%;">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</li>
<li>link2
<ul class="sub">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>link3
<ul class="sub">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">content</div>
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>