

How about very interactive sites without any obvious menu where the user has to get down and dirty and really explore a site to find things out, I’m thinking along the lines of a site aimed at kids where they have to move the mouse over basically every possible object on screen in order to uncover information and links etc. On a related topic though and following on from the cascade vs index menu side-bar discussion that this article generated.
#CSS STACK MENU ITEMS HOW TO#
Personally I avoid java completely, simply because I just don’t understand it and how to use it so when java minimal articles pop up, so do my ears, so thanks. Well first off,thanks for the article regardless of whether it was repetitive of previous stuff, it did generate useful discussion and some interesting links regarding menus. That’s good design.īy contrast, too many sites bombard me with irrelevant material, and drop-down menus are one way many sites perpetrate this UI error.īut some clients insist on them anyway, and when they do, this ALA article (along with Suckerfish Drop-downs) will come in handy. Photoshop’s designers give me the tools I need when I need them, and hide them when I don’t need them.

Likewise, when I’m setting type in Photoshop, Quickmask and other selection tools aren’t immediately available, but that’s okay because I’m setting type, not making a selection. Typographic tools are not instantly available, but that’s okay, because when I’m making a selection, I don’t need to kern type. When I’m making a selection in Photoshop, the selection tool is highlighted, and additional selection options become available from the tool bar. Krug has conducted countless usability tests on real-world sites, with real users, and he concludes that users are perfectly happy to drill down through architecture that is organized per their needs.įorget about websites. Steve Krug, one of my favorite authors on usability, says the same thing in his excellent book, Don’t Make Me Think. My objection is that the ability to visit any page of a site with one click is vastly overrated and not what most users need or want, in my experience. My objection to drop-downs as a rule ��� having nothing to do with the quality of the current excellent ALA article - is *not* that novice users can find them cumbersome. (For that matter, using the scroll wheel on an iPod can also be tricky for some users.) But that study focused mainly on the MECHANICS of using drop-down menus, which can be tricky for some users. I, too, wish I had bookmarked the Famous Study showing how drop-down menus can confuse users. Just to give you a taste, here’s a prettier one I prepared earlier. All you have to do now is add some hover styles and make it your own. That’s it! A standards-friendly method for creating visually appealing horizontal drop-down menus.

A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. ul ĭuring the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. And I promised you it would be visually appealing! Let’s add some style. If you have previewed the menu above, you’ll see a pretty boring list of items.

That’s it: some simple HTML that is both accessible and easy to edit. Sound complicated? It’s actually very straightforward: The best way to do this is to build an unordered list, with each sub-menu appearing as a list within its parent list item. The first and most important part of creating our menu is the menu structure itself. Here’s a sneak preview of the menu in action. 3 days of design, code, and content for web & UX designers & devs.
