Oh Grief! Menus!

[SuzanneB]

I have a site that has a menu system:

'<div class="menu"><h5 class="menu_hd">Help<br>Topics</h5><ul>';
if ($SSubCategory == 'Cancellations'){
echo '<li class="down">Cancellations</li>';
} else {
echo '<li><a href="help_cancellations.php">Cancellations</a></li>';
}
if ($SSubCategory == 'Contact Us'){
echo '<li class="down">Contact Us</li>';
} else {
echo '<li><a href="help_contact_us.php">Contact Us</a></li>';
}
if ($SSubCategory == 'Dispatch Times'){
echo '<li class="down">Dispatch Times</li>';
} else {
echo '<li><a href="help_dispatch_times.php">Dispatch Times</a></li>';
}
'</ul></div>';

.menu{ font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#363636; width:144px;
color:#CCCCCC; padding:4px 0 0 0; margin: 0 0 4px 0;}
.menu_hd{margin:0 0 12px 5px; font-size:1em;}
.menu ul {margin: 0; padding:0;list-style-type:none;}
.menu li a{display: block; padding: 1px 0px 1px 5px; width:139px; text-decoration: none;background-color:#D0D0D0;
color:#504040;}
.menu li a:hover {background-color: #990000; color: #FFFFFF; }
.down {display: block; padding: 1px 0px 1px 5px; width:139px; background-color: #990000; color: #FFFFFF; cursor: pointer;}
.sub_hd{margin:0 0 4px 5px; font-size:1em; color:#FFFFFF;}

To be completely honest, I never really understood what was going on with all this menu stuff. But now I need to modify the code for drop down sub-menus, and I haven't got the time to experiment and read-up. I just need a solution. I had a quick look on the web and got even more confused. Anyone help with some pointers?

[ray326]

What is that? PHP?

[Centauri]

Looks like php, and it looks to be only writing a link within the menu if there is no sub-category associated with it. Probably part of a javascript-driven menu system that uses separate divs for the dropdowns.

The best way of implementing drop down menu is the suckerfish method (http://www.htmldog.com/articles/suckerfish/), but would really need to see the current system on the current site to make any suggestions about implementing this.

[SuzanneB]

Yes, you are right. The normal code would be:

<div class="menu">
<h5 class="menu_hd">Help<br>Topics</h5>
<ul>
<li><a href="help_cancellations.php">Cancellations</a></li>
<li><a href="help_contact_us.php">Contact Us</a></li>
<li><a href="help_dispatch_times.php">Dispatch Times</a></li>
</ul>
</div>

[SuzanneB]

I have dumped it on to another web site so you can see. There is some CSS missing, so it's not perfect, but it is perfectly good enough to show you what it's like.

http://www.fazackerley.co.uk/temp/index.htm

[Centauri]

Adding dropdowns to this isn't all that difficult. As far as the html goes, all that is needed here is to nest an extra unordered list within the relevent <li>s of the main list. As will be evident shortly, it would be best if the surrounding div had an id of "menu" rather than the class name. An example of the html required could be :<div id="menu">
<h5>Help<br>Topics</h5>
<ul>
<li><a href="help_cancellations.php">Cancellations</a>
<ul>
<li><a href="#">topic 1</a></li>
<li><a href="#">topic 2</a></li>
<li><a href="#">topic 3</a></li>
</ul>
</li>
<li><a href="help_contact_us.php">Contact Us</a>
<ul>
<li><a href="#">Manager</a></li>
<li><a href="#">Secretary</a></li>
<li><a href="#">Foreman</a></li>
<li><a href="#">Accountant</a></li>
<li><a href="#">Technician</a></li>
<li><a href="#">Labourer</a></li>
<li><a href="#">Floor Sweeper</a></li>
</ul>
</li>
<li><a href="help_dispatch_times.php">Dispatch Times</a>
<ul>
<li><a href="#">Week days</a></li>
<li><a href="#">Weekends</a></li>
</ul>
</li>
</ul>
</div>
The additional nested lists I have highlighted in blue.

As the nested lists are contained within the main <li>s, the hover function to show them must operate on the <li>s and not the <a> elements. Basically, the process is to position the submenu <ul>s absolutely but referenced to the parent <li>s (so therefore the <li>s get a relative position), and have them initially positioned way off to the left of the screen until the <li>s are hovered, wherupon the submenu is positioned back into view. The css to operate the above could be :#menu {
font-size: 10pt;
font-weight:bold;
border:1px solid #666666;
background-color:#363636;
color:#CCCCCC;
padding:4px 0 0 0;
margin: 0 0 4px 0;
width: 144px;
}
#menu h5 {
margin:0 0 12px 5px;
font-size:1em;
}
#menu ul {
margin: 0;
padding:0;
list-style-type:none;
}
#menu li {
position: relative;
}
* html #menu li {
float: left;
}
#menu a {
display: block;
padding: 1px 0px 1px 5px;
width:139px;
text-decoration: none;
background-color:#D0D0D0;
color:#504040;
}
#menu li:hover li a, #menu li.sfhover li a {
background-color: #D0D0D0;
color: #504040;
}
#menu li:hover a, #menu li.sfhover a,
#menu li li:hover a, #menu li li.sfhover a {
background-color: #990000;
color: #FFFFFF;
}
#menu ul ul {
position: absolute;
top: -1px;
left: -999em;
border: 1px solid #666666;
}
#menu li:hover ul, #menu li.sfhover ul {
left: 139px;
z-index: 100;
}
Not much difference in the top level styling apart from the id instead of the class, referencing the h5 via the #menu id instead of using a separate class name, and the relative position on the <li>s. The * html #menu li rule targets IE6 and floats the <li>s to get around a bug that it has that introduces additional spacing. The submenus (#menu ul ul) are positioned absolute off the left of the screen with the negative 999em left value, and positioned at 139px left on hover of the <li>. The rollover effect on the link is done via the <li> hover now so that the parent link will remain highlighted while the submenu is being hovered.

Of course, this won't work directly in IE6 as it does not recognise hover on anything other than links. To get around that, we use a modified suckerfish javascript. This code is saved as "sfhover.js" :sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);and linked to the html file using <script type="text/javascript" src="sfhover.js"></script> in the <head> section. This script dynamically applies a class name of "sfhover" to the <li>s when thay are hovered, hence the reference to that class name in the css.

[SuzanneB]

Ha! That's brilliant. I can't thank you enough. Basically it is all working! All I need to do is fidgit around a little to adjust the cosmetics, and it will all be running in a matter of days; rather than me spending half the rest of my life experimenting. Once again, many thanks.

[SuzanneB]

oops ( post deleted. Posted same twice)

[SuzanneB]

Oh, I have a question, I will post a new thread for it though, or you might not see that I have posted the question at all.