Tag Archives: web trends

When and How to Use a Horizontal Drop-Down Menu

Before beginning this post, I thought I’d be all smart and helpful and write a tutorial on how to do a horizontal drop-down menu using CSS. That was before I Googled how to do it, and discovered that no less than five people had beaten me to the punch. 😀

I linked to those five tutorials (at the end of this article), and took a new tack: WHEN and HOW to use such a design. As with all styles of design, there are times where such a menu is appropriate and times where it completely breaks the look and functionality of your whole page.

Why Use a Horizontal Drop-Down Menu?

If you’re considering using a menu like this, you probably want to condense and simplify your navigation, or you want to use your sidebar space for something other than navigation (like ads, links, recent posts lists, etc.). Both are worthy goals–using as much screen space as you can closer to the top of your page ensures that more content can be displayed “above the fold,” so that the user does not have to scroll down.

Also, horizontal drop-down menus are great for decluttering a website’s look–somehow, it adds a sleekness that vertical navigation just never gives. If you’re looking for ways to neaten up the appearance of your site, such a menu design could be the very thing you need. And of course, if you already have a simple navigation (just a few pages in a couple of categories), then this look is perfect for your site.

When to Keep Away from This Menu Style

Just because you CAN do a horizontal menu with drop-down space doesn’t mean you SHOULD.

If you have just a few categories with lots of links in each one, you should not use this style–it will make your drop-down menu way too big and clunky on your page.

Also, if you have content high up on your page that you don’t want covered up at all (like sidebar widgets or important updates), I’d advise against this style, because your users will automatically be drawn to the menu and may never see your content.

How to Implement a Horizontal Menu Beautifully

  • Make your categories many and your links within each category few, so that your menu displays in a compact fashion.
  • Choose an easily-readable medium text size for your menu options (12-14 pixels for most fonts).
  • Make sure your link color and the menu’s background color are different enough from each other to be readable.
  • Don’t go crazy with link animations or graphics in your drop-down menu–just text links that match the colors of your site will be much more professional and usable.

Four Visual Degrees of Drop-Down Menus: From Worst to Best

#4. Not only is this menu HUGE, covering up much of the page underneath it, but its links are formatted in this weird, widely-spaced, almost tabular layout. It is visually confusing–everything looks the same, and it’s scattered all over the place.

#3. This menu is a little bit better–it’s big but doesn’t cover up the whole page underneath it. But its text formatting is strange; why all the space between each item, and why such huge font? Plus, the two top categories in bold are a bit vaguely worded, which means no one is going to click on them.

#2. This menu is more compact, with manageable font size and spacing, and a simple two-column link layout. But it still feels a bit “busy” with links.

#1. We have a winner! This menu is very compact, yet has big enough font size to read. Plus, it’s got high-contrast colors between the background and text colors, and its links are sorted alphabetically. Makes it very, very easy to find what you want, which is the point when designing a good navigation menu of any sort.

Learn How to Code and Design This Menu Type

AListApart (basics)
Onextrapixel (combines HTML, CSS, and JQuery)
CSSNewbie (VERY easy to understand–even I got it!)
Sperling.com (a little more jargon-heavy, but still a good reference)
MyCSSMenu (if you don’t want to fool with the code)

Font Series Wrapup: Fonts You Need for Your Toolbox

As an ending to this series of font-tastic posts, I am recapping some of the best fonts I discovered while doing font research. The five I have chosen for today’s post are, in my opinion, the most usable and easily-read of all the fonts in each category I wrote about (fancy fonts, sans-serif/serif body fonts, bitmap fonts, and symbol fonts). I hope you find them as useful and awesome as I have–I’ve already downloaded them all for use in my future designs!

(By the way, I provide links back to the articles I wrote for each category, so it’s easy to check through the articles and see if you agree with my picks. 😀 )

Best Fonts from This Article Series

Best Bitmap Font:

Why? Because it provides the smallest and yet most readable text for itty-bitty graphics. I’ve long used it for link buttons, but it has a variety of uses around a website.
Best Symbol Font:

Why? Because it has a ton of symbols–even symbols for special characters, like accented E’s, etc. It literally has a symbol for every character you can think of, and they are all useful in an icon-based design.
Best Fancy Font:

Dhe Mysterious
Why? Because it has a well-defined character set, and yet it has a beautiful wispy quality to it too…strong but soft. Great for titles and headings, but not too bold.
Best Sans-Serif Body Font:

Why? Because it’s not Arial, Verdana, or Helvetica, but it is still legible–it’s different without being tiring on the eyes after reading a page or two written in it.
Best Serif Body Font:

Why? Graceful without being overpowering–and again, it looks different enough from Georgia, Garamond, and Times New Roman.


Fonts are, for me, one of the most important parts of web design, because a good font choice means that people can read your content (what they came for). Making a website beautiful AND easy to use/read is what webdesigners are all about, after all!

I hope that this font article series has helped you discover new fonts for your own site designs. It certainly has been fun for me to review all these different fonts (and find new favorites)!

Keeping Up with the Webmasters

Just like clothing fashions, web fashions go in and out of style, even within a year. I remember when transparent iframes and HTML tables were all the rage back in the mid-2000s, for instance. Today’s super-sleek, Apple-Corporation-like webdesigns are on trend for the moment, but they may fall by the wayside soon. And, when they do fall out of fashion, most of us webdesigners will feel the pressure to “move with the times.”

I say, however, that we don’t necessarily have to throw out all of our “old” design practices with every new trend that comes along. Instead of “keeping up with the Joneses” (or the webmasters), how about some “timeless Internet fashion” blended in with new trends?

Timeless Webdesign Tip #1: Create a Design that’s Easy to Use

Whatever content you have, whether it’s text article, photos, videos, sound clips, etc., make sure your site is easy to read and browse:

  • Design attractive but not distracting images
  • Use just little strokes of bright color to accent new content
  • Space out your content to break up “walls of text”
  • Ensure that there’s a strong contrast between your text color and background color

A site that’s easy to look at and use is a site that will please visitors. Think about what you like to see when you visit a site–this will help you get the design process started.

Timeless Webdesign Tip #2: Keep your Site Organized

Group your pages together logically in your navigation structure, and create a sitemap for larger sites. You can also put in breadcrumb navigation if you have lots of subsections.

Having an organized site makes it easier for your visitors to find what they’re looking for on your site, which means they will more likely return for another visit. And isn’t that what all us webdesigners want?

Timeless Webdesign Tip #3: Interpret New Webdesign Trends for Yourself

Instead of copycatting what everyone else seems to be doing in webdesign, take time to study the new style, and figure out what you like about it. Use web trends as a way to inform and inspire your designs, not as a rigid rulebook for how you “ought to” make your sites look.

You might find, for instance, that you like that new color scheme everyone seems to be raving about, but you don’t like the layout it’s commonly used with. Instead of forcing yourself to use a layout you don’t like, just incorporate your most favorite parts of the color scheme into a layout of your own making. This keeps your site looking fresh and updated, without forcing it into a design cookie-cutter.


Since web trends are almost always changing, but there are definitely design concepts that never go out of style–and there are ways to personalize each trend for yourself as it comes along. After all, who wants to browse 10 different sites that all look the same? Help your site stand out with your own personal style!