CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
BumbleShrimp
BumbleShrimp

Reputation: 2200

Is there a better, standards compliant way to make a drop down nav for a site than pure CSS 2?

We've all seen numerous CSS 2 dropdown menus, and those used to be the best way to make a drop down menu for a website. However, I am wondering:

With all these new technologies out there, is there a better way to make a dropdown menu than CSS 2 :hover based hidden div menus?

The reason I still use the old CSS 2 hover menu is because I haven't found something else that is as cross-browser compatible, simple, standards compliant, and viewed properly by as many end users.

The bottom line is, I want to move forward as much as possible in every aspect of website development, but this is one area I am not sure it is safe to move forward in yet.

Is it time to drop the "sites shouldn't depend at all on javascript" standard and start using jQuery dropdown menus?

Upvotes: 1

Views: 237

Answers (2)

WickyNilliams
WickyNilliams

Reputation: 5298

The current thinking in the world of web development is that you should take a progressive enhancement approach to building your websites. This is a layered approach working from the bottom up: basic content (semantic HTML) forms the foundation, with look and feel (CSS) placed on top, and finally functionality sits atop of them all (provided by JavaScript).

The approach you're talking about would be the first two layers described above (HTML & CSS). You could always use jQuery in addition to this to provide functionality or extra fancy touches to the menu, provided you do this unobtrusively (that is, hook up events programmatically using jquery selectors). For example you could use jQuery to make the menus fade in and out on hover.

Now the important point to realise it that you don't have to ditch CSS to do this kind of thing - it's not an either/or type of question. By layering like this, and unobtrusively using JavaScript, you get a website that will work perfectly for all visitors! Those without JavaScript and without CSS will get the basic content, and they can navigate through your site (although it won't look pretty!). Those without javascript but with CSS will still a basic menu with drop downs on hover, styled using just CSS. And those with JavaScript and with CSS will get the best representation of the site, with CSS providing look and feel and JavaScript providing added functionality/effect.

What you should take from this is that websites do not need to look the same in every browser. For incapable browsers, ensure that the content can be presented unhindered in it's basic form. For more capable browsers add extra layers of styling and functionality to take advantage of their more advanced features. Basically, everyone has access to your content as intended and you still get to push your web development further :)

This article articulates the concept better than I ever could: http://www.alistapart.com/articles/understandingprogressiveenhancement

Upvotes: 4

Thomas Shields
Thomas Shields

Reputation: 8942

A separation of concerns and a proper use of CSS and HTML demands otherwise. If you use HTML correctly (to display content) your navigation should look something like this:

<ul id="nav">
    <li>
      <a href="#">Home</a>
      <ul>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
      </ul>
    </li>
  </ul>

It's verbose, to be sure, but it displays the content and it's semantic and valid and browser-compatible. For an added bonus, it looks fine without CSS.

Using CSS rightly, we would add the following:

#nav 
  {
    padding:5px;
    margin:0;
   }
  #nav > li{
    display:inline;
    position:relative;
  }
  #nav > li ul
  {
    position:absolute;
    width:150px;
    background-color:red;
    color:#fff;
    left:0;
    margin:0;
    padding:0;
    display:none;
  }
  #nav > li ul li{
    display:block;
  }
  #nav > li:hover ul
  {
    display:block;
}

That's reasonably simple, and I even added a few unneccesary styling in there. I used the direct descendant selectors (element > element), so it won't work in older IE, but if you refactored it this would be completly cross browser compatible. Not to mention it's valid and simple.

You seem to contradict yourself: you want to reach as many users as possible, but move forward, and you consider using JavaScript. Why? Often, JavaScript approaches render the submenu items inaccesible if JavaScript is disabled.

And JavaScript is for interaction improvement. You could make the argument that a hover menu is "interaction", but I consider it style, and it's most easily and semantically implemented that way.

Perhaps I miss something here; but CSS + HTML seem to be a fine solution and not at all inelegant, unsemantic, incompatible, or invalid. Please correct me if I'm wrong.

Upvotes: 2

Related Questions