nested menu issue [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

dcmk

14 Sep 2009, 02:48 PM

Hi all, new here. I am currently learning and have a pretty good knowledge of html and asp, php, jsp etc but when it comes to javascript and css.. i am not afraid to admit completely out of my element.

I tried to do a nested table which works.. but there is whitespace where the 'bullet point' would be. and i can't make them side by side.. i cant explain it well.. so will link and you can see my delima.

http://www.bath-depot.co.uk/TEST.ASP

CSS

<style type="text/css">

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

HTML

<script type="text/javascript">

var menuids=["sidebarmenu1"]

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
<LINK HREF='assets/styles/BB4menu.css' REL='stylesheet' TYPE='text/css'>
</HEAD>
<BODY>

<table width="15%" cellspacing="0" cellpadding="0"><td>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Accessories</a></li>
<li><a href="#">Basins</a></li>
<li><a href="#">Baths</a>
<ul>
<li><a href="#">Common Baths</a></li>
<li><a href="#">Whirlpool Baths</a></li>
</ul>
<li><a href="#">Mirrors</a></li>
<li><a href="#">Showers</a>
<ul>
<li><a href="#">Enclosures</a></li>
<li><a href="#">Screens</a></li>
<li><a href="#">Steam</a>
</ul>
</li>
<li><a href="#">Taps and Trays</a>
<ul>
<li><a href="#">Bath Taps</a></li>
<li><a href="#">Mira Shower Trays</a></li>
<li><a href="#">Monobloc Taps</a>
<ul>
<li><a href="#">Work??</a></li>
</ul>
<li><a href="#">Towel Rails</a></li>
</ul>
<li><a href="#">Vanity Units</a>
<ul><li><a href="#">Single</a></li>
<li><a href="#">Double</a></li>
</ul>
</li>

<li><a href="#">WC's</a></li>
</li>
</ul>
</div>
</td>
</table>
</HTML>

Please if anyone can shed some light and what was wrong would be eternally grateful. thank you

djlebarron

14 Sep 2009, 11:03 PM

I'm just guessing because that's more js than I want to follow.

In your:

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

If you add left: 170px; or left: 100%, it might rope them in.
I'd also try putting list-style: none; on everything in sight.
You can also do the above with just .sidebarmenu ul ul { Your style }

No... wait a minute... There's no way that the .sidebarmenu ul is showing up @ 180px when it's displayed on the page! Though, I think that the ul ul li's are probably starting 180px from the left side of the ul (where I think you meant them to be). That should give you food for thought.
Give your 'ul li a' the width: 164px; and see if it forces the ul (via the more purportioned ul li a "links") to meet the left edge of the ul ul. If it ends up short give it a couple more px. I'm taking into account your 8px padding all round on the ul li a's. Then if your ul li' a's aren't the same width as your ul ul li a's, and/or don't meet them, right side touching left side, do some more appropriate adjustments from there.

Oh. I just opened it in a full browser window. Your ul ul li's (except for the first one "popped") are hiding underneath the ul. Your ul li a's expand or contract (width) when I expand or contract the window. IE7 here. Like I said, I'm just guessing. Try the left: 100% referenced above and try giving your ul ul a higher z-index. I imagine your js is the cause of the flexing ul width. It amost seems like you somehow have the width of the ul set to vary purportionately to the browser window width.