Solved

Open an ul or div with hover on a li,how?

Posted on 2016-11-14
9
35 Views
Last Modified: 2016-11-15
Hello;

I have created a menu bar as you see its,and the codes on this address:

http://jsfiddle.net/jamshidi/6DEv9/173/

Now i want that when hover on an li ,e.g 'Health' then a box open below it which its width be as long as (<div class="navcontainer">) and i could write the submenu for it,so need your help.
Thanks
0
Comment
Question by:MOSTAGHASSI
  • 4
  • 3
  • 2
9 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 41886780
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41886812
jQuery :
jQuery(function($) {
	$(".navcontainer ul li").hover(function() {
  	$(".navcontainer_sub").stop().slideDown("fast");
  }, function() {
  	$(".navcontainer_sub").stop().slideUp("fast");
  })
})

Open in new window

CSS :
.navcontainer_sub {
  height: 64px;
  background-color:black;
  display:none;
}

Open in new window

HTMl :
 <div class="navcontainer_sub"></div>

Open in new window

1
 
LVL 82

Expert Comment

by:leakim971
ID: 41886816
0
 

Author Comment

by:MOSTAGHASSI
ID: 41886943
Hi leakim971,thanks,this is exactly what i want ,but please let me know that how can keep down the (<div class="navcontainer_sub"></div>) while mouse is over it ,because i will put the submenu inside the div and user must access the links inside div .
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:MOSTAGHASSI
ID: 41887006
I solved it by adding this jquery to it:

jQuery(function($) {
	$(".navcontainer_sub").hover(function() {
  	$(".navcontainer_sub").stop().slideDown("slow");
  }, function() {
  	$(".navcontainer_sub").stop().slideUp("slow");
  })
})

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 41887025
https://api.jquery.com/hover/
https://api.jquery.com/mouseover/
https://api.jquery.com/mouseout/

jQuery(function($) {
   $(".navcontainer_sub").mouseover(function() {
  	$(".navcontainer_sub").stop().slideDown("slow");
  });
  // here to close when the user click on an element inside navcontainer_sub
  // for example a link : <a hef="/somewhere/somepage.html" class=".menuItem">SOME PAGE</a>
  $(".menuItem", ".navcontainer_sub"), function(evt) {
        evt.preventDefault(); // remove this line if you really want your link redirect the user to the href value
  	$(".navcontainer_sub").stop().slideUp("slow");
  });
})

Open in new window

0
 

Author Comment

by:MOSTAGHASSI
ID: 41887390
thanks,but on line 10 of your last post i have error:

expected an assignment or function call and instead saw an expression
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41887795
there's a typo line 7 :
replace :
$(".menuItem", ".navcontainer_sub"), function(evt) {
by :
$(".menuItem", ".navcontainer_sub").on("click", function(evt) {
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41888051
I cannot understand how it is better.
ul li ul {display:none; position:absolute; top:45px; left:0; }  
ul li:hover ul{display:block;}

Open in new window

Done. No typos, easy to manage.
Of cause, you can add some fancy staff.
I would use jQuery to add class to an element but not to change inline style, in this case.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now