Breadcrumb Navigation with CSS Triangles. Did you know you can make triangles with pure CSS?
It's pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. View Demo Download Files The HTML Markup Let's keep things as absolutely clean as possible, and go with a simple unordered list with a "breadcrumb" class: <ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Vehicles</a></li><li><a href="#">Vans</a></li><li><a href="#">Camper Vans</a></li><li><a href="#">1989 VW Westfalia Vanagon</a></li></ul> The CSS First we'll ensure our list doesn't look like a typical list.
To create the triangle, we'll use the :after selector to make a pseudo element. Now onto the coloration. 30 Great Examples Of Drop-Down And Sliding Menus. While building a site for a client, I had to figure out the best way to display additional navigation in a horizontal menu (and not make it look like it’s 1999 again), so I went ahead and started looking for some inspiration.
I’ve found many sites that had drop-down and sliding menus and I thought you’d be interested in my findings. Please let me know what you think in the comment section. Know of any really cool drop-down and sliding menus that I missed? Share it with the rest of us! Carreras Con Futuro ↓ Apple Reviews ↓ Archer Group ↓ Energy Cell ↓ Artkasa ↓ Bnet ↓ BuySellAds ↓ Ink’d ↓ Daily RT ↓ Designers Couch ↓ Design Slurp ↓ Behance Network ↓ EctoMachine ↓ Exposition Universelle Des Vins & Spiritueux ↓ Flickr like horizontal menu. Do you like Flickr and its simple and clean interface?
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu: Download this tutorial Step 1: introductionI used a simple javascript function showMenu() to show/hide sub-menu: