Easy-to-Code Navigation that Scrolls With You: It’s Possible!
February 11th, 2013 by Robin, in Monday in the HTMLabTags: layout, navigation, user interface, web development, webdesign
These days, navigation that follows a user down the page is a very attractive and user-friendly design. When a user doesn’t have to scroll all the way back to the top of the page to get to the navigation, and doesn’t even have to fool with clicking a “back to top” link, it’s a wonderful thing.
But it’s a little challenging for us web designers to get it done, as I discovered while researching for this blog post; there are plenty of designers looking for ways to make this happen in their own layouts, and there are just as many solutions in various programming languages.
Eventually, I just opened my trusty Notepad++ and started knocking together some code myself–and I accidentally found a very, very simple CSS solution.
Robin’s Sticky Nav Bar: The (Code) Recipe
Click to see my simple “sticky nav bar” demo! (opens in new window)
To make the above page navigation work, it took about an hour of experimenting with HTML and CSS, creating a dummy layout and the like. But finally, on a whim, I stuck the following bits of code into my navbar div:
#navbar {width: 900px; height: 40px; padding: 0px; position: fixed; top: 0px; background-color: #0f00a1; box-shadow: 2px 5px #000555;}
The code in bold above is the important bit to see here; this was the magic wand that transformed my plain ol’ horizontal navbar. Once you style your own navbar the way you want it, all it takes is two code bits–”position: fixed;” and “top: 0px;”–to make it stick to the top of the page.
And, to make it centered like the rest of my layout, I made sure to put my navbar div within a container div called “wrap,” styled like so:
#wrap {width: 900px; margin: 0px auto; padding: 0px;}
The following HTML code is what I mean by “putting the ‘navbar’ div within the ‘wrap’ div:”
<div id=”wrap”>
<div id=”navbar”>
<span id=”sitename”>my dummy site name</span> <a href=”#”>about</a><a href=”#”>faq</a><a href=”#”>products</a><a href=”#”>services</a><a href=”#”>support</a><a href=”#”>home</a>
</div>
<div id=”sidebar”>
more code here, etc…
</div> (this ends the “wrap” div)
That’s really all the magic there is to it! (This design works in Firefox, IE, and Chrome; I have not tested it in any other browsers, but it seems that these three handle it identically, so I have hope that it works with all browsers similarly. If you find that this code doesn’t work in a browser I haven’t tested, let me know!)
One Small Caveat:
Fixing your navbar to the top of the page with “position: fixed” works great–but only if you don’t mind your navbar being the very topmost thing to display on your layout. If your ideal navbar is located beneath your header image to begin with, but then sticks to the top of the page when your user scrolls down, then just using “position: fixed” with a different pixel value in “top:” won’t make that happen. (Believe me, I tried–it was fail. I ended up with a navbar just stuck randomly in the middle of the page blocking the content. :/)
So, what to do if you want a navbar that will stick to the top of the page, even if it’s not at the tip-top of the layout to begin with? Well, from what I found in my research, you’re likely going to have to use Javascript/jQuery to make this more complex navbar. Here are two forum/discussion sites which explain these methods much better than I ever could.
jQuery and Javascript Methods for Sticky Nav Bars
- How to Make a Nav Bar that Scrolls with the Page Past a Certain Point: Stack Overflow Discussion (both Javascript and jQuery methods suggested)
- Making a Nav Bar Scroll with the Page @ Codewalkers Forums (Javascript method successful)
Summary
“Sticky” nav bars are sleek, clean, user-friendly–and fairly easy to achieve with these three methods presented here. I hope at least one of these helps you with your next layout!
comment (1)When and How to Use a Horizontal Drop-Down Menu
February 27th, 2012 by Robin, in Monday in the HTMLabTags: navigation, user interface, web design, web trends
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)
Tags: icons, images, navigation, user interface, web design
Due largely to the advent of apps, many webdesigners are choosing to do more of their site’s navigation with the help of icons rather than text. After all, doesn’t it look so much cleaner to just have a picture in place for an RSS feed, or for a Twitter account, than to spell out “RSS Feed” or “Twitter” in text?
Well, yes and no. A few icons instead of text links for navigation are cool–for instance, if you have a list of social networking places, it can look cool to arrange them on a sidebar where they are easy to hover over and browse. You can arrange them in a table-like setup, or have each one contained within its own little box. Icons take up a lot less visual space than text, so designs indeed look tidier.
They look tidier, that is, until you have tons of them on the page. Too many icons, and it can start to look like somebody’s cluttered desktop instead of a website. If every link on your page is an icon, users can start to get a bit lost in the page–now, what did this icon over here mean? And what was the thing I had to click to find this content page?
Just like candy, small doses of icons are best, so that your design looks sleek and not suffering from icon overload. But how many icons is too many? It really depends on how you organize them on the page. Some tips and examples for icon organization and labeling follow:
Think about how best to display your icons.
Considering your layout, how and where would your icons be best placed? For some layouts, a small table of icons might work best if you only have a tiny bit of space on your sidebar, in your header, or in your footer in which to display them–see an example below:
But if you have a small strip of space across the top or along the side of your content, you can place icons there, as seen here:
Horizontally-aligned icons can look cool as part of a navigation bar…
…and vertically-aligned icons can look neat on a sidebar.
Give at least 10 px of space between your icons.
One of the most important points about arranging your icons is spacing. Whether you choose to arrange them in a table like this or in a vertical or horizontal strip, leave a bit of space around them. This will prevent them looking all crowded together and unreadable. The icons in my example above are spaced 10 px apart, giving each enough space to be clicked on and understood as separate entities.
Reduce the number of icons if you need to.
Take a hard look at all your icons–if they’re taking up at least 200px of vertical/horizontal space, you might have too many. One way I get around this design issue is to design my icons’ display, leave it alone on my hard drive for a few days, and then come back to it with fresh eyes. With time away from it, I can better tell if there are too many even to my eyes. In that case, I pick out the most important ones (the ones I really want my visitors to click on) and put the rest on another page, well-spaced. Try this–your users’ eyes will thank you!
Do a “hover label” for each icon.
If you want to label your icons, you can just make the icons’ link and visited-link text color the same as the background color, and make the hover text color a strongly-contrasted color, like the examples below:
For this, I put each icon into its own table cell, and then put a line break between image and text within the link, like so:
<td valign=”top”><a href=”http://www.facebook.com/”><img src=”facebook.png” border=”0″>
<br>facebook</a></td>
For this example, I gave each icon its own table cell and row, and just put a few non-breaking spaces between linked image and linked text, like this:
<tr><td valign=”top”><a href=”http://www.facebook.com/”>
<img src=”facebook.png” border=”0″> facebook</a></td></tr>
Remember that you can have multiple lines of text displaying underneath or to the side of your icons in this format (just using HTML line breaks), as shown below:
Make use of alt and title text.
For some layouts, you may not want the added clutter of text displaying every time you hover over an icon. For that, you can use alt text in the <img> tag and title text in the <a> tag to stand in for the text hover labels I showed how to do earlier. See how the alt and title text works in the icon table, below:
Last question: small icons or big? This is a personal choice for every designer, and depends on the grandness of the layout you’re designing. If you have a very simple layout, small icons might look sufficiently different enough for users to notice them; if you have a very detailed, graphics-intensive layout, you might want bigger icons so that they stand out more.
Summary:
Adding icons to your site is up to you–just remember that a few pieces of icon candy go very far on a web design!
comment (1)Experimenting with Navigation Placement, Part II: New Ideas to Try
February 14th, 2011 by Robin, in Monday in the HTMLabTags: layout, navigation, web design
In last week’s post, we looked at three traditional navigation placements in layout design, and briefly discussed the pros and cons of each. In this post, I will share with you some tricks I’ve used to shake up the navigation without rendering my layouts completely un-navigable.
Idea #1: Mix in a few icons as well as text links.
Having all your links in one location is fine. But, to make your site look very different, it’s a great idea to make your own icons for some of your links and use them instead of plain text. For instance, you could have an open-book icon to represent a guestbook where users can leave comments, or you could have a world icon to show users your page full of links to other places on the Web.
To make icons, you could get crafty with a pencil, paper, and scanner and draw in your own, or you can use a graphics-editing program. I actually use a couple of fonts for most of my icon needs–the font names are Wingdings, Wingdings 2, Wingdings 3, and Webdings. All have some very simple and usable icons that you can manipulate just like any other font in a graphics-editing program. You will need a program more sophisticated than Paint for this, but it’s well worth the effort!
Another little trick to remember: make sure that the backgrounds of all your icons are transparent, so that they blend more easily into your site design and aren’t glaringly noticeable as separate images. Most good graphics programs, such as the one I use, Adobe Photoshop Elements, have a way to make your images have a transparent background from the beginning of image creation.
Idea #2: Have links categorized in several places.
A long list of links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about instead grouping like pages together, and putting links in different places on the layout depending on what they are?
An example would be my City of Heroes site, Skies over Atlas. On this page, I have most of the main content’s links down the left side of the page, which looks pretty traditional. But, at top center just underneath the header image, I have a second navigation bar, where I’ve put my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. I categorized my links into two sections–main content and user interaction.
You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.
Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!
Idea #3: Use an image map.
Often seen on more personal sites than content-driven sites, image maps can nonetheless be an effective navigation tool–as long as you make it clear what to click in the image! Having an image map means that likely your header image/background image and navigation can be combined into one area, making your whole site design look a little cleaner and less cluttered with text links. You can bring icons or other imagery into your header design, or you can type text into your header image and make it clickable.
One thing you’ll want to remember: make sure that when the user hovers over each image map hot spot, a tooltip or some notification will pop up telling the user what the link goes to. I usually do this by including the following code as part of my image map code:
<area shape=”rect” coords=”coordinates of the link here” href=”the link here” title=”description of the link” alt=”description of the link here”>
Using both the title and alt selectors instead of just one or the other will ensure that people using all sorts of browsers will be able to see your tooltips, even if it isn’t the most valid code in the world.
I hope these ideas have started your brain percolating about navigation. Don’t be afraid to try new things in your web design–happy designing!
no commentsNavigation Placement in a Web Design, Part 1: Traditional Placements
February 7th, 2011 by Robin, in Monday in the HTMLabTags: layout, navigation, web design
Part of designing a website is determining where the site’s main links–its navigation–should be displayed in a layout. It’s important to place the navigation in a clearly visible spot, where the user does not have to scroll or hunt endlessly for it.
Yet many webdesigners balk at just putting the navigation in the same tired old places in a layout every time; you want to be able to innovate just a little, make your layout look different from everybody else’s, but still be easily browsable.
With that in mind, what are some of the traditional navigation placements?
Position #1: At the far left of the layout, with content beside
Many websites nowadays have at least some navigational links placed at the far left of their layouts. For left-to-right readers, this works great, because the left-to-right reader’s eye instinctively navigates to the top and/or left of any page to begin viewing, and having navigation placed there can direct them quickly to your content.
However, this placement being so traditional means that it can be rather boring in terms of design. How much can you innovate a left-aligned navigation without imitating what a thousand other webdesigners have already done?
Position #2: Center-aligned, with content underneath
This navigational position is great for sites that don’t have a whole lot of links in their navigation, and it’s become a big trend in design as of late. It looks clean and sharp, blends in with the layout a lot better than left-aligned, and it allows room for one or more sidebars of extra content beside your main content block.
However, this presents a problem when users are viewing extra-long pages of content: in order to browse to another page, you have to scroll all the way up to the top again to click on another link. All the “Back to Top” links in the world can’t permanently solve that problem.
Position #3: At the far right of the layout, with content beside
This is actually a favorite navigation position of mine, because it’s a bit unexpected. This way, users are drawn to your index page’s content first. If you’re creating a site that’s meant to be browsed slowly and thoroughly, this is a great design, and it works well for personal sites.
But the problem with this navigation position is that it’s more unexpected. People may spend more time hunting for links than they do clicking on them. How can you draw more attention to the links without putting them somewhere else on the page?
Stay tuned for Part 2 of this post, coming next Monday, in which I discuss some innovative ways to shake up your navigation without being totally off-the-wall!
comment (1) January 31st, 2011 by Robin, in Monday in the HTMLabTags: css, layout, navigation, web design
Since being introduced to the CSS property display:block by a dear online friend, I have used it to great effect in several layouts, mainly for navigational purposes.
This is how I generally use it in my layouts, because I’m making only the links display in a block format:
#nav a {display:block;}
Here’s an example of what display:block can do:
This picture is from the version 11 layout of my main domain.
I love how clean it makes the navigation look; I actually like it so well that I’ve used display: block-style navigation on a lot of my websites. I guess I’m a proponent of the saying “if it ain’t broke, don’t fix it.”
Padding and Margin Tricks with Display:Block
There are ways that you can space the links out or crunch them together to create any effect you desire, just using widths and heights specified in your CSS.
For instance, if I wanted the links to be surrounded with 10px of white space all around, I could do #nav {display: block; padding: 10px;} .
If, however, I wanted the links to be 10px away from each other on the top and bottom, I could do #nav {display: block; margin: 0px 10px 0px 10px;} .
Or, if I needed the links to be 10px away from the left side and have no other extra space around them, I could do #nav {display: block; padding: 0px 10px 0px 0px;} . (Note: when you do padding or margins with 4 numbers like I just did, the first number corresponds with the top part of the link block, the second number corresponds with the left side, and so on, clockwise around.)
There are lots of tricks you can play with padding and margins! Try some out and see what works best for your site.
Blocking In a Background Image
Secondly, I like that you can decorate the “blocks” with background images, like a simple gradient or a pattern, especially for an a:hover link pseudoclass. Having a navigation link highlighted by a pretty pattern in the background when you hover over the link can be just the right touch of detail for a design. Doing something like this would involve your own version of the following code:
#nav a:hover {display:block; background-image: url(‘your_image_name.gif’);}
That code is basically just what I did for my main domain’s 11th layout, seen again here:
See the faint blue gradient over the first part of the word “domain?” That’s the background image hover–no Javascript needed!
Other Beautiful Things about Display: Block
Lastly, I like that you don’t need a “<br>” between each navigation link. It’s one less thing you have to type, which is always good for a web designer, since we’re usually typing large amounts of semi-intelligible code at a time. And it’s amazing how a missing >br< tag can quickly bungle up a layout! (Believe me, one little bit of unnecessary code can make quite a headache!)
In short, display:block can give you a CSS-only way to do something that looks as neat as a table without the clunky borders or endless <td> tags in your code. I love it!
no comments
