Jump to content

drop down menu using javascript vs plain css and html


Don Ross 76

Recommended Posts

Hello,

 

I'm wondering why there are big companies that have website that uses drop down menu(dynamic menu) using javascript instead of using the plain css and html drop down menu. I have read from this website http://www.cssplay.co.uk/menus/ that the author uses drop down menu with no javascript just plain html and css.

Here are some of the author's words "the introduction of the float/drop technique to produce a multi-level menu system that works in all browsers without the need for javascript, hacks, conditional comments, tables and expressions"

 

I think its great to build dynamic or drop down menu without any javascript just plain css and html. But if this technique exist, how come there are so many website own by big companies that still uses dynamic menu with javascript? I surfed these websites and I disabled my browser javascript and their drop down menu is no longer working.

 

Is the float/drop technique with no javasript and just plain html and css has problems? Or somehow not accepted as standards? That is why the big companies or popular websites are not using them? Any idea would be appreciated.

 

Kind Regards,

 

Don Ross 76

Link to comment
Share on other sites

Just to add on the above post,

 

I wonder if this float/drop technique that does not require javascript is using html 4.01 or html 5?

 

I also check the code behind that float/drop tech and there is something I'm not familiar with or may be I forgot it if it was mentioned at killersites.com University video tutorial. Here is the code:

 

 

.nav,

.nav ul {list-style-type:none; margin:0; padding:0; float:left;}

 

I'm not familiar with that comma. What does it mean?

 

I have seen codes like this:

 

.nav ul {list-style-type:none; margin:0; padding:0; float:left;}

 

May be I forgot this comma.

 

Kind Regards,

 

Don Ross 76

Link to comment
Share on other sites

I don't know why people do what they do - not something I wonder about much ;)

 

As to the comma, it's just adding a second selector to what the properties apply to.

 

So '.nav ul' refers to a ul inside a class of nav, where your example refers to that AND the class of nav.

 

Or

 

h1, h2, h3, p {color: red;}

 

Will turn the font color of all h1s, h2, h3s, AND p's red.

Link to comment
Share on other sites

I don't know why people do what they do - not something I wonder about much ;)

 

As to the comma, it's just adding a second selector to what the properties apply to.

 

So '.nav ul' refers to a ul inside a class of nav, where your example refers to that AND the class of nav.

 

Or

 

h1, h2, h3, p {color: red;}

 

Will turn the font color of all h1s, h2, h3s, AND p's red.

 

Thank you very much Andrea, I appreciate your help.

 

By the way I tried to validate the codes from that author of the float/drop technique without javascript and it pass the validation. It is a valid xhtml 1.0 strict. That's a nice job, they made a drop down menu without javascript. Even if some user disable the javascript in their browser the drop down menu would still works. That is cool for a beginner like me.

 

Kind Regards,

 

Don Ross 76

Link to comment
Share on other sites

I am not sure which menu you are looking at (you didn't give the exact url for the menu you are talking about) but modern browsers such as IE9, Firefox, Chrome, etc will more than likely work without any conditional comments, hacks or scripts. However, we still have a chalk full of IE8 users along with IE7.

 

The pure css method that Stu used have indeed worked without javascript but it require some conditional comments for it to work for IE6, 7 and 8.

 

<li><a class="fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#url">Email</a></li>

<li><a href="#url">Telephone</a></li>

<li><a href="#url">Online Form</a></li>

<li><a href="#url">Snail Mail Address</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

 

If your html code does not show those conditional comments then I suggest you view the menu in all version of IE as well as Safari and Opera to make sure it does indeed work for ALL users.

Edited by Eddie
Link to comment
Share on other sites

IE6... Ahhhh!!!!!!! Zombies! Run for your lives!!!!! The dead still surf!!!!! bash2.gif (He is right... just infuriating that it is still around)

 

Keep in find older mobile devices may not support Java Script. Java Script can be turned off by the user as well, in which case those drop downs do not work and the user is stranded unless you create them folded out by default so it breaks open. Yes, most people do not turn it off, but they can and it is not our place to force them to use it. So some folks like the CSS version.

Link to comment
Share on other sites

You will probably find that sites that use javascript for dropdown menus have (or should have) a link to a site map which uses plain html hyperlinks as an alternative if users have javascript disabled.

 

Javascript is used as you can make the menu prettier and dynamic.

Link to comment
Share on other sites

I am not sure which menu you are looking at (you didn't give the exact url for the menu you are talking about) but modern browsers such as IE9, Firefox, Chrome, etc will more than likely work without any conditional comments, hacks or scripts. However, we still have a chalk full of IE8 users along with IE7.

 

The pure css method that Stu used have indeed worked without javascript but it require some conditional comments for it to work for IE6, 7 and 8.

 

 

 

If your html code does not show those conditional comments then I suggest you view the menu in all version of IE as well as Safari and Opera to make sure it does indeed work for ALL users.

 

Here is the exact url: http://www.cssplay.co.uk/menus/float-drop-multi-column.html'>http://www.cssplay.co.uk/menus/float-drop-multi-column.html

 

According to the author it was Tested and working in IE6, IE7, IE8, IE9, Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, iPhone, iPod Touch and iPad.

 

This code is valid and it works in many browsers. If this is the case then I don't see any harm in using this to build websites for people. I can't find any drawback or any disadvantage of using this codes.

 

I'm not against javascript, I like javascript but some people disable their browser javascript for some reasons that we have no control of. It's a very good thing to know what Wickham posted that "sites that use javascript for dropdown menus have(or should have)a link to a site map which uses plain html hyperlinks..." The problem is there are many non-technical users who doesn't know what a site map is. I think to become a good web designer or developer like all you guys I have to think of the convenience of the people who will use my website, so the less click the better, the less trouble of finding where the site map is the better.

I will continue learn the javascript in killersites.com University video library to add beautiful effect and convenience for the web surfer. But for the menu I need something that is solid that will not make the web surfer or user be stranded if someone else disable the javascript in their computer and they I have no idea how to enable them again. I also think that the menu is one of the life blood of a website if it's not functioning well then the website may not deliver its content properly.

 

Here is the entire code of the menu I'm talking about:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>dropdown menu</title>

 

<style type="text/css">

/* ================================================================

This copyright notice must be untouched at all times.

 

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/float-drop-multi-column.html

Copyright © 2005-2010 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

.container {width:715px; height:500px; margin:0 auto; padding:20px 16px; background:url(float-drop/ski.jpg);}

/* default styling */

.nav,

.nav ul {list-style-type:none; margin:0; padding:0; float:left;}

 

/* the link border radii and shadow */

.nav a {text-decoration:none;

-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

 

-o-border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

}

 

/* the menu font */

.nav {font-family: verdana, sans-serif; font-size:11px; margin-bottom:-1px;}

 

/* style the links */

.nav a {float:left; color:#fff; line-height:16px; padding:4px 4px 4px 14px; border:1px solid #fff; margin-bottom:-1px; background:#556b2f;}

/* the dropdown arrow */

.nav .sub-a {background:#556b2f url(float-drop/arrow.gif) no-repeat 3px center;}

 

/* the sub menu links */

.nav ul a {background:#6b8e23;}

 

/* the links hover color */

.nav a:hover,

.nav a:focus,

.nav a:active {outline:0; background-color:#c19441;}

 

/* the sub links hover color and arrow */

.nav ul a:hover,

.nav ul a:focus,

.nav ul a:active {background:#c19441 url(float-drop/arrow-r.gif) no-repeat 3px center;}

 

/* this is for the path highlight in all browsers except IE6 and lower */

.nav li:hover > a {background-color:#c19441;}

 

/* WIDTH change this WITH CARE to suit your requirements */

.nav {width:120px; margin-right:-1px;}

.nav a {width:100px; margin-right:-119px;} /* take into account the borders when calculating the link width, margin-right = total link width - 1px */

.nav ul li {max-width:120px;} /* fix for IE8 */

 

/* flyout LEFT/RIGHT positions */

.nav ul.fly {left:119px;}

.nav .left ul.fly {left:auto; right:119px;}

.nav .mid ul.drop {left:-119px;}

 

/* DO NOT CHANGE ANYTHING BELOW THIS LINE */

/* ---------------------------------------------------------------------------- */

.nav ul {position:relative; margin-bottom:-1000px; z-index:500;} /* make all sub menus line up at the top and a high z-index to cover the top links drop shadow */

.nav ul li {float:left; clear:left;} /* get the sub links in a vertical column */

.nav a {position:relative;}

.nav .sub-li {margin-top:-3000px;} /* move the sub menus off the top of the screen out of sight */

.nav .sub-a {margin-top:3000px;} /* move the top level links back to their original positions */

 

/* The bit that does ALL the work to bring the sub menus into view */

.nav .sub-li a:hover,

.nav .sub-li a:focus,

.nav .sub-li a:active {margin-right:0;}

 

/* OPERA fix */

.nav ul:hover {clear:left;}

 

/*IE6-7 fixes*/

a:active {}

/* ---------------------------------------------------------------------------- */

</style>

 

</head>

 

<body>

<div id="info">

 

<h2>Float/Drop Multi-column Menu</h2>

<h2>No hacks, no javascript, no tables, no conditional comments, no expressions.</h2>

 

<h3>31st December 2010</h3>

 

<div class="container">

<ul class="nav">

<li><a href="#url">Home</a></li>

</ul>

<ul class="nav">

<li class="sub-li mid"><a class="sub-a" href="#url">Resort</a>

<ul class="drop">

<li>

<ul class="fly">

<li>

<ul class="fly">

<li><a href="#url">Advanced Skills</a></li>

<li><a href="#url">Beginners Slopes</a></li>

<li><a href="#url">Intermediate Slopes</a></li>

<li><a href="#url">Expert</a></li>

</ul>

</li>

<li><a href="#url">Snow Hotel</a></li>

<li><a href="#url">The Snowman</a></li>

<li><a href="#url">Ice Cavern</a></li>

<li><a href="#url">Ski Inn</a></li>

</ul>

</li>

<li><a href="#url">Ski Slopes</a></li>

<li><a href="#url">Night Life</a></li>

<li><a href="#url">Restaurants</a></li>

<li><a href="#url">Car Hire</a></li>

<li><a href="#url">Ski Hire Facilities</a></li>

</ul>

</li>

</ul>

<ul class="nav">

<li class="sub-li"><a class="sub-a" href="#url">Information</a>

<ul class="drop">

<li>

<ul class="fly">

<li><a href="#url">Boots</a></li>

<li><a href="#url">Skis</a></li>

<li><a href="#url">Ski Wear</a></li>

<li><a href="#url">Goggles</a></li>

</ul>

</li>

<li><a href="#url">Lift Passes</a></li>

<li><a href="#url">Insurance</a></li>

<li><a href="#url">Ski Schools</a></li>

<li><a href="#url">Snow Report</a></li>

<li><a href="#url">Gear Rental</a></li>

</ul>

</li>

</ul>

<ul class="nav">

<li class="sub-li"><a class="sub-a" href="#url">Contact</a>

<ul class="drop">

<li><a href="#url">Email</a></li>

<li><a href="#url">Telephone</a></li>

<li><a href="#url">Online Form</a></li>

<li><a href="#url">Snail Mail Address</a></li>

</ul>

</li>

</ul>

<ul class="nav">

<li><a href="#url">Privacy</a></li>

</ul>

<ul class="nav">

<li class="sub-li left"><a class="sub-a" href="#url">Nearby</a>

<ul class="drop">

<li>

<ul class="fly">

<li><a href="#url">Snow Hotel</a></li>

<li><a href="#url">The Snowman</a></li>

<li><a href="#url">Ice Cavern</a></li>

<li><a href="#url">Ski Inn</a></li>

</ul>

</li>

<li><a href="#url">Where to go</a></li>

<li><a href="#url">What to do</a></li>

<li><a href="#url">Places of interest</a></li>

<li><a href="#url">National parks & Museums</a></li>

</ul>

</li>

</ul>

</div>

<br /><br />

<a href="http://twitter.com/home?status=Currently testing a new menu from @stucssplay here http://www.cssplay.co.uk/menus/float-drop-multi-column.html" rel="nofollow" class="tweet"><img src="../graphic/tweet.gif" alt="tweet this" /></a>

 

<p class="info">Copyright ©2010/2011 stu nicholls - cssplay.co.uk</p>

<br />

</div> <!-- end of info -->

</body>

 

</html>

Link to comment
Share on other sites

I use cssplay menus all the time, including those with the small tables in conditional comments for IE6 (although not all cssplay menus have this).

 

There's no harm in having these conditional comments except that it adds a tiny bit more processing.

 

Javascript or jQuery menus will often look better and do things like fade.

Link to comment
Share on other sites

I use cssplay menus all the time, including those with the small tables in conditional comments for IE6 (although not all cssplay menus have this).

 

There's no harm in having these conditional comments except that it adds a tiny bit more processing.

 

Javascript or jQuery menus will often look better and do things like fade.

 

Thank you very much Wickham I appreciate.

 

You made things more clearer for a beginner like me.

 

Now I know that those menus and codes from cssplay can be use and javascript or jquery would add a better look to the website.

 

I just have to watch out for those conditional comments

 

Thanks again and to all the people who shared their ideas and information regarding this topic.

Link to comment
Share on other sites

I never saw that dropdown from Stu. I did notice that he only showed one level dropdown even though he mentions that it's a mulit-column dropdown menu but not multi-level which is different.

 

So far, I still have not seen a multi-level dropdown menu that will work without javascript, conditional comments or hacks for all browsers including IE6, Safari and Opera.

 

As Wickham said, there's nothing wrong with javascript or conditional comments but it sure would be nice to have a fully supported CSS menu with unlimited dropdown/flyout levels that works without it.

Link to comment
Share on other sites

JQuery simply adds the cool effect to dropdown menus. Not too many people turn off JS, but for the ones that do, your menu would simply appear and not slide down. Try this out http://route19designs.com/DP-Menu/. Try it with JS turned on and try it with it turned off. as far as the multi level flyout, http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html. I know I will get criticized for this, but I do not design for IE6 at all. Don't care really.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...