Solved

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

Posted on 2016-11-14
9
48 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

820 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