Hello everyone, 
I’m trying to learn about this function’s job line-by-line
function jsddm_open()
{ jsddm_canceltimer(); //this is another function in my code - why is it here?
jsddm_close(); //this is another function in my code - why is it here?
ddmenuitem = $(this).find('ul').css('visibility', 'visible');} //what does this selector actually mean?
It calls 2 other functions (code not included), then sets a variable (ddmenuitem, presumably defined elsewhere) to the dom id of a <ul> with the visibility style set to visible.
Yes, that is where I got this JavaScript from, Paul. Thank you for the reply, Speda1.
The problem I see now is that none of my hidden sub lists have a visibility style set to visible, which makes me question the jsddm_open function because showing a list that already has a visibility style set to visible is pointless, so I’m unclear still as to how this code works.
Look at the example at the jQuery simple drop down menu page. When you hover over example menu, the red dropdown entries appear.
What the script is doing is changing the visibility of those dropdowns. When the mouse moves away, the visibility is set to hidden. The dropdowns are still there in place in the DOM, they’re just not visible for you to see.
When your mouse moves to the appropriate menu link, the script sets the appropriate dropdown section to visible.
After studying in-depth the linked material in this thread, I have a full understanding of the basic concepts. I did my html a different way, and I think I want to use the custom classes I have defined in my CSS, which are called pMenuMain, pMenu2, pMenu3, and they are placed in the div tags inside the <li> tags. I like this way because the user can’t click a non-link and reset the menu.
This is what the HTML looks like:
<div class="pWrapper">
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">health</div>
<ul style="left:18em;">
<li><div class="pMenu2">weight loss</div>
<ul>
<li><div class="pMenu3">fitness</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu3">dieting</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
<li><div class="pMenu2">skin care</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
This is the CSS associated with the menu:
/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
padding-bottom:53%;
padding-left:21%;
}
.pMenu {
margin:0;
padding:0;
list-style:none;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul ul li{
width:100%;
display:inline-block;
}
/*begin main list attributes*/
ul.pMenu > li:hover{
background:#F00;
border:.33em ridge #C90;
color:#FF0;
}
ul.pMenu > li{
float:left;
list-style:none;
margin-right:1%;
display:block;
color:#FFF;
background:#900;
border:.33em ridge #C30;
text-decoration:none;
}
.pMenuMain{
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-top:.7em;
padding-bottom:.7em;
text-align:center;
}
/*first sub-list*/
ul.pMenu li li{
margin-right:0;
}
ul.pMenu ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
.pMenu2{
background:#CCC;
border:.25em outset #999;
width:10em;
font-size:12px;
padding-top:.5em;
padding-bottom:.5em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
}
.pMenu2:hover{
background:#999;
border:.25em inset #666;
text-decoration:blink;
}
ul.pMenu ul li a{
background:#CCC;
border:.25em outset #999;
width:10em;
font-size:12px;
padding-top:.5em;
padding-bottom:.5em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
}
/*second sub-list*/
ul.pMenu ul ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
display:none;
}
.pMenu3{
background:#999;
border:.25em outset #666;
width:13em;
font-size:11px;
padding-top:.35em;
padding-bottom:.35em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
visibility:hidden;
}
ul.pMenu ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:.15em outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul a:hover {
background:#999;
border:.15em inset #666;
text-decoration:blink;
}
/*third sub-list*/
ul.pMenu ul ul ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu ul ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul li a:hover {
background:#999;
border:1% inset #666;
text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/
With that said, the original JavaScript at jQuery Drop Down Menu would need to be changed from:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
to a hypothesis of the solution highlighted in red:
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
[COLOR="Red"]if {pMenuMain:hover} [COLOR="SeaGreen"]//how can I use JavaScript to detect if pMenuMain, pMenu2, and pMenu3 are being hovered by the mouse?[/COLOR]
{
[COLOR="SeaGreen"]
//need to test at the top level if the dating or education lists are the ones being hovered[/COLOR]
if {list is dating or education}
ddmenuitem = $(this).find('ul.pMenu ul li a').css('visibility', 'visible');
else
ddmenuitem = $(this).find('ul.pMenu ul').css('visibility', 'visible');
}
else if {pMenu2:hover}
ddmenuitem = $(this).find('ul.pMenu ul ul').css('visibility', 'visible');
else {pMenu3:hover}
ddmenuitem = $(this).find('ul.pMenu ul ul ul').css('visibility', 'visible');[/COLOR]
}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
[COLOR="SeaGreen"]//changed the bind() function to hover() function
$(document).ready(function()
[COLOR="Red"]{ $('.pMenu > li').hover(jsddm_open, jsddm_timer)
$('.pMenu li > li').hover(jsddm_open, jsddm_timer)
$('.pMenu li li > li').hover(jsddm_open, jsddm_timer});[/COLOR]
document.onclick = jsddm_close;
I’m sure there’s a laundry list of a syntax errors, but I’m just beginning my path to JavaScript success.
You would use an event-driven technique, where you assign function handlers to the hover event of each menu. See: hover
Yeah I understand the function handlers on the last line, but I would need to write a few line of code that evaluates to true or false if the menu is being hovered because of doing the menu differently, right?
Let’s look at that first if statement:
if {pMenuMain:hover} //how can I use JavaScript to detect if pMenuMain, pMenu2, and pMenu3 are being hovered by the mouse?
{
You can use a jQuery selector to assign the hover functions to all those at the same time:
$('.pMenuMain, .pMenu2, .pMenu3').hover(function () {
// do stuff with the individual element that is hovered over
}, function () {
// stop doing stuff when the individual element is not being hovered over
});