PDA

View Full Version : Best Compliant, Cross Browser Drop Down Menu



TheShaner
Mar 6th, 2008, 03:50 PM
I'm sure this has been asked before, but I cannot seem to find the thread, so I'm asking again. Also, the reason for the post here is that this post in HTML & CSS may get lost and/or elicit lots of answers from new coders. If an admin feels this should be moved, go right ahead and I apologize.

What drop down menu do you feel is the best to use? I'm looking for XHTML1.1 compliant, cross-browser functionality, and a nice degradation. I've come across a few, like ALA's Suckerfish and our very own BrotherCake's UDM. Also, I'm not really looking for a multiple level drop down. I think a single level drop down will work just fine for my purpose, so i think that effects the result of this "poll" here.

Thanks a lot,

Shane

_Aerospace_Eng_
Mar 6th, 2008, 09:27 PM
If it gets lost then bump it. We are like everyone else on the forum, we post in the right place. No special treatment. I prefer the suckerfish dropdowns. What is wrong with those? There are also the drop downs at cssplay.co.uk http://www.cssplay.co.uk/menus/ but they use IE conditional comments and tables to work.

TheShaner
Mar 6th, 2008, 10:39 PM
If it gets lost then bump it. We are like everyone else on the forum, we post in the right place. No special treatment.
First, I don't like to bump threads as it tends to draw negative attention. Second, I wasn't implying anyone else is more special. I was just looking for quality responses from the more senior members of this forum in what is more of a poll rather than HTML, CSS, or JS help. As I mentioned, if this should be moved, closed, etc., then I apologize and a mod should move it. Thanks for the lecture though :rolleyes:

I prefer the suckerfish dropdowns. What is wrong with those?
I never said there was anything wrong. I'm looking for preference, pros and cons, and comparisons of what options are available to me and what the members here feel are the most reliable and compliant.

There are also the drop downs at cssplay.co.uk http://www.cssplay.co.uk/menus/ but they use IE conditional comments and tables to work.
I saw those, but didn't want to use the tables to markup my menu. I have no problem with IE conditional comments. In fact, I opted for an IE conditional when implementing the Suckerfish drop down rather than the suggested, quick and dirty JS markup.

Anyway, since I needed to get this drop down done today, I went ahead and used the Suckerfish DD. Markup is nice and clean and validates in XHTML1.1 and the DOM used to add the onmouseover and onmouseout events for IE6 and below was nice and compact.

-Shane

Brandoe85
Mar 6th, 2008, 11:07 PM
Thanks for the lecture though :rolleyes:


haha, nice! :D

There is no issue posting it here, but if you would have posted it in the HTML/CSS i'm sure you would have gained 200 rep points and 129 thank you's because somehow you would have magically fixed someone's problem ;)

Aradon
Mar 6th, 2008, 11:21 PM
Now I'm personally not a "web" guy, to say the least, but when I build my drop down menus I use select!



<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>


From what I hear it's cross client compatable.

Did I mention I don't make webpages? :D

Brandoe85
Mar 6th, 2008, 11:23 PM
bleh, they aren't drop downs, they are combo boxes!

Aradon
Mar 6th, 2008, 11:31 PM
Not according to google!

I'm Feeling Lucky (http://www.echoecho.com/htmlforms11.htm)

WA
Mar 7th, 2008, 08:49 AM
Thread moved btw. :)

Basscyst
Mar 7th, 2008, 07:49 PM
I wouldn't call this the best, but it's what I use and have never had a problem. Sometimes I need a conditional comment to position it properly in IE 6 other than that though it's great. Feel free to use it. It could be a little more condensed but I made it without having to declare any classes or ID's other than the div, top_nav. Oh and the pixel declaration on the font, I should change that, left over from my old boss and his demands. heh.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Los Rios Community College District</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#top_nav {
font-size:11px;
position:absolute;
width:655px;
z-index:5000;
}
#top_nav ul {
float:left;
height:auto;
margin:0px;
padding:0px;
position:relative;
z-index:5000;
}
#top_nav ul li {
background-color:#53639F;
border:0px solid #FFFFFF;
clear:left;
height:auto;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0px;
width:129.8px;
}
#top_nav ul li a {
background-color:#001534;
color:#FFFFFF;
display:block;
font-size:11px;
height:100&#37;;
margin:0px;
padding:0px 0px 0px 3px;
text-align:center;
text-decoration:none;
width:100%;
z-index:50000;
}
#top_nav ul li a:hover {
background-color:#CCCCCC;
color:red;
display:block;
margin:0px;
text-decoration:underline;
}
</style>
<script type="text/javascript">
window.onload=function(){
loadMenu();
}
function loadMenu(){
var uls=document.getElementById('top_nav').getElementsByTagName('ul');
for(var i=0;i<uls.length;i++){
var lis=uls[i].getElementsByTagName('li');
var len=lis.length;
uls[i].onmouseout=function(){
hideMenu(this);
}
uls[i].onmouseover=function(){
showMenu(this);
}
for(var j=0;j<len;j++){
if(j==0){
lis[j].onmouseover=function(){
showMenu(this.parentNode);
}
}else{
lis[j].style.display='none';
}
}
}
}
function showMenu(obj){
var lis=obj.getElementsByTagName('li');
var len=lis.length;
for(var i=0;i<len;i++){
lis[i].style.display='block';
lis[i].style.margin="0px";
lis[i].firstChild.onmouseover=function(){
showMenu(this.parentNode.parentNode);
}
}
}
function hideMenu(obj){
var lis=obj.getElementsByTagName('li');
var len=lis.length;
for(var i=1;i<len;i++){
lis[i].style.display='none';
}
}
</script>
</head>
<body>
<div id="top_nav">
<ul>
<li><a href="default.asp">Home</a></li>
</ul>
<ul>
<li><a href="#">Doing Business w/ LCC</a></li>
<li><a href="aboutUs.asp">About Us</a></li>
<li><a href="mailto:[email protected]">eMail Apprasial</a></li>
<li><a href="helpdesk2.asp?fromlink=helpdesk">Help Desk</a></li>

<li><a href="http://www.lccjobs.com/">Employment</a></li>
<li><a href="http://www.rateprice.com/forms/brokerpkg.pdf">Broker Approval Package</a></li>
<li><a href="http://www.rateprice.com/forms/CertificateofCorporateResolution.pdf">Certificate of Corp. Resolution</a></li>
</ul>
<ul>
<li><a href="#">Product Info</a></li>
<li><a href="propertyrestrictions.asp">Property Restrictions</a></li>

<li><a href="CityOrdinances.asp">Specific City Ordinance</a></li>
<li><a href="ratefees2.asp">Rebates / Fees</a></li>
</ul>
<ul>
<li><a href="tutorials.asp">Tutorials</a></li>
<li><a href="http://office.microsoft.com/en-us/templates/TC010744631033.aspx?CategoryID=CT010957771033">Balance Sheet Example</a></li>
<li><a href="http://office.microsoft.com/en-us/templates/TC011132381033.aspx?CategoryID=CT010957771033">Income Statement Example</a></li>
</ul>
</div>
</body>
</html>


Basscyst

bazz
Mar 7th, 2008, 10:15 PM
I use suckerfish or a derivative of it. It works fine for me and I found it relatively straighforward to have it powered directly from my Db so that any new stuf in the db will show if appropriate. I wish I could get rid of the small JS part though so that it works in IE6 whether or not JS is switched off.

bazz

TheShaner
Mar 11th, 2008, 04:53 PM
I know this is a bit old, but I do want to thank everyone for their replies. I've been really busy at work and just haven't had the time to respond back.

@Brandoe85: Your comments are never helpful but always entertaining :p lol

@Aradon: Don't ever start making websites please :D

@Basscyst: Nice JS menu, but I like the CSS option more since it is cleaner and more reliable in terms of if JS is disabled.

@bazz: Suckerfish is a nice CSS DD. That's what I went with. I agree about the JS, but at least it's only for a rare situation. I mean, if you're conscientious enough to disable javascript, then you're surely not an individual who would still use IE6, lol.

Thanks all!

-Shane