Ego One - Pure | Fresh | First
Would you like to react to this message? Create an account in a few clicks or log in to continue.

We're Moving. So, we've disabled new registrations on this forum. The forum will not officially be released until 8 PM Pacific Standard Time (Friday, Sept, 9th, 2010)~ http://www.ego-one.net/

View previous topic View next topic Go down  Message [Page 1 of 1]

MrMario

MrMario
Manager
30 Best CSS Techniques for a Unique Navigation 3f87b13cCSS is a very important element of what we call a “structurally sound” web design. CSS turns strips of code and interactive features into a working design. This is especially true for CSS based menus. Giving your users a creative way to interact with pages, categories, and other aspects of your site is a great way to keep them coming back. Not only that, but your navigation will be easily accessible since it will stand-out. Your users won’t get lost, they’ll always know how to get to where they need.

If you want to find out the different CSS features you can incorporate into your navigation, it’s important that you view other menus as inspiration, and you know how they work. Below we’ve hand-selected 30 Best CSS Techniques for a Unique Navigation that are sure to bring creativity to your menu.


Advanced CSS Menu

30 Best CSS Techniques for a Unique Navigation Css-1
An in-depth, creative navigation tutorial.

Create Vimeo-Like Top Navigation

30 Best CSS Techniques for a Unique Navigation Css-2
A top navigation tutorial on virtually the same menu as Vimeo.com; structure wise. When you hover over the search box, a drop down menu appears and it gives you a few customizable options.


Overlapping Menu


30 Best CSS Techniques for a Unique Navigation Css-3-1
With this tutorial you’re able to create a menu that overlaps. It’s a pretty nice effect for a unique site.

Centered Tabs with CSS


30 Best CSS Techniques for a Unique Navigation Css-4
If you’re looking for an alternative to the sliding doors method, then this centered tab css tutorial is just what you need. It fully centers the tab in you navigation menu, and eliminates those left or right aligned mishaps.

Scalable CSS Based Breadcrumbs

30 Best CSS Techniques for a Unique Navigation Css-5
With this navigation technique the usability of your menu can increase. The code is simple and it only uses 6 CSS styles.

CSS Drop-Down Menu Framework

30 Best CSS Techniques for a Unique Navigation Css-6
This menu seperates HTML from CSS, and categorizes CSS types. You can create a nice drop-down effect.

Turning a list into a navigation bar

30 Best CSS Techniques for a Unique Navigation Css-7
Turn your menu list into a navigation bar with a background image structured through CSS.

Advanced CSS Menu Trick

30 Best CSS Techniques for a Unique Navigation Css-8
You can shift the focus of the user’s attention to the menu items you’re not hovering over. It creates a nice blur effect.

Javascript Dropdown Menu with Multi Levels

30 Best CSS Techniques for a Unique Navigation Css-9
This multi-level drop-down menu allows you to define several different sub navigation's.

Hidden Tab Menus

30 Best CSS Techniques for a Unique Navigation Css-10
This is a simple hidden tab menu that onfolds when you hover over the menu icon.

Inverted Sliding Doors Tabs

30 Best CSS Techniques for a Unique Navigation Css-11
Here you’ll find a creative sliding doors technique that lets you work with inverted tabs. Inverted tabs means that the bottom tab of the one you would currently be one lower and is left or right aligned.

Son of Suckerfish Dropdowns

30 Best CSS Techniques for a Unique Navigation Css-12
This is a easy to install and completely accessible dropdown navigation menu. Your menu can also have multiple-levels as well.

MenuMatic: Vertical Menu Example

30 Best CSS Techniques for a Unique Navigation Css-13
MenuMatic is a MooTools class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.

Circular Menu with Sub-Menus

30 Best CSS Techniques for a Unique Navigation Css-14
Nice tutorial for a circular menu that lets you add a sub menu level of smaller icons. It adds a smooth effect to the navigation process.
Sexy Drop Down Menu with jQuery and CSS

30 Best CSS Techniques for a Unique Navigation Css-15
With this tutorial you’ll learn how to create a “sexy” drop down menu that will use CSS and jQuery to create a drop down effect.

CSS Sprite Navigation Tutorial : Ehousestudio

30 Best CSS Techniques for a Unique Navigation Css-16
This tutorial will help you build a succesful CSS navigation using sprite images. You’ll be able to enhance the load time of your menu as well.

Rounded corner CSS navigation bar with jQuery

30 Best CSS Techniques for a Unique Navigation Css-17
You’ll learn how to add some nice round corner effect to your anchor elements with jQuery, for your navigation, without using any image.

Designing the Digg Header


30 Best CSS Techniques for a Unique Navigation Css-18
This menu contains a fluid width, and enables you to develop a smooth drop-down effect where you can place emphasis on important sub-menus.

Mac Style Dock Menu Navigation Bar in CSS

30 Best CSS Techniques for a Unique Navigation Css-19
This more for those Mac fanatics or if you have an Apple themed site and wish to enhance the look of your site by implementing a menu that fits your overall design.

The Menu menu

30 Best CSS Techniques for a Unique Navigation Css-20
This a great CSS menu that “comes to life” after hovering over a menu item, this automatically reveals a sub-menu.

CSS Navigation with Glowing Icons

30 Best CSS Techniques for a Unique Navigation Css-21-1
Here you’ll find a beautiful CSS menu technique for creating glowing icons.
Woody CSS Menu

30 Best CSS Techniques for a Unique Navigation Css-22
Woody is a CSS menu that’s simply ready to use and has been tested on several browsers such as Internet Explorer and Firefox.

CSS Block Navigation Menu

30 Best CSS Techniques for a Unique Navigation Css-23
This CSS menu technique allows you to develop a navigation menu that has item with descriptions.

CSS Hover Button

30 Best CSS Techniques for a Unique Navigation Css-24
Create CSS button-style navigation menu by checking out this excellent tutorial.
Matte CSS Menu

30 Best CSS Techniques for a Unique Navigation Css-25
Matte is a simple CSS menu with rounded corners using two small images only from 13 styles.

Fancy Sliding Tab Menu

30 Best CSS Techniques for a Unique Navigation Css-26
Beautiful navigation technique that brings down the menu you’re currently on by hovering over the next one.

Aplus ADxMenu

30 Best CSS Techniques for a Unique Navigation Css-27
This technique is a pretty basic example of an organized and well designed menu tabs.

DOMTab

30 Best CSS Techniques for a Unique Navigation Css-28
DOMtab is a Javascript that turns a list of links connected to content sections into a tab interface.

Drop Down Menu with Nested Submenus

30 Best CSS Techniques for a Unique Navigation Css-29
Create your own drop down menu with nested sub-menus using CSS and a bit of Javascript.

Nicely Organized Tabed Menu

30 Best CSS Techniques for a Unique Navigation Css-30
Example 4 of these menus is a simple, well organized menu that would better fit a solid color layout.




Milanče

Post Wed Jun 02, 2010 1:58 pm by Milanče

Cool..

SYKO

Post Thu Jun 03, 2010 7:36 pm by SYKO

nice techniques but including the Examples may be very nice. Smile

Kryptonian

Post Thu Jun 03, 2010 8:17 pm by Kryptonian

What? Click one of the images. It will bring you to a article on how to make it. It will also offer a demo. Big Grin

SYKO

Post Thu Jun 03, 2010 8:19 pm by SYKO

Opps! are there images?
I haven't seen anything. Ohh, I knew. My ISP banned the link for dat pics. Sad

CodyCFS

Post Fri Jun 04, 2010 10:29 am by CodyCFS

Very nice Mario. There are about 7 or 8 up there I will look at. Nice post.

Anonymous

Post Sun Jun 06, 2010 6:31 am by Guest

Thanks mario for this!

Anonymous

Post Sun Jun 06, 2010 9:03 pm by Delta

a big big thank from mee

UnknownData

Post Sat Aug 28, 2010 8:21 pm by UnknownData

Yeay things like that rocks! Big Grin

Death the Kid

Post Mon Aug 30, 2010 2:38 am by Death the Kid

Very good, thank you very much, I serve a lot. Again thank you very much.

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum




Site powered by Forumotion
Copyright 2006-2013 | JalokimGraphics | Ego-One
<!-- <script type="text/javascript"> var vglnk = { key: '0d80ae9fe71cec9484f682bd59232f9e' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <div id="Forumactif_Video"></div> <script type="application/javascript"> //<![CDATA[ var slmadshb = slmadshb || {}; slmadshb.que = slmadshb.que || []; slmadshb.que.push(function() { slmadshb.display("Forumactif_Video"); }); //]]> </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script></body></html><strong><a href="https://www.forumotion.com/" target="_blank">Create a forum on Forumotion</a></strong>&nbsp;|&nbsp;<span class="gensmall">&copy;</span><a href="https://www.forumotion.com/phpbb" target="_blank">phpBB</a>&nbsp;|&nbsp;<a name="bottom" href="https://help.forumotion.com/" target="_blank">Free forum support</a>&nbsp;|&nbsp;<a href="/abuse?page=%2Ft751-30-best-css-techniques-for-a-unique-navigation&amp;report=1" rel="nofollow">Report an abuse</a>&nbsp;|&nbsp;<strong><a href="https://www.forumotion.com" target="_blank">Forumotion.com</a></strong>Derp