Breadcrumb Navigation Examined: Best Practices
Hongkiat takes a look at the sometimes overlooked area of breadcrumb navigation and provides some examples of breadcrumb done well and best practices.
Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary while others may feel it is too big of a hassle for what its worth. Fact of the matter is, breadcrumb navigation will greatly increase the usability of a website. Breadcrumbs give users an alternative method of navigation, allow them to see where they stand in the hierarchy of a website, and will reduce the number of steps needed to navigate to a higher-level within a website.
Breadcrumb Navigation Examined: Best Practices and Examples
30 Exceptional CSS Navigation Techniques
Six Revisions takes a look at the "innovative ways in which designers and developers have used CSS to innovate upon its shortcomings" by illustrating some of the best ways to use CSS for website navigation.
30 Exceptional CSS Navigation Techniques »
CSS Menus
CSS Menus is a repository of great CSS menus in a variety of styles to download and use. Free for personal use or donation required for commercial use.
10 Brilliant Multi Level Navigation Menu Techniques
A nice article from devSnippets today, taking a look at multi-level navigation techniques using different Javascript libraries and CSS. Worth a read.
10 Brilliant Multi Level Navigation Menu Techniques (devSnippets)
Styled Menus: ready-made CSS menus
Styled Menus offers up a bunch of ready-made CSS menus that are both attractive, XHTML compliant and tested in all major browsers. There are a number of different styles so there's likely to be one to fit just about any site. A real time saver.
Styled Css Menus - High Quality Web Based Professional Css Menus
50 Gorgeous Navigation Menus
Vandelay Website Design has collected a nice group of navigation menus, from mnimal to artistic to colorful. Chock full of inspiration!
Five Web 2.0 CSS Menu Tutorials
Blog woork has a small but nice round-up of 5 web 2.0-look css menus, worth browsing for menu learning or inspiration.
woork: Five web 2.0 CSS menu tutorials (woork blog)
Digg-like Navigation Bar Using CSS
If you've ever wanted to build a CSS menu ala Digg, this "how-to" will show how to get it for yourself with all the necessary CSS needed.
woork: Digg-like navigation bar using CSS
7 Advanced CSS Menus
7 Advanced CSS Menu, A Great Roundup!! - collected up for a little CSS Menu inspiration for your next project!
Better Nav Image Replacement Tutorial
Website Elliot Jay stocks details a nice image replacement CSS navigation technique in his article CSS Tutorial: better nav image replacement.
So in this tutorial, we’ll do things differently: one single image will be used for all of our buttons and all three of their states (up, over, selected), our CSS will handle all the important stuff, and you’ll end up with some very neat, accessible, standards-compliant markup… as well as a great looking nav.
Worth a read for an interesting technique.
13 Awesome Javascript CSS Menus
13 Awesome Javascript CSS Menus is a nice round-up of some nice CSS and Javascript menus that offers up some nice menu inspiration. Each menu has a screen shot and a link to a demo, where available.
Creating Liquid CSS Tabs for Menus
Creating Liquid CSS Tabs for Menus walks through how to create an image based, liquid tab using CSS and xhtml.
A nice tutorial, bound to be very useful for anyone learning CSS.
Killer CSS Navigation: Everything you need to design sweet CSS menus
Killer CSS Navigation: Everything You Need to Design Sweet CSS Menus.
When you’re looking for a clean and simple navigation menu, CSS is the way to go. Aside from being easy-to-use, CSS menus are also pretty lightweight compared to their flash/javascript counterparts (not to mention much easier to set up and customize). We’ve got exactly what you need to build your entire CSS-based navigation.
A nice starting point for designing CSS menus, with lots of useful links.
Professional Horizontal Menus
Professional horizontal menus - a nice collection of horizontal menus that use the sliding doors technique. Downloads include the stylesheet and the graphics needed. Donationware.
CSS Menu Generator
CSS Menu Generator is a collection of CSS menus that can all be customized and then downloaded for use on your site.
"CSSMenuMaker.com is here to provide the average webmaster with tools to create custom, cross browser compatible website menus. Our menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our CSS menu generator an unlimited amount of times."
Right now CSS Menu Maker is seeking menu submissions. One lucky menu creator could win an iPhone for their efforts.
Breadcrumb Navigation CSS
Breadcrumb CSS shows how to create a CSS breadcrumb navigation system similar to the one used by Apple.
Article includes the html and css to create it and you can see some sample breadcrumb menus here.
How to Highlight the Current Page with CSS
CSS Current Page Indicator - a nicely written tutorial that shows how to use CSS to highlight the current page in the site's navigation system.
A good read for anyone wondering how this is done.
Accessible Expanding Collapsing Menu
456 Berea Street decides to clean up some code for an expanding/collapsing menu and offers ups the results with Accessible expanding and collapsing menu.
CSS Step Menu
CSS Step Menu - a good looking CSS Navigation menu. You can see an example of the CSS Step menu here.
Tabbed Navigation Using CSS
"This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. As an extra bonus you'll also learn how to switch tabs without loading the page more than once."
A nice tutorial which produces a clean, valid, cross-browser html and CSS menu that degrades nicely even if JavaScript, CSS and images are disabled.
DD Tab Menu: Standards Compliant, Two Level Tab Menu
Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles) "is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents."
DD Tab Menu has just received a complete script re-write with various improvements and offers five styles right out of the box.
CSS Dock Menu
CSS Dock Menu combines CSS with a bit of JavaScript via Jquery and a Fisheye component from Interface and some pretty icons to make a cool Mac-dock-effect navigation menu.
The article includes the code and a download zip package with all you need to get it running. You can see a demo of CSS Dock Menu here.
How to Make Sexy Buttons with CSS
How to make sexy buttons with CSS "will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS."
A nice CSS button solution, using the sliding doors technique.
A look at current trends in horizontal navigation
Horizontal Navigation; nine ways to skin a cat thought it would be fun to highlight some of the most commonly used techniques for designing horizontal navigation and they've done a nice job of it, including illustrations and descriptions of the current trends in css horizontal navigation.
CSS Glowing Tabs Menu
Dynamic Drive CSS Library- Glowing Tabs Menu "uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab "glows", by using the "Sliding Doors" technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu."
Solid Block CSS Menu
Dynamic Drive CSS Library- Solid Block Menu
"This is a lean, professional looking CSS menu that's draped in a solid two color background image. The divider between the menu items is simply a white CSS border. The style is extremely easy to customize thanks to the simple background image used."
A nice looking menu worth a bookmark.
Fancy Menu
In this article I'll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it's also cross browser (tested on Internet Explorer 6, Firefox and Safari) and accessible!
A good looking menu and worth a look if for no other reason than it's not another tabbed menu!
CSS Javascript power. Fancy menu
Control.Tabs: flexible, accessible HTML/CSS tab system
Control.Tabs - "a simple way to create accessible, flexible & unobtrusive tabbed interfaces in your applications or pages. It uses anchors and named elements to function, so browsers that do not support javascript will still be able to navigate through your tabs."
When I read the title, I was expecting an html/css tab system, so I was surprised to see a requirement for the Prototype javascript framework. But as I read on, I see that the main feature of this tab system is that it provides nice functionality for those who have javascript on, while degrading to still functional css/html for those who don't. The best of both worlds!
Assuming it works well cross-browser (which the site doesn't indicate), it's well worth a look see.
71 LInks to free CSS Menus
71 Free CSS Menus - a nice list of links to 71 free resources for CSS Menus. Nice round-up for anyone looking for ready-made CSS navigational menus.
Mini tabbed pages with CSS
Mini tabbed pages is A method of compressing short pieces of information into six mini tabbed pages.
The code has been tested to work in IE6 and 7, Firefox and Opera. I noticed a minor but still somewhat distracting flicker in Firefox 2 but it's still a nice way to display information.
Some nice, free css menus
13Styles.com - css menu styles, high quality css menus, website navigation menus - mostly free, list-based, lightweight, cross-browser, easy to implement css menus.
The newest menu, Fox, is not only good looking, it includes the photoshop template to easily change the color.
Overlapping tabbed navigation in CSS
Overlapping tabbed navigation in CSS
"Overlapping navigation is a real problem in CSS with the box model and browser support. It is possible though. This technique is advanced CSS and the tutorial assumes a good level of understanding of both CSS and XTHML." And in the next paragraph, the author even suggest you should avoid doing this at all if possible. But, if you're up for a challenge or just want to know how it's done, check it out.
Simple CSS Tabs
CSS: Simple Tabs | Mike’s Experiments - a nice, simple CSS tab navigation.
71 Links to CSS Tabbed Navigation Menus
Top 71 CSS Menus Navigation Tabs - name says it all, a whole raft of links to css tabbed menu examples.
Hoverbox Menu
Hoverbox Menu | Design Meme - a cool spin off of the hoverbox, this time for menus, creating a neat effect.
CSS Tabs with Rounded Corners
Inline CSS Tabs with Rounded Corners | Smiley Cat Web Design - a marrying of DOMTab and Nifty Corner for a nice information presentation.
Gallery of CSS Navigation Menus
CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase.
CSS Showcase of CSS Menus and Tabs
CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase - I really like these showcases - much better than a list of links. Here you can see all the options side by side. A go-to page for inspiration.
Mini Slide Navigation
Mini Slide Navigation | Sandbox | Stephen Clark (sgclark.com) - a variation of the SimpleBits horizontal slide navigation menu, powered by CSS and JS.
Creating a Dynamic Navigation Menu
CssDev by Andy Peatling - Creating a Dynamic Navigation Menu -a great menu, nicely explained, made with css and some scripting help. Zip file with all the needed files at the end of the article.
The Ultimate Tabbed Menu
Dragon Labs | The Ultimate Tabbed Menu is a complete tabbed navigation package. Plug and play for those who want it the easy way and customizable for those who know their way around.
Validating CSS Drop Down Menu
Validating drop down cross-browser menu - I've never been a huge fan of drop down menus but they work well with content-heavy sites, for sure. This one looks good, validates and works across browsers, which is important if you want all that content to be seen.
Nested Lists to Folder Tree
Max Design - Nested Lists to Create Folder Metaphore - nice use of CSS to create a folder tree.
Focus Slide Navigation
Sandbox | Focus Slide Navigation | Stephen Clark (sgclark.com) - I'm a sucker for things like this kind of cool navigation effect. Even though it relies on Javascript, it is sure to leave most with a "Cool!" reaction.
Another way to clear floats
Veerle's blog - display:table - It's always nice to have another tool in the CSS arsenal when working with complex layouts. This method uses the display property to do the job.
CSS Menu Generator
CSS Menu Generator :: Webmaster Toolkit - just punch in the details nd the generator producs the CSS and html for you.
Free CSS Navigation Menu Designs
Free CSS Navigation Menu Designs at ExplodingBoy - 11 free for personal or commercial use CSS tabbed navigation menus, using the Sliding Door technique. Some really good looking menus!
ADxMenu
aplus :: ADxMenu - good looking drop-down menu.
Centered Tabs with CSS
24 ways: Centered Tabs with CSS - part of the geek advent calendar series, with a useful technique for centering CSS tabbed navigation.
Flexible CSS Navigation Example
Resizable tabbed navigation with CSS
DOM-Scripted Lists Revisted
gazingus.org - DOM-Scripted Lists, Revisited - one of the originals in javascript navigation gets an update.
Cross Browser Fading Tabs
Cross browser fading tabs - some nice tabs with a fade effect, complete with code and a how-to.
Inverted Sliding Doors Tabs
Inverted Sliding Doors Tabs from 456 Berea Street is certainly nice looking navigation! Firefox shows a border effect on click that doesn't show up in IE, but IE doesn't show the nice hover effect, so not quite perfectly cross-browser, but still very, very nice.
Multi Level CSS Menu
CssCreator->Multi Level Menu - good cross-browser support and degrades to bulleted list in older browsers.
The Un-tab tabs
SimpleBits serves up the Un-tabs mine tabs which is very cool and all CSS.
CSS Tabs done 5 ways
SimpleBits
Dive Into Mark
Clagnut
Megnut
Unraveled
[Also via Web-graphics]
Subscribe
Subscribe RSS
Subscribe by Email
Categories
- Blogging
- Color Tools
- CSS Layouts
- CSS Navigation
- CSS Resources
- CSS Snippets
- Del.icio.us
- Design Elements
- Design Resources
- Digital Photography
- End of the Day Digests
- Everything Else
- Firefox
- Flickr
- Photoshop
- RSS
- Scripts and Software
- SEO and Marketing
- Tools and Generators
- Web Design
- Web Development
- Windows and Computing
Search etc.
About
Browse the Archives »