Listless Navigation – Using CSS To Do More With Less

By  on  

I've guest-blogged on Chris Coyier's blog, CSS-Tricks.com.

Jump over to Chris' blog to read my article -- Listless Navigation - Using CSS To Do More With Less.

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect. The HTML The overall...

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. A very interesting idea. Now I just have to get enough traffic to my sites to make it worth it…

  2. I have written a response to your article on CSS-Tricks. I hope that you don’t take offense to the article, I only want to clarify the importance of using lists for semantic and accessible markup.

  3. Bill Byrd

    It seems impossible to find an example of listless navs with sub-menus. Can you point to any? Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!