?
Solved

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

Posted on 2016-11-14
9
Medium Priority
?
72 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 83

Accepted Solution

by:
leakim971 earned 2000 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 83

Expert Comment

by:leakim971
ID: 41886816
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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 83

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 83

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month15 days, 15 hours left to enroll

850 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