Hello everyone,
I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called ‘pMenuMain’. The second and third have names ‘pMenu2’ and ‘pMenu3’. The 4th level is found by its <a> tags, because all of those are links.
This is the JavaScript I need to change somehow:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 1000;
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()
{ $('.pMenu2').hover(jsddm_open, jsddm_timer)
$('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});
document.onclick = jsddm_close;
</script>
Now this is the CSS style sheet:
/********************/
/*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;
visibility:hidden;
}
.pMenu2:hover{
background:#999;
border:.25em inset #666;
text-decoration:blink;
}
/*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*/
/*****************/
This is how it’s set up in HTML:
<!-- begin Personal navigation menu -->
<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>
<ul class="pMenu">
<li style="width:14%;"><div class="pMenuMain">insurance</div>
<ul>
<li><div class="pMenu2">property insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">auto insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">health insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">annuities</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:11.3%;"><div class="pMenuMain">general</div>
<ul>
<li><div class="pMenu2">electronics</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">style & fashion</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">food/dining</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">cars/auto</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">dating</div>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:13.8%;"><div class="pMenuMain">education</div>
<ul>
<li><div class="pMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</div>
<!-- end Personal navigation menu-->
I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href=“#”> can be clicked, resetting the menu. This is a flaw in functionality.