Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 29 2013

06:30

Building an Interactive Navigation Bar with HTML/CSS


  

A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

April 15 2013

13:00

Creating a CSS3 Dropdown Menu – Video Tutorial

We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, around 40 minutes, this is because I have gone into great detail explaining the process. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3.

Sponsored post
feedback2020-admin
14:56

April 08 2013

07:00

August 13 2012

07:00

How To Create a Pure CSS Dropdown Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

View the pure CSS dropdown menu demo

The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.

View the pure CSS dropdown menu demo

The HTML Structure

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a></li>
		<li><a href="#">Articles</a></li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a></li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.

HTML menu

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The CSS Styling

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the display:block; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

HTML menu

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

HTML menu

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

HTML menu

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

The Completed Pure CSS Dropdown Menu

View the pure CSS dropdown menu demo

View the pure CSS dropdown menu demo

April 28 2012

21:00

Grab Your Readers’ Attention with Notification Bars

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

People who visit your site have the attention span of a 5-year-old in a room full of puppies with a bagful of candy. You need to get their attention right away or you may lose them forever. To focus their attention on the right bit of information, try using a notification bar.

Hosted WordPress site owners have a lot of notification bar choices. Most are plugins, but some themes even come with this option. A notification bar is an attention getter, but not as annoying as pop up windows.

1. Foo bar ($14)

Foo bar is a really popular notification bar choice for self-hosted WordPress sites. Actually, Foo bar is one of the only brandable notification bars out there. This means it will integrate a lot better with your site and not look like a generic add-on or an after thought. By adding your social icons, RSS and other generic text into your Foo bar, you can save space in your sidebar or header.

When creating your notification bars, you don’t need to stop at just one. You can create an unlimited number of Foo bars. Having different bars can be super useful because it also gives you the choice to add different Foo bars to different pages on your site. Think about being able to direct people visiting different landing pages or blog posts to a specific product or page on your site.

2. Fading Menu ($12)

Fading Menu is a different kind of notification bar. While it does give you a notification bar to spread whatever message you’d like, Fading Menu is also a separate navigation bar. The new notification/navigation bar will stay at the top of the screen while the visitor scrolls down the page. The notification bar is not one of those that stalks your visitor as they read your page, it is actually useful.

Having a navigation bar following your site visitor as they scroll saves them from needing to go all the way to the top of the page to subscribe to your RSS feed or like your page on Facebook. You can add your social network icons and links to Fading Menu. You can have a totally different navigation bar following the visitor down then you have static on your page. Having a secondary navigation bar means you could direct someone to your most popular posts in certain categories if you so choose.

3. Hello Bar

Hello Bar is a free clean and simple notification bar. When setting up Hello Bar, you have a bunch of neat options. For starters, if you prefer not to have a plugin on your WordPress site or aren’t running the WordPress platform, you can add the custom code to the site instead.

The notification bar can show up after a set amount of time, kind of like the pop up windows, but less obtrusive. This is a great way to ask them if they have followed you on your social site of choice. You could even have it show up after 1 minute so you know they are not just a random person who came across your site from an incorrect Google search.

Out of all the notification bars listed, Hello Bar is the only one with movement. What I mean is, you can have the notification bar try to get the visitor’s attention just in case they didn’t notice. This is great for newsletter sign ups or special event notifications.

4. Easy Heads Up Bar

Heads Up Bar is a simple notification bar with a simple setup. While Heads Up Bar isn’t as elaborate as some of the paid options, you can still create an unlimited number of notification bars. These notification bars can have expiration dates attached to them. Again this is ideal for letting visitors know of a promotion or an event.

Heads Up Bar lets you choose where you want the bar to display. This comes in handy because you might have a different notification bar on your homepage than you do on your interior pages/blog posts.

5. Notification Toolbar

Out of this group, Notification Toolbar is the only notification bar strictly meant for the footer of your site. You are given very basic settings to change the color of the bar and font and the opacity of the whole bar. When you need a quick little notification, Notification Toolbar will do the trick.

6. Quick Notice Bar (Free or $10)

Quick Notice Bar has a free and a paid version. While the default Quick Notice Bars look the same, the free basic plugin is pretty limited in comparison. The bar and font colors can be modified. So can the size and the weight of the font.

Adding a link is easy in Quick Notice Bar. There is a separate box for the link and link label. When you have these adjustments made, you can access the CSS styling code for the Quick Notice Bar.

If you choose to pay the minimal $10, you get several very useful features. The first feature being custom positioning. The bar can be set at the top, bottom, floating or wherever. The paid Quick Notice Bars can be scheduled to start showing up on a Monday and end that Friday night. How great would it be to not need to remember to take down the notification bar when your promotion ends at midnight?

A feature unique to Quick Notice Bar is traffic stats. You will know how effective your notification bar actually is. You could also A/B different notification bars by scheduling them on and off to see what works best. And while you’re at it, what about being able to add custom code? Well you can do so with the paid version! Add an affiliate link or other money makers at the top of the screen.

Conclusion

Site owners and designers are always looking for innovative ways to lead site visitors down the funnel towards an end result, be it buying something or signing up for a newsletter or something else. A notification bar is a simple and effective way to grab some attention in a way that isn’t that annoying for most visitors.

What are your tips for getting the attention of your visitors and leading them in a certain direction? Feel free to share with us in comments.

March 23 2012

10:00

Tips on Designing the Perfect Navigation System for Your Website

Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can be a big turn off for your readers if they aren’t planned well. Although webmasters assume that a simple menu is enough, most of the time yet they forget that a navigational menu has its own requirements. Sometimes a simple to use navigation will do just fine for your website design while at times you will have to click a lot of links into your navigational menu so as to compliment the various branches of your website.

This discussion will pick up some of the obvious forms of websites and then shed some light on how the navigational menu changes for each of them. Hold tight and don’t leave!

E-Commerce Websites

The buzz of today for developed nations and the future for upcoming nations, e-commerce has evolved as one of the most current businesses on the Internet and almost all of them have been able to earn their share of fame during their lifetime.

One common point between all e-commerce websites is how complex they are. No matter how simple a e-commerce portal is, at the end of the day lot of navigational links have to be used so that readers can order multiple items or continue shopping from the cart. This is when it becomes important for webmasters to come up with the perfect blend of simplicity and complexity that keeps readers on that e-commerce portal.

What better example then Amazon when it comes to an e-commerce portal. Amazon has been successful in coming up with a very simple to use navigational menu which leads to almost every category under which the company features products. Also, the search system of Amazon is next to perfect which almost always results into satisfactory queries.

One must understand that it is this two type of navigational system (menu+search) which helps Amazon to keep visitors engrossed.

News Websites

Ah, news websites! They are famous for their content heavy presentation. I am not sure if there is even one news website which I have read thoroughly. The amount of content generated by a news website is enough to confuse readers. And this is when a sorted navigational system becomes important.

Imagine a news website like New York Times with just a top navigational menu that links to Home and few other important categories. Nobody would understand the depth of the website if they used such an incomplete navigational system. It is important to understand that the general perspective of a reader for a news based website is a lot of content with a complex navigational system. So, if you are including a very in-depth navigational system for a news based website then you’re doing things right.

Blogs

Well, which discussion on navigational menus would be complete without talking about blogs? In this section we will target blogs that are content rich. One can argue that niche specific blogs can run with a fewer number of categories so the navigational menu can be avoided in these cases. In this case, we must understand that it is advantageous for niche specific blogs to divide their content into various categories. Now, these categories need to be listed in the navigational menu so that visitors can dig into various forms of content on that blog.

This is where it becomes very important for content rich and niche blogs to have all its major categories listed on every page of the blog so that navigation is a cakewalk.

On the whole, a blog can have following navigational styles to check old content which is not available on the home page:

  • Pagination - This is placed at the end of each page and gives direct links to other pages of the blog.
  • Archive Page - Some A-List blogs use archive pages which can be used to display a complete archive of articles easily accessible from that a single page.
  • Categories/Tags In Sidebar - This is a common feature used by most blogs. A list of categories or tags used by the blog can be shown on the sidebar so that they are easily accessible from every page.
  • Header Menu - This happens to be an obvious form of navigation in blogs. It can be used for linking to the most readily used pages like the Contact and About Us pages. Some blogs use the header menu to link to major categories.
  • Footer Navigation - In the last few years blogs have come up with a footer navigation where a huge footer is used to link back to literally everything on the blog. This footer can be used to connect categories, pages and tags together.

Please understand that it is the format of content and the amount of visitors that will decide what sort of navigation a blog should use. Usually it depends on the blog’s webmaster to do some form of A/B testing to understand what suits the blog the most.

Corporate Websites

Corporate websites can show extensive variations in their style. While some of the corporate websites are used as a platform to represent an already famous company. Such websites basically are the face of the company without any other meaning whatsoever. Such corporate websites keep the customers informed and that is it.

On the other hand there are corporate websites that will keep try to entice new customers. They play a different ballgame altogether but still, at the end of the day, they are corporate websites. The professionalism reflected from these websites is almost always similar.

It is this professional factor that forces corporate websites to include the least amount of navigation links. Usually, a header menu with links to basic pages is all that is required to complete the navigational section of a corporate website. To add the Midas touch a webmaster can use footer based menu if the website has lot of content that can be admired by the visitor. The footer menu will never play down the professionalism factor of the corporate website.

Review-based Websites

Review-based websites cover a lot of area and various niches all in one platform. Usually such websites target consumer oriented products and provide a platform where users can leave comments or reviews regarding a respective service.

The problem with such a website is that due to a huge amount of content which is divided into various niches, it becomes almost impossible to cover all of it in one navigational style. This is when the menu style show in the image below can come in handy.

Review based websites will use huge drop down menus which are almost like a new pop up opening on every mouse over.  This style of navigational menus gives the review based websites ample amount of space to showcase almost every category without making it look congested. White space matters!

Conclusion

Not yet done, folks! But I hope that you have an idea of how important navigational menus are and how they change without us noticing them. See, the point is that navigational menus must not be a point of concern for the website visitor. They must blend with the website and its content in a manner that they look perfectly appropriate with that respective website. Get the idea?

April 19 2011

17:33

Showcase of Creative Navigation Menus: Good and Bad Examples

Advertisement in Showcase of Creative Navigation Menus: Good and Bad Examples
 in Showcase of Creative Navigation Menus: Good and Bad Examples  in Showcase of Creative Navigation Menus: Good and Bad Examples  in Showcase of Creative Navigation Menus: Good and Bad Examples

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.

We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs; in some contexts, an interactive menu does make sense, especially when it comes to promotional websites such as online campaigns, portfolios or advertising — on these sites, interactive navigation can lend some dynamics to an otherwise dull and boring experience.

Below we present some interesting examples of website navigation menus — they are not necessarily very usable, but they are certainly inspiring and original and thus you could build your designs upon the ideas presented below: use them, tweak them and improve upon them. We also discuss the potential usability problems of each of the techniques presented in this post. Before using a similar technique in your design, please make sure that it fits the context of your design. Test, validate and verify that the technique would actually make sense in your website. Approach these techniques with caution. Let’s take a look at some interesting ways to present navigation menus content for both smaller promotional pages and deep informational websites.

Parallax and Scrolling

Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World site.

Nike Better World

Rich graphics and parallax 3D effects

Www Nikebetterworld Com-2011-3-11-20 18 20 in Showcase of Creative Navigation Menus: Good and Bad Examples
Vertical scrolling navigation with parallax background effects

On the Nike page, the effect is visible when a user scrolls the page vertically. The background images seem to overlap, as if they were piled up in a slide deck. This effect is particularly strong when you click on the circles in the right area of the site. Notice the dashed horizontal and vertical lines which are displayed as you scroll the page. They vividly connect parts of the site and help to create a more consistent user experience.

One drawback of the navigation here is that the navigation controls are very subtle. In fact, on many sites which use this technique, the strong emphases are on the rich, detailed illustrations which make it a bit more challenging to actually find the navigation. In this example, perceiving the dots on the right side as navigation and not mistaking them for part of the design may take a while. Still, a very original and memorable design.

Rosso Carmilla

Horizontal parallax animation

Www Rossocarmilla Com-2011-3-11-16 11 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling with parallax animation

Rosso Carmilla features an interesting twist on a combination of the Parallax-effect and scrolling navigation. The designer uses a horizontal rather than a vertical orientation, with a classic navigation menu at the top. As the user hovers over visual elements, they seem to move, creating the illusion of depth. The limited color palette and original illustrations work very well with the animation to create a memorable experience. The subtle animations are visible only when the user hovers over the content area.

The idea is very interesting, and the execution is done fairly well. However, a larger font size and additional navigation controls for a smooth transition between sections might improve the overall usability of the site: the horizontal scroll bar at the bottom of the page isn’t easy to notice and isn’t very comfortable to use.

Discover Tennessee Trails & Byways

Horizontal scrolling navigation, clarified.

Tntrailsandbyways Com-2011-3-11-16 15 37 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling with parallax animation and clarified navigation

Discover Tennessee Trails & Byways incorporate a “trail viewer” navigation for their users. The designers of the site use the same idea of horizontal scrolling navigation with a Parallax animation, but they decided to explain to users first how to use the navigation on the site. Usually, this is not a sign for an effective navigation, but it works quite well in this example, especially because the overall design appears to be very novel, playful and experimental to users anyway. In the case of uncommon or particularly innovative design techniques, this kind of instruction might be necessary until users understand the paradigm of the new navigation pattern.

When the user clicks on a trailer icon, further related details are displayed in a lightbox. Also notice how the “map” with trailer on the right side moves when the user uses the main “trail viewer” navigation. The other interesting navigation menu on the site is the one displayed at the bottom of the page; when a user selects an area, secondary options are displayed in the menu on the right side and this selection doesn’t change wherever the user’s mouse is. This navigation menu is also very nicely integrated in the overall site’s design.

Siebennull

‘Cluttered desk’ meets Parallax

Www Siebennull Com-2011-3-11-16 18 33 in Showcase of Creative Navigation Menus: Good and Bad Examples
A unique and original take on the ‘cluttered desk’ style

Strikingly original, Siebennull features a’cluttered desk’ style wooden theme, along with a 3D feel provided in part by shadows and other realistic graphics and in part by the Parallax effect which is applied to the whole page. The overall effect feel very interconnected without too much clutter.

One pitfall with an animated background, however, is that the background doesn’t necessarily hold still while the user is viewing something in detail, whether in a model box or a simple zoom-in. This can make it more difficult to read large blocks of text. The page does feel a bit difficult to focus on due to a strong Parallax-effect. This is probably an example of the Parallax-effect being used too strongly, thus deteriorating the purpose of navigation.

Storytelling

It’s common practice to keep the design as simple and intuitive as possible, making it very easy for the user to click from one page to the next, almost mindlessly — “don’t make the user think” is the rule. However, you could as well engage users on your site, making them think about what’s going on in the page and involving them in the experience on a deeper level. For instance, you could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with.

One way to make your visitors feel involved is to turn the website into an interactive journey. While users interact with the page, they can learn something along the way, being baffled by the originality and uncertainty of the site. This technique is probably best-suited to promotional landing pages rather than content-heavy websites. If a story is intriguing and presented in an interesting, perhaps unconventional way, it will capture users’ attention and encourange them to continue through to your site’s call to action. A few fine examples of these types of navigation are highlighted below.

Ben the Bodyguard

A narrated landing page

Benthebodyguard Com-2011-3-11-16 27 0 in Showcase of Creative Navigation Menus: Good and Bad Examples
An exciting user experience, creating user-engagement with design and effects

The designers of the Ben the Bodyguard landing page have chosen a very memorable metaphor for their main character. Instead of presenting a generic “coming soon” page with a description of the upcoming service, the site effectively tells a story. The main tagline of the page is “A Frenchman protecting your secrets. Yes, seriously.” Next to this statement, a description of the tool is presented subtly. The mysterious character is displayed in the background, yet it very well captures users’ attention and interest.

The actual interesting part of the page happens when you scroll the page slowly. If you pay attention to illustrations and read all the details presented, you can watch as a story unfolds. While the narrator walks down the street, he gives you some explanation, but only enough to raise your interest. As you keep scrolling, the story reaches its climax and ends with a prominent call-to-action buttons. Notice that the design is responsive and the illustrations adjust to the user’s viewport. On the whole, it’s not classic navigation, but it’s not a traditional site either. Ben the Bodyguard is a remarkable website and storytelling works very well in this context of a promotional piece. That’s the reason why the site has received so much attention when it was initially released.

Youzee

Smooth, gentle storytelling

Youzee Com-2011-3-11-16 21 26 in Showcase of Creative Navigation Menus: Good and Bad Examples
Smooth, gentle parallax animation

Youzee is another example of a smooth, vertical one-page scrolling navigation which employs storytelling. The page has the main navigation at the top, yet it is not linked to separate pages, but rather to the sections of the loaded page. In fact, each section slides up neatly, with a bit of animation but not enough to make the user dizzy.

Notice how carefully the designers use storytelling to involve the user in a story and engage them in learning about the tool. Opposite to Ben the Bodyguard, the design doesn’t rely heavily on a character, but rather uses more familiar, existing metaphors to unfold the story. The main area on the top isn’t saying what the service is about; the user learns it along the way as he scrolls the page. Also notice how well designers use the “Turn on” metaphor for the button on the top of the page; it looks as if it wanted to be clicked on and responds appropriately to a click. Well done, guys, well done.

Scrolling Navigation

Tried and true, scrolling navigation is a simple and elegant way to guide users through your content. Many designers are experimenting with scrolling navigation on single page designs which accomodate the full information of a website on one page rather than spreading it across multiple pages that would load separately. Usability studies are required to determine if this navigation pattern is more effective than a classic one, and it would be wrong to apply it to contexts without verifying its usefulness first. Some ways of making your scrolling navigation unique are highlighted below.

Polecat

Back to the basics

Ipolecat Com-2011-3-11-16 28 16 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple solid scrolling navigation

Polecat is a yet nice example of a single page site with scrolling navigation. The primary navigation in the upper right corner is very minimal, plain text almost, but it works well because it’s not in the way; it’s clearly available and makes the user feel like they know exactly where they are. The illustrations are unique and engaging. When you visit the page for the first time, you might feel overwhelmed with a number of information items thrown at you, but this feeling goes away shortly after the site is explored in more detail.

When a navigation item is clicked, the page smoothly scrolls to the chosen section of the page. The interesting part is that various parts of the page are clearly divided using distinctive background colors, so the user always knows exactly where a section begins and where it ends. Also, each section is vividly illustrated, leaving a lasting and memorable impression. It has a more interesting and engaging design for a portfolio website than many of the similar websites out there.

The main drawback: at first glance, it’s not quite clear which elements are clickable and how the navigation works, which can be a bit confusing at first.

Cornerd

Simple vertical scrolling navigation

Cornerd Com-2011-3-11-16 29 28 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple vertical scrolling navigation

Very much like Polecat, Cornerd features lots of illustrative eye-candy. The monster theme is working very well and subtle eye movements of the monsters create an inviting, playful atmosphere. The designer Denise Chandler does not take herself too seriously and this is exactly what invokes empathy and sympathy on the site, making it easier to develop trust for designer’s ability to produce engaging and attractive work.

The sections of the page work well, but a fixed navigation at theop might really help to establish more of a sense of freedom, especially in the long sections like the portfolio section. Instead of that, the user is only provided with the option to move back up.

Curious Generation Group

Single page scrolling with a twist

Curiousgenerationgroup Com-2011-3-11-16 34 53 in Showcase of Creative Navigation Menus: Good and Bad Examples
Single page scrolling with a twist

While clean and organized, Curious Generation Group feels a bit unexpected with its colorful round shapes. A simple static navigation bar at the top is both subtle and plays well with the overall design of this website. Sometimes a fixed navigation bar can feel clunky and distracting, but this one feels light and airy with its transparency. The positioning of the content works well with the animation of the scrolling and does a good job of leading your eye through the website. Notice that all single areas are interconnected: for each area, there is a sidebar navigation displaying further navigation options. A very vivid, colorful and memorable design.

Eric Johansson

Riding on a scooter

Ericj Se-2011-3-11-16 25 45 in Showcase of Creative Navigation Menus: Good and Bad Examples
Riding on a scooter, featuring parallax animation

Eric Johansson does a couple of things that make the exploration of his site interesting for the user. The page provides subtle cues on how to use the navigation and there is also a (kind of) horizontal scrollbar which appears within the context of the page. It’s a small difference, to have a scrollbar a few pixels above the bottom of the window as opposed to using the browser scrollbar itself, but it provides almost enough distinction to make it clear that the user is supposed to click and drag.

As the users scroll the page, they need to look out for arrows and handles that need to be clicked on in order for further navigation options to be displayed. Eric is playing with the users, and does so in a very unique way. Users that do not feel comfortable with it are nevertheless provided with the option to View the extended & “normal” site. The graphics on the page could be improved a bit to make the design look a bit realistic, but maybe it is designed this way on purpose. But it would be great if the users could scroll the page without necessarily using the integrated scroll bar on the bottom of the page (see Scroll Page Horizontally With Mouse Wheel).

Haunted Cathouse

Vertical scrolling navigation with storybook graphics

Haunted Cathouse in Showcase of Creative Navigation Menus: Good and Bad Examples
Vertical scrolling navigation with storybook illustrations

Haunted Cathouse is a yet another, very detailed and very illustrated page which breaks the flow of the page by displaying unique illustrations between the sections of the page. As the user scrolls vertically, he can either see the current section, jump to the previous one or to the next one.

Clicking on the little owl in the lower right corner reveals a slide in navigation bar at your service wherever you are on the site, a better indicator however may save the visitor some time. While some users may be happy to start scrolling away on their mouse to get to the content, in this particular design it might be useful to provide multiple options. A top-level navigation bar also provides a way to highlight what kind of content users can expect to find below.

Sam Web

Horizontal scrolling within horizontal scrolling

Www Samweb Com Br-2011-3-11-16 36 42 in Showcase of Creative Navigation Menus: Good and Bad Examples
Horizontal scrolling nested within horizontal scrolling

Sam Web’s horizontal scrolling panels, while a fairly classic navigation model, are very cleanly executed. It’s also nice that some sections slide horizontally while the contact link scrolls to the bottom, since that element is present globally.

The interesting thing here is the nested horizontal scroller on the portfolio page. Since it scrolls in the same direction as the main content area, but isn’t controlled by the same navigation, it has some potential to confuse users. The left and right arrows are visual indicators that something is different about this section, but it also might benefit from being a slightly different kind of scroller, or using some other interaction to navigate that content. It’s a tricky thing, finding a slick way to add navigation to subcontent already inside of some sort of interactive navigation.

Denny’s Restaurant

Too much of anything is bad for you

Dennys in Showcase of Creative Navigation Menus: Good and Bad Examples
Combined horizontal and vertical scrolling

The designers of Denny’s Restaurant probably overshot when searching for a way to accommodate a lot of content. The combination of horizontal and vertical scrolling is rather disorienting than helpful. Without the small hint on the home screen, the user may even miss the content only reachable through the extra vertical scroll. Additional content is hidden in sliders and it seems easy to get lost. In addition to being confusing, the site is not very friendly to mobile users, looking to order or find a restaurant on the go. The site might create a feeling of “fluid content” which is a bit difficult to grasp and focus on, since everything is moving; everything is interactive and everything is changing. The design could use a bit more calm.

Experimental Navigation Menus

It seems that designers often feel a bit underwhelmed with classic navigation pattern and inventing new methods of navigation or just add a new twist to convenient design patterns. The sites featured below present navigation in some interesting ways.

Ferocious Quarterly

The more unconventional tabs

Fe Rocious Com-2011-3-12-12 53 41 in Showcase of Creative Navigation Menus: Good and Bad Examples
Interesting illustrations

Ferocious Quarterly’s tabs in the upper section of the site are a little out of the ordinary. The single fact that they are presented in a different way, creating an illusion of depth, makes the design stand out a bit. A good example of how a small detail can make an otherwise quite unspectacular design look a bit more interesting.

Zut Alors

Pop-up-mania at its best [WARNING: First five seconds may cause a headache!]

Zutalorsinc Com-2011-3-11-16 42 27 in Showcase of Creative Navigation Menus: Good and Bad Examples
Front and center tabbed navigation

Overall, ZUT ALORS! is extremely avante garde and very non-traditional. The large front and center letters are the only content on the page, and they are the navigation. Each letter pops open a series of thoroughly arranged pop-ups with subsequent page content.

While this approach is unique and bound to stand out, it will also deter average users. The short, simple statement on the landing page isn’t very informative and makes the user get confused. The pop-up secondary pages could backfire though: if the user has many windows open, the new opened ones won’t necessarily be the primary focus, which could make the design confusing. Although it is possible that that was the intention of designers in the first place. A very weird, noisy and extremely memorable design. Please do not try this at home.

Method Design Lab

Up-to-date news

Method-Design-Lab in Showcase of Creative Navigation Menus: Good and Bad Examples
Graphic equalizer selector

Method Design Lab’s menu to follow their feed is one of a kind. Following their activity on the site is made easy by the graphic equalizer-like history in the top right hand corner. Clicking on an hour brings up all posts, media releases and tweets of the past hours. Differentiating between the different types is easy since each is assigned a specific color. A click on one of the news bubbles pops open a window with the actual message. Both the idea and the implementation are quite refreshing and do not overstrain the visitors patience.

The Web Standards Sherpa

Skipping through content

The-Web-Standards-Sherpa in Showcase of Creative Navigation Menus: Good and Bad Examples
Clear and easy — as long as the content is limited

The Web Standards Sherpa basically comes without much of a navigation. The content is presented on slides that can be skipped through. The arrows clearly indicate the preceding and following articles. While it is still manageable to skip through less than ten articles, this type of navigation is of no greater use once more than twenty articles are up for view. The link to a list of all published articles as well as the search function takes care of this. A level deeper into the site, the horizontal navigation only consists of three clear options that leave no one in the dark about their whereabouts.

BonLook

Illustrated Drop-Down Menu

BonLook1 in Showcase of Creative Navigation Menus: Good and Bad Examples
Offering choice by shape using pictograms

BonLook features a nice example of a clean and simple illustrated drop-down menu. Choosing glasses by shape instead of brands makes the product catalog easier for any customer’s browser. In general, using pictograms in menu contexts eases orientation and helps customers find what they are looking for.

Design Intellection

Right-side dynamic navigation tabs

Design-Intellection2 in Showcase of Creative Navigation Menus: Good and Bad Examples
The right-hand navigation changes its appearance

The guys at Design Intellection present their portfolio-style site with a tab navigation on the right hand side. Interestingly enough, the navigation changes appearance when scrolling into the context section of each page, replacing the original literal menu with small icons. A click on the icons brings the user back to the top of each section, giving them a quick hint that the icon style is simply a smaller version of the main menu, not a submenu for the specific content section.

Generally a nice and intuitive menu style worth adapting and easily extended to cover subsections of content.

Bernat Fortet Unanue

A creative and interesting way to present your work

Bernat-Fortet in Showcase of Creative Navigation Menus: Good and Bad Examples
Clear and interesting categorical menu design

Fortet features 22 categories of work in the form of circular navigation buttons. The full menu reappears at the end of every page, making the site easy to skim through. Even though it is quite space intensive, the user is already used to its look and recognizes the visited categories. Another example of a clear visual indication contributing positively to the look and feel of the site.

Lega-Lega

Intuitive and clear pictograms with roll-over titles

LegaLega in Showcase of Creative Navigation Menus: Good and Bad Examples
Straightforward Navigation

The Lega-Lega is simply structured and slick. The menu only consists of seven categories, each featuring a single layer. Only minus: the horizontal scroll-bar may easily be mistaken for part of the layout rather than being recognized as a scroller. Adding a mouse-over effect might fix the issue. A clean and easy site with straightforward navigation — you certainly will not get lost here.

Bluecadet Interactive

Clean submenu

Bluecadet in Showcase of Creative Navigation Menus: Good and Bad Examples
Letting the user choose the category

Bluecadet sets an example in implementing a clean version of a graphics-heavy submenu. The design features a slider on the right side; as the user browses the items of the slider, the background image changes as well. Once an item in the navigation is chosen, the page displays the previous and next projects as well as provides a link to get back to the main menu. Also, the user can personally check the categories being displayed.

Danilo Iurlaro

Creative animation effects

Www Daniloiurlaro Com-2011-3-11-16 47 111 in Showcase of Creative Navigation Menus: Good and Bad Examples
Creative animation effects

Danilo Iurlaro features a creative use of scrolling animation effects, and it certainly stands out in a crowd. However, the text that jumps down from the top whenever a navigation item is clicked is truly annoying and distracting. At first, it gives the impression that this text is the title of the page, not just a transitional graphic, which actually isn’t the case. Letting the users scroll down manually to view the actual content with such a large navigation area is quite a challenge.

When using novel navigation techniques that many users might be unfamiliar with, it’s really important to utilize clear labelling to help them find their way through the site.

Fantasy Cartography

A map of navigation

Www Fantasy-cartography Com-2011-3-11-17 0 36 in Showcase of Creative Navigation Menus: Good and Bad Examples
A map of navigation

Fantasy Cartography is a site showcasing maps, with navigation that is modelled after a map itself. While the content sections are basically a take on scrolling navigation, the organization and layout of the navigation options is unusual. The site is also full of ‘soft effects’ which tie it well in with the illustrations.

Clear visual indication using the link-corresponding dots correlates the active tab with the displayed content. Labelling is key in atypical navigation situations.

C&C Coffee Company

Charming animation

Www Candccoffee Com-2011-3-11-16 43 13 in Showcase of Creative Navigation Menus: Good and Bad Examples
Simple and fun, animation that enhances the navigation without distracting from it

The upper navigation of C&C Coffee Company is an example of animated navigation that is minimal, simple, and although being dynamic, doesn’t force itself onto users. The dynamic navigation elements fit nicely to the overall design of the page which also contains other “hand-written” elements, giving the brewery a more personal, friendly touch. Still, having seen the animation once may be enough for some visitors.

Breadcrumbs

NOS

Context-sensitive breadcrumbs

Nos-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
Interactive breadcrumb

The top-level navigation in this example is really simple, but very clever. NOS displays sub-categories to the right of each top-level category when clicked, almost like a breadcrumb. This is a really interesting take and a good way to handle a large content-heavy site with a lot of categories. It lends itself well to the blog format where a lot of different new categories may be coming and going constantly.

MDM Bank

Persistent breadcrumb

Mdm-bank-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
Persistent breadcrumb

MDM Bank features a classic breadcrumb-style navigation. However, it not only keeps track of where users have been so they can always return easily to any given point, but clicking on the site map tab reveals the complete interactive map for easy pinpoint navigation throughout the site.

Sliding Sections

Sliding sections are a great way to display a lot of content in less space. You have the advantage of focusing the user into that specific content block at a time, which can be useful if you’d like to present certain information and are trying to not distract the user with other information at the same time. Below are some examples of effective implementations.

Directions

Accordion style navigation links

Directions Com-2011-3-11-16 45 5 in Showcase of Creative Navigation Menus: Good and Bad Examples
Accordion style navigation links

Directions is a well-executed example of sliding sections. There’s a lot of content on this one page, but it doesn’t feel overwhelming because not all of it is displayed at the same time. This is a good method for a site with a lot of links, or that’s just deep.

The secondary navigation is carried through to the secondary pages, so users won’t get lost. One suggestion, however, would be that if the navigation pattern would somehow reappear on the secondary pages as well, instead of the classic navigation. This might just help make the site appear a bit more striking and coherent.

Coexhibitions

Expand to see content

Co-Exhibitions in Showcase of Creative Navigation Menus: Good and Bad Examples
Expand the calendar elements

Coexhibitions basically is one big sliding menu. Clicking on the titles reveals information about past and current events taking place in their showrooms. Certainly a good choice for a site with limited content, even though an easy way back to the top is not offered. Hiding the content in sliders is comfortable. In this case it helps create a calendar of events taking place at the venue.

Bankwest

Multiple expanding levels

Www Bankwest Com Au-2011-3-18-15 52 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
Multiple expanding levels

Bankwest does not use sliding animations, but it’s a good example of a multi-tiered navigation system. They have a left-aligned top level navigation, which expands first vertically and then horizontally as the user navigates deeper. This is another good strategy for a very deep, content-heavy site. While it works very well as it is, a little JavaScript interaction allows users to peruse the deeper levels of navigation a bit more easily, making it even more effective. Notice the breadcrumbs navigation at the top of the content area: it supports the navigation and helps the users track their path throughout the website.

Elliot Lepers

Sliding boxes with captions

Viteungraphiste Com-2011-3-11-16 45 58 in Showcase of Creative Navigation Menus: Good and Bad Examples
Sliding boxes with captions

Elliot Lepers uses an interesting grid layout with interactive sliding boxes. They load quickly and the website is easy to navigate. The simplicity of the information being on the main page makes it extremely difficult to get lost, as there are always arrows to follow and to click. The colors are quite energizing and the content nicely organized.

The secondary pages for each project are also well-done. The big arrow on the left is the only navigation that appears on each, but since the primary navigation is the front page, it still perfectly serves its function.

Global Humanitarian Assistance

Hidden sections help deal with large amounts of content

Www Globalhumanitarianassistance Org-2011-3-11-16 54 52 in Showcase of Creative Navigation Menus: Good and Bad Examples
Hidden sections help deal with large amounts of content

One of the first things a user probably should notice on Global Humanitarian Assistance is the bright yellow left slide-out menu. It’s neatly executed, yet because all other elements are yellow, too, it doesn’t really jump to an eye. The site is very data-heavy and intended to provide visitors with access to many reports and case studies which are all hidden behind the yellow bar; in general, it’s a very neat and simple way to hide secondary navigation until it’s needed (context-sensitive navigation). An interesting idea: such slide-out panels are generally a good way for content-heavy sites to hide things while making them globally available. In this specific case, the secondary navigation panel could have been a bit thicker to attract the user’s focus.

Creative NZ

A lot of information in a small amount of space

Creative-nz-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
A lot of information in a small amount of space

Creative NZ features a “mega drop-down-menu”. This is a nice example of a navigation that makes good use of the space by adding classic navigation (like the contact form, advanced search, etc.) as well as informative blocks along the bottom of each one. If you’re going to use such a menu, it’s really worth taking the time to carefully study the content and make sure that you’re efficiently selecting the content to be included in each submenu.

Additionally, notice the categorized slider on the main page. By making use of categories, it actually presents multiple slideshows at once.

Conclusion

Some final points to keep in mind when working with creative navigation:

  • Use appropriate descriptions to clarify when necessary. Not every engaging navigation paradigm is self-explanatory; sometimes a little explanation or introduction to the technique may be of greater help to the users of the site. Do not exaggerate and do not overcomplicate things, though. The experience should be smooth and simple.
  • Consistency is crucial. Even completely avante garde navigation can work well when key elements are always accessible, allowing the user to permanently have an overview as well as a sort of life buoy.
  • Use clear labels. Simple image cues aren’t always enough to guide users, and animated clues might not be perceived as navigational elements.
  • Consider telling a story. You could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with. This technique is probably best-suited to promotional landing pages rather than content-heavy websites.

Related Posts

Note: Thank you to Smashing Magazine’s proofreader, John von Bergen.
(ik) (vf)


© Sarah & Adrienne Kahn for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: jquery, menu, navigation, parallax, showcases

April 04 2011

05:25

25 Beautiful & Inspiring Navigation Menus

The importance of a website’s navigation shouldn’t be overlooked. After all, without it, one wouldn’t make it much further than the home page. That’s why designers spend extra effort coming up with ways to make the navigation menu not only look great, but also easy to use. For your Monday inspiration, we’ve rounded up 25 examples of beautiful and inspiring navigation menus.

Beautiful Type

Also some nice colors and type here. Social menu on the header and everything else on the left side.

navmenus18

Drupalcon Denver

Single page layout with footer navigation menus that will take you around.

navmenus01

CXXVI

Browse around using the header menu or the image slider, really nice and clean.

navmenus03

Unfold

Another beautiful single page layout with a nice and smooth header navigation menu to take you around.

navmenus04

Tinkering Monkey

Beautiful layout! Nice and clean menu, colors and typography.

navmenus05

Shout

Nice colorful layout with a basic straightforward menu. Also a nice typography choice.

navmenus06

Sellected Studio

Really beautiful layout and navigation. Color combination and typography are really elegant.

navmenus07

Webvisionary Awards

A strong and cool single page layout. You can scroll around or use the header nav menu.

navmenus08

David Desandro

Nice layout based on shapes and typography. Header menu using pure typography and hover effects.

navmenus09

TEDxPortland

Another nice single page layout with footer navigation menus that will take you around.

navmenus10

Bluecadet Interactive

Beautiful and elegant layout with nice navigation menu that ‘frame up’ when you hover it.

navmenus11

anCnoc

Clean layout based on typography and beautiful images. Header and footer menus to help your navigation.

navmenus12

Lounge

Delicate single page design with typographic header menus.

navmenus13

Gene’s Sausage Shop

Beautiful typography and style on the navigation menu, and it actually looks like a real menu. ;)

navmenus14

Luke Dorny

Nice layout, colors, typography and menus. I also really liked the blurred effect when you load the page, check it out.

navmenus15

Visual Republic

Elegant single page design with a side menu that follow you where you go and help you navigate the site.

navmenus16

Wigolia

Beautiful layout. Elegant choice of colors and typography. Smooth navigation menu with a fade hover effect.

navmenus17

Facio Design

Beautiful layout and colors. Nice framed menu with hover effects.

navmenus19

Collaborative Fund

Another nice single page layout with smooth navigation menus.

navmenus20

The Coastal Cupboard

Nice layout, colors, type and images. Elegant and simple navigation menu with hover effects.

navmenus21

Ferocious

Header menu based on typography and shapes.

navmenus22

Scribble & Tweak

Super beautiful single page layout with smooth and clean menus.

navmenus23

Don’t Throw Batteries

Big and simple – a good combination for an effective nav.

navmenus02

Nordkapp

Yes, another single page layout with smooth navigation. ;)

navmenus24

Interlink Conference

Nice colors, type and menus.

navmenus25

Source:

The Best Designs
Unmatched Style

March 28 2011

07:00

February 27 2011

10:00

55 Super Powerful jQuery Navigation and Menu Plugins

Navigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order to not scare your visitors away. jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome. Note that all of the listed plugins have been released in the last six months.


1. mb.verticalSlider

Mb-vertical-slider-jquery-navigation-menu-plugins

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Demo

2. Fly Slideshow

Fly-slideshow-jquery-navigation-menu-plugins

Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with a nice “fly” effect. Images fly from left to right with and have a fade effect.

It also features:

  • Direct navigation (you can jump to any slide by clicking dots at top-right corner)
  • Previous/next controls
  • Image decriptions (it gets them from alt tag)
  • Only 5kb size

Demo

3. OS X Finder-like ColumnView

Osx-column-view-navigation-menu-plugins

This is a jQuery (1.4 as of writing) extension for mimicing the OSX Finder column behavior. You specify an initial element: $(‘#columnview’).columnview(); And the plugin takes the contents() of that node and places it in the first ‘column’. Any links within that column are grabbed, preventDefault()’d and instead they will perform a $.get request and enter that data in the next column.

Demo

4. Blast Slider – jQuery Photo Slider

Blast-photo-slider-jquery-navigation-menu-plugins

Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effects – slide explodes into particles and then collapses to a new slide!

Demo

5. Photo Rotator jQuery Plugin

Photo-rotator-jquery-navigation-menu-plugins

Photo Rotator JQuery plugin is an easy to use JQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Highlighted features:

  • Driven by xml or arrays
  • 3D Transition Effects (support in Safari)
  • Easy to setup
  • Slide show controls
  • Easy customization
  • Compatible with IOS mobile safari

Demo

6. infiniScroll

Infini-scroll-jquery-navigation-menu-plugins

“infiniScroll” was written as a jQuery plugin. It works for blog posts… but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling? We like to scroll more than we like to go to a new page in some cases. It’s easier to get to items, and you already waited for things to load, so why load again! Posts and tweets are one thing, but this plugin will also work for leaderboards, portfolio items, anything where you want to load subsequent elements.

Demo

7. jQuery Gestures

Gestures-jquery-navigation-menu-plugins

The jQuery Gestures project is a plugin for the jQuery JavaScript Framework, which adds mouse gesture support to a page or zone on a web page. This plugin also supports composite gestures, which combine several compass directions to create a shape. This gives gestures more variations than the eight compass points.

Demo

8. jQuery Menu Selector

Menu-selector-jquery-navigation-menu-plugins

This plugin makes menu items active by location path.

9. jQuery Stepy – A Wizard Plugin

Stepy-wizard-jquery-navigation-menu-plugins

jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.

Demo

10. jQuery Slidy – A Transition Plugin

Slidy-transition-jquery-navigation-menu-plugins

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Demo

11. Slide Down Menu

Slide-down-jquery-navigation-menu-plugins

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Demo

12. jQuery Pageswitch Plugin

Pageswitch-jquery-navigation-menu-plugins

This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.

13. Apple style Navigation with CSS3 JQuery

Apple-jquery-navigation-menu-plugins

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

Demo

14. Smart Cart 2 – jQuery Sopping Crt Pug-in

Smart-cart-jquery-navigation-menu-plugins

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Demo

15. Flyout Ribbon using jQuery and CSS3

Fly-out-ribbon-css3-jquery-navigation-menu-plugins

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Demo-Click on the arrow on the right hand side of your screen to see the demo in action.

16. Easyrpc

Easyrpc-jquery-navigation-menu-plugins

This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration.

17. TN34 Facets

Facets-jquery-navigation-menu-plugins

This plugin uses the CSS clip styling method and the jQuery.clip plugin to show sectioned containers positioned in the same area and to expand a hovered container to its maximum width. Just like an accordion but much more powerful.

Demo

18. Keyboard Links

Keyboard-links-jquery-navigation-menu-plugins

Keyboard links is a plugin which allows the user to quickly find any link on the page and click it by just using the keyboard. The user presses “l” and a toolbar appears at the top of the page then they start typing to search for the link that they want and a list appears of those links, they can then select a link by moving up and down keys and whilst doing so the focused link will be scrolled into view and highlighted, here’s a demo page which should fill in all the blanks.

19. iX Framework

Ix-framework-jquery-navigation-menu-plugins

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Demo

20. Hijax

Hijax-jquery-navigation-menu-plugins

The Hijax plugin is a JQuery plugin which allows you to add Ajax capabilities to your site, while maintaining search engine friendliness and browser history button support. It provides a simple and easy way to transform your site into a dynamic Ajax site, providing a richer user experience.

Demo

21. JAWS: News Ticker and Mini Accordion

Jaws-jquery-navigation-menu-plugins

This widget-esque script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has ‘more info’ data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.

22. Subway Map Visualization jQuery Plugin

Subway-map-visualization-jquery-navigation-menu-plugins

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Demo

23. Sticky Section Headers

Sticky-section-headers-jquery-navigation-menu-plugins

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Demo

24. Headerlinks

Headerlinks-jquery-navigation-menu-plugins

The jQuery headerlinks plugin will automatically create a table of contents block anywhere on the page with any style and any content you desire. It has a tremendous amount of flexibility and does many things automatically.

25. WZSplitter

Wzsplitter-jquery-navigation-menu-plugins

WZSplitter is a flexible, easy to use layout plugin. It helps end users to set up any combination of resizable panels just by providing a few configuration values. Main features:

  • Resizable panels, collapsing/expanding and stretching/shrinking functions.
  • Skins.
  • Unlimited nesting and linkage effects on panels’ actions.
  • Default values driven, panels can be customized by simply changing configuration values.
  • Programmatically control and event triggers using callback functions.

26. Autobrowse Endless Scroller

Autobrowse-endless-scroller-jquery-navigation-menu-plugins

When run on a DOM element, this plugin will make the element grow and fill its content automatically when the user scrolls to the bottom of the element. The content is fetched via ajax, and the plugin keeps a cache using local storage.

Demo

27. Panoscoper

Panoscoper-jquery-navigation-menu-plugins

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

28. jCrumb

Jcrumb-jquery-navigation-menu-plugins

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with JQuery UI.

29. jxSlider

Jxslider-jquery-navigation-menu-plugins

jxSlider widget turns the selected DIV into a small embedded ajax tabbed-navigator. The ajax-loaded content will automatically and recursively be shown into the initial DIV.

30. Ninja UI

Ninja-ui-jquery-navigation-menu-plugins

Ninja user interface is skilled in the techniques of JavaScript and CSS, going unnoticed until called upon to perform the arts of webjutsu.

Demo

31. jQuery Scroller

Scroller-jquery-navigation-menu-plugins

With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!

Some Features:

  • Velocity, horizontal or vertical direction, starting/ending points, finite or infinite loops, move type (‘linear’ or ‘ping pong’)
  • Configure mouseover/mouseout events or control programmatically scrolling functions from an external element
  • Play, pause, resume scrolling animations or set a custom pointer.

32. Image Hover Move

Image-hover-move-jquery-navigation-menu-plugins

A simple and practical navigation or featured image jQuery plugin.

33. Dynamic Navigation Menu

Dynamic-jquery-navigation-menu-plugins

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

34. jQuery One Page Navigation Plugin

One-page-jquery-navigation-menu-plugins

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

35. Slider Menu

Slider-jquery-navigation-menu-plugins

Though certainly nothing new in the world of jQuery or even menu systems Slider Menu is a small compact menu animation plugin that creates a simple yet smooth menu using a UL list.

36. Multi-Level Accordion Menu

Multi-level-accordion-jquery-navigation-menu-plugins

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

Demo

37. Sliding Pictures Menu

Slinding-pictures-jquery-navigation-menu-plugins

This is a jQuery plugin that makes a beautiful sliding menu with pictures. Some features:

Some features:

  • Set default menu item open.
  • Leave active menu item open.
  • Remember active menu item using cookies.
  • Use debug function.

38. onCube

Oncube-jquery-navigation-menu-plugins

This plugin generate a die like a Rubik’s Cube. You can use it for navigation, categories or whatever you want. The plugin works in IE6 and IE7 as well as in Firefox and IE8. It also looks very good on iPhone, iPad & Co.

Demo

39. Memu – A simple CSS / JavaScript / JQuery Menu

Memu-jquery-navigation-menu-plugins

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Demo

40. Dropp

Dropp-jquery-navigation-menu-plugins

Dropp is a jQuery plugin which replaces regular dropdown menus ( <select> elements ) with alternatives you can style.

41. Pretty Pie Menu

Pretty-pie-jquery-navigation-menu-plugins

Right-Click on the selected element, hold the button down, pie menu appears and select icon.Uses jQueryUI animations, icons and styles to make it “pretty”. Easily modifiable by changing jQueryUI stylesheets.

42. jMenu

Jmenu-jquery-navigation-menu-plugins

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

Demo

43. Facebook Menu System

Facebook-jquery-navigation-menu-plugins

This menu is based on the same idea used on Facebook. The menu system work only with the UL html tag, no other tags are used, you have only to create a simple menu.

44. MobilyBlocks

Mobily-blocks-jquery-navigation-menu-plugins

MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.

Demo

45. jQuery Menu Selector

Selector-jquery-navigation-menu-plugins

This plugin makes menu items active by location path.

46. jOrbital

Jorbital-jquery-navigation-menu-plugins

jOrbital is a solution for building circular menus. It’s purpose is to group elements with similar functionality ( like social buttons ) into one hoverable button. But it’s not limited to simple menu only. You can create circular gallery, multi-level navigation or RPG -like menu. This is a premium plugin though.

47. Multi Row Checkbox Menu

Multirow-checkbox-jquery-navigation-menu-plugins

Plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.

Demo

48. Content Slider

Content-slider-jquery-navigation-menu-plugins

Slider implemented based on the jquery-ui framework, not just for images, but for text and other content as well, In this way, we can use the CSS classes of jquery-ui to apply different look and feels and use its effects for the slide presentation.

Demo

49. Hyjack Select

Hyjack-jquery-navigation-menu-plugins

This jQuery plugin replaces the traditional html select control with an improved or “hijacked” version. To begin, try exploring the various Hyjack HTML select examples. Notice, you may now type to search for available drop down items. Please feel free to discover the demos, expand on current ideas, or just drop us a note. Documenation can be found in code behind and through google code or at our jQuery plugin page.

50. jQuery Configurable Context Menu

Configurable-context-jquery-navigation-menu-plugins

This is a configurable context menu, it works in three ways: right click, hold down, hover.Callback is executed with parameter e, the menu action event object normalized by jQuery, and el, the element associated with the menu. Menu is an ul with position absolute, menu element are li with .hover class added on mouse over.

51. NavDock

Navdock-jquery-navigation-menu-plugins

NavDock is a simple dock style menu icon.

52. jQuery Content Panel Switcher

Content-panel-switcher-jquery-navigation-menu-plugins

The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. You can have single or multiple content switching panels on a single page Content panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned.

Demo

53. jQuery Image Rotator with Fade

Image-rotator-fade-jquery-navigation-menu-plugins

jQuery Image Rotator is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, with great looking fading effects, if desired.

Demo

54. jQuery xFade

Xfade-jquery-navigation-menu-plugins

A jQuery plugin (3.6 KB minified) to fade/slide the elements inside the container based/extended from jQuery InnerFade by Torsten Baldes with the controls as addition.

55. jQCloud

Jqcloud-jquery-navigation-menu-plugins

jQCloud allows you to build neat cloud-shaped word clouds and tag clouds. Since this plugin produces pure HTML code, the word cloud layout can be easily personalized with custom CSS styles.

Demo

February 21 2011

07:00

January 24 2011

07:00

How To Create a Cool Animated Menu with jQuery

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

View the animated menu demo

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

View the HTML code

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each <li> item containing an anchor.

Style up the design with CSS

View the CSS code

Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the <ul> with margin: auto; and text-align: center; and clear the element using overflow: hidden;.
Float each <li> item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item.
Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

Spice up the effect with jQuery

View the Javascript code

In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

View the jQuery code

The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set the backgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a .stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

View the extra jQuery code

A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

The complete HTML, CSS & jQuery code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f5f0e0 url(images/noise.png);
}

#container {
	height: 800px;
	background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none;
	}
		ul#nav li a {
			display: block; width: 97px; height: 77px;
			padding: 72px 0 0 0; margin: 0 32px 0 32px;
			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

			background: url(images/label.png) 0 -149px no-repeat;
		}
			ul#nav li a:hover {
				background: url(images/label.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
			}

			ul#nav li a.js:hover {
				background: url(images/label.png) 0 -149px no-repeat;
			}

jQuery

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

The final animated menu design

View the animated menu demo

View the animated menu demo

October 29 2010

21:00

61 Unusual Navigation Menus in CSS, Flash and JavaScript

What is one of the aspect of a website that always needed? It is the navigation menu. Navigation menu is a useful part of  the website because it leads the user to different part of the website. Interaction to the website is the main use of the navigation menu.More and more great looking and user-friendly navigation menus are being created that gives  life to the websites.

I’ll be featuring 61 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

CSS – Based Navigation Menu

1. Loodo.com

Casino-like game or snakes and ladders with the touch of colorful menu.

2. Change.org

The calmness of the choice of color with the emboss feeling of the menu to reveal the submenus is a great choice for its advocacy change.

3. Acko.net

Steven Wittens gives us another perspective or view of this menu.

4. UXBooth.com

UX Booth uses stylish yet simple menu.

5. MacRabbit.com

MacRabbit uses a mac os or apple concept to its design.

6. Joyent.com

Joyent uses simple, business looking menu that offers their works.

7. Nopoko Graphics

Elegance and simplicity of this portfolio gives you.

8.  Icon Designer.com

Large images-based menu that will attract and will draw users attention. Not the usual menu that you see.

9. Designsensory.com

Drop down navigation that uses two colors that presents the active link to the passive one.

10. Smallstone.com

Small Stone recordings, a U.S. record label, uses a radio-like or  that so-called a the so-called Space Echo Roland SE-201 menu.

11. TNVacation

Feel of country or map-like that will let you travel to the whole website.

12. Clever Twist

Rounded, apple application-like menu that offers application for your iPhones.

13. Clear Left

Clearleft uses a calendar concept that makes a what-to-do stuff on a particular day feel.

14. Tulumarka

Pressed looking  to see the selected menu.

15. Ars Technica

Menu pressed reveals a submenu. Dark yet simple feel.

16. 45royale inc.

Nice hover effects  with this simple and clean menu.

17. CSS Beauty

The size of the letters are so cute and  not usual but that’s what will caught your attention.

18. Design Intellection

A good way to use a block navigation that shows an effective  hover effects.

19. Microformats

Leaf like plus the cool green color that suits into your eyes. From green to black that gives you on what menu you are.

20. ronnypries.de

One of the best concept is to use a floor plan to navigate your users to the entire website is what Ronny Pries did.

21. Jiri Tvrdek

Fruit bearing tree is one of the creative way to use a navigation menu.  It is like your harvesting a fruit and lead you to the taste or the content of the website.

22. Matt Dempsey

Brush strokes with the interchange of the colors over choosing a menu is what  Matt Dempsey did.

23. Cognigen

Presents a pressed and clear view of the navigation.

24. District Solutions

Vertical tab that looks like a folder that really works on this website.  Rarely use but really great to work with.

25. Jeff Sarmiento

Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.

26. Racket

It is like a hierarchy of menu up to its roots.  One of a kind navigation that added to the creativity of the website.

27. DFW

Icons gives emphasis on the interaction to the menu.

Flash based Navigation Menu

28. Iipvapi

Photo clipping navigation menu with touch of hover color effects used in a Photo Clipping path services.

29. Moodstream | Getty Image

It is designed to squeeze your creative juices by tweaking the mood sliders navigation.

.

30. Not Forgotten – The Movie

Devilish, freaky and rise to the dead theme of the navigations presented into  tarot-like cards.  The card will be put in fire if you clicked on it.

31.Waterlife

The fluid navigation menu that brings you to the motion of a lake.

32. Nick Jones

Nick Jones uses a simple yet dynamic navigation for his portfolio. It’s like pulling things up and down.

33. Marc Ecko

Marc Ecko presents an art gallery navigation that lets visitors to  tour for  art and philosophy.

34. HBO

HBO , a tv-movie network, creates an interactive selection of movies for its navigation.

35. Got Milk?

An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.

36. AgencyNet

Stunning and amazing navigation design studio based in New York City, NY and Fort Lauderdale, FL.

37. 2Advanced Studios

Stylish neo ancient navigation design with a background mural that leads us to another world.

38. NickAD

Nick Ad uses a flexible but easy to use navigation. The stars that changes to a navigation when it clicks anywhere in the page.

39. Dave Werner

A creative person uses his own works to lead the users on his portfolio.

40. Section Seven Inc.

Section Seven has a colorful pamphlet like navigation with a sub menu written on it.

41. Cathy Beck

A navigation that open and close like a scroll when choosing a menu.

42. Beside

Beside uses a rainbow navigation that puts your colorful fantasies.

43. Christian Sparrow

A cardboard concept of its portfolio. The navigation hovers a pencil-like drawing.

44. Enila.fr

Small squares that put together that acts as the navigation and collaboration of works.

45. Havaianas

A colorful map that has the touch of the slipper texture that Havaianas proud about.

46. Square Circle

A table filled with stuffs that are related to the menu such as telephone for contact us, magazine for portfolio, newspaper for news and others. Real thing that use for navigation is a great thing.

47. TBWA\HAKUHODO

A great, artistic scenario use for navigation. Every element is a wonderful piece that gives life to the website. Rarely used but magnificent.


JavaScript – Based Navigation Menu

48. Agami Creative

Simple and eye pleasing of this navigation with the touch of  paint colors.

49. Dragon Interactive

It looks like the navigation is made up of Flash but it’s not.  Clean, cool and stylish navigation with a hover effects of colors that made this navigation really pretty.

50. The White House

White House really holds up a lot of information for the public. It is easily manage with this drop down menu to contain all the contents.

51. Eric Johansson

Eric Johansson uses a JavaScript sliding menu to travel on it’s website.

51. Helmy Bern

The navigation layout is in a grunge theme that also has a jQuery drop down effects.

52. Internet Dreams

The creative hover effect is not usual but it gives a distinguish look over what menu users choose in.

53. Panic -Coda

Familiar and popular icons were used to navigate users easily.

54. TapTapTap

Restaurant menu-like navigation is really great. I really love this navigation because of its simplicity yet creative design.

55. Kobe

This navigation uses a scroll to and scroll in plugin to create  an interesting transitions.

56. BlogHelpr

Floater design to use for navigation. It is the creative way to save the person in swimming into the website.

57. EyeDraw

EyeDraw uses an expanding images whenever you hover the mouse over the menu.

58. Andreas Hinkel

Andreas Hinkel uses Polaroid navigation for the animation effect.

59. Museu Gulbenkian

The drag dock  navigation in the bottom is a great way to reveal and hide the menu and submenus.

60. Sapphire Sound

The thumbnail used as a menu that has caption effect, custom scroll bar, and you also can see the fading, sliding animation.

61. Design Slicing

Transition effects is what  I really like on this navigation. The menu are set of questions that when hover are given answers.

These are few navigation menu design that you can work out on your website but be sure that you don’t want to get lost in the design and interactivity aspect of your navigation. Let your users be guided on the navigation you choose to deal with.


July 06 2010

21:00

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

Preview-css-menu-button-tutorialsNavigation menus and buttons with CSS styling are being used in almost every website. There are a lot of techniques to utilize and a good developer should have some basic knowledge about them all.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

Bulletproof-sliding-doors-css-menu-button-tutorials

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

Sliding-door-using-only-one-image-css-menu-button-tutorials

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

Drop-down--css-menu-button-tutorials

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

Pure-with-infinite-sub-menus-tutorial-css-menu-button-tutorials

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

Pure-vertical-css-menu-button-tutorials

6. Horizontal Menus That Grow on You

In this quick tutorial, author is  going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

Horizontal-that-grow-on-you-css-menu-button-tutorials

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position  property.

Advanced-css-menu-button-tutorials

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

Horizontal-subnav-with-jquery-css-menu-button-tutorials

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

Advanced-trick-css-menu-button-tutorials

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

How-to-using-sprites-css-menu-button-tutorials

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

Graphics-with-rollovers-css-menu-button-tutorials

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface  and some great looking icons. Here author will show you how to implement it to your web page.

Dock-css-menu-button-tutorials

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

Vertical-with-behavior-file-css-menu-button-tutorials

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

Vertical-navigation-with-teaser-css-menu-button-tutorials

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

Sprite-navigation-css-menu-button-tutorials

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

3-drop-down-css-menu-button-tutorials

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover  and position properties.

Create-advanced-using-the-hover-position-properties-css-menu-button-tutorials

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

Create-vimeo-like-top-navigation-css-menu-button-tutorials

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Sexy-drop-down-css-menu-button-tutorials

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

How-to-create-dropdown-css-menu-button-tutorials

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

Overlapping-tabs-css-menu-button-tutorials

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

Rounded-corner-navigation-bar-with-jquery-css-menu-button-tutorials

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

Simple-vertical-css-menu-button-tutorials

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

Navigation-rollovers-with-drop-downs-css-menu-button-tutorials

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

Navigation-bar-with-tabs-using-sliding-doors-effect-css-menu-button-tutorials

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

Simple-vertical-digg-like-css-menu-button-tutorials

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

Jquery-style-with-3-css-menu-button-tutorials

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

Apple-navigation-bar-using-only-css-menu-button-tutorials

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Create-slick-using-3-css-menu-button-tutorials

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Create-windows-7-start-menu-using-3-only-css-menu-button-tutorials

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

Gradient-with-3-css-menu-button-tutorials

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

Liquid-color-adjustable-css-menu-button-tutorials

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

3-gradients-no-image-aqua-mac-css-menu-button-tutorials

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

Sexy-hover-css-menu-button-tutorials

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

Creating-with-3-css-menu-button-tutorials

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

Roll-your-own-google-css-menu-button-tutorials

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

How-to-make-sexy-with-css-menu-button-tutorials

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

Better-nav-interactions-css-menu-button-tutorials

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

Roll-over-css-menu-button-tutorials

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

How-to-build-simple-with-image-sprites-css-menu-button-tutorials

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Fast-rollovers-without-preload-css-menu-button-tutorials

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

Pretty-css-menu-button-tutorials

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

How-to-design-sexy-using-css-menu-button-tutorials

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

Radioactive-css-menu-button-tutorials

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

Beautiful-icon-set-css-menu-button-tutorials

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

Building-beautiful-with-gradients-css-menu-button-tutorials

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

Gradient-css-menu-button-tutorials

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

Build-kick-ass-practical-css-menu-button-tutorials

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

Only-drop-down-css-menu-button-tutorials

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

How-to-make-nice-css-menu-button-tutorials

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

Cross-browser-rounded-jquery-css-menu-button-tutorials

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

Making-rollover-css-menu-button-tutorials

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

Recreating-cnn-beveled-navigation-with-pure-css-menu-button-tutorials

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

Creating-glassy-non-div-navigation-bar-css-menu-button-tutorials

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

Sprites-css-menu-button-tutorials

March 19 2010

21:32

Quick Tip: How to Write a Neat FlipNav Script

Somehow, I inadvertently started a navigation series over the last few weeks. It’s purely coincidence, mostly spawned by emails and such. This week, we’re going to mimic the neat navigation functionality, found on JohnMayer.com. Simply mouse over one of the navigation items to see the effect. However, we’re going to make it a bit more flexible by removing the need for images. We’ll achieve the effect using only CSS and JavaScript.

Other Viewing Options


March 13 2010

20:17

How to Build a Lava-Lamp Style Navigation Menu

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.

Screenshot

Prefer a Screencast?

Step 1 Create the Mark-up

Before we can create this neat functionality, we need a base from which to work from. In your favorite code editor, create an unordered list for your navigation, and import both jQuery and jQuery UI, via Google.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>SpasticNav  Plugin</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>

<div id="container">

	<ul id="nav">
		<li id="selected"><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">More About My Portfolio</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>	

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

</body>
</html>

Note how we gave an id of “selected” to the home page. This is fairly standard in most websites; it allows use to target the current page, and style that particular list item accordingly.

Next, we must decide how to best implement the lava-lamp functionality. To allow for reusability, we’ll package this little script into a plugin, and call it like:

$('#nav').spasticNav();

Since we’ve decided to build a plugin, let’s go ahead and create a new file for that script, and reference it in our mark-up. We’ll call it jquery.spasticNav.js.

<script type="text/javascript" src="js/jquery.spasticNav.js"></script>	

<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>

Step 2 Beginning the Plugin

To reduce the number of global variables that we must create, as well as remove any possibilities of the $ symbol clashing with other JavaScript libraries, let’s wrap our plugin in a self-executing anonymous function.

(function($) {

})(jQuery);

Now, jQuery will be passed into our plugin, and will be represented via the $ symbol.

Next, it’s generally a best practice to give the users of the plugin as much flexibility as possible. As such, we’ll give them the option of passing in an object-literal when they call the plugin to override a handful of settings. As I see it, they should be able to:

  • Set the amount of overlap for our little blob. This refers to how much the blob will exceed the height of the navigation menu.
  • Set the speed
  • Set a reset, which causes the blob to move back to the current page item (assuming that the user never clicks on a link)
  • Set the color of the blob. This can be accomplished with CSS, but it’s a nice convenience, nonetheless.
  • Set the easing option.

Now, we’ll name our plugin, and make it equal to a function. $.fn is simply an alias for jquery.prototype.

$.fn.spasticNav = function(options) {

};

Knowing that we’ll be allowing these overrides, we must make sure that we accept an “options” parameter.

Step 3 Configuration Options

Now that we’ve named our plugin, the next step is to create the configuration options.

options = $.extend({
	overlap : 20,
	speed : 500,
	reset : 1500,
	color : '#0b2b61',
	easing : 'easeOutExpo'
}, options);

Above, we’re taking the options variable, setting some default properties and values, and then extending it with whatever (if anything) the user passes in when they call the plugin. That way, the options they pass will override our default settings. For example, if, when I call this plugin, I pass:

$('#nav').spasticNav({
   speed : 2000,
   easing : 'easeOutElastic'
});

Those two properties will override the default settings, while the remainder of the options will remain the same.

Step 4 Implementing the Functionality

Now, we’re ready to cycle through each element that was passed to this plugin, and implement the lava-lamp functionality. Remember, we can’t assume that the user is going to pass a single element to this plugin. They could, if they wanted, reference a class, which refers to multiple items that should receive this functionality. As such, we’ll call this.each to iterate over each item in the wrapped set.

return this.each(function() {

});

Within this function, we’ll create some variables. Not all of them will immediately have values, but since the JavaScript engine will hoist all variable names to the top of the function anyways (behind the scenes), it’s generally a best practice to declare them at the top, and then initialize them later.

var nav = $(this),
	currentPageItem = $('#selected', nav),
	blob,
	reset;
  • nav : “Caches” this, wrapped in the jQuery object.
  • currentPageItem : Contains the list item with an id of selected. We pass a second parameter to set the context to search from. That way, we don’t have to traverse the entire dom to find this element.
  • blob : For lack of a better word, this variable will reference the highlighter, that will follow our mouse when we hover over the menu.
  • reset : This will store a reference to the setTimeout function that will create later. It’s needed in order to call clearTimeout. More on this soon…

Now that we’ve declared/initialized our variables, let’s create the actual blob, so to speak.

$('<li id="blob"></li>').css({
	width : currentPageItem.outerWidth(),
	height : currentPageItem.outerHeight() + options.overlap,
	left : currentPageItem.position().left,
	top : currentPageItem.position().top - options.overlap / 2,
	backgroundColor : options.color
}).appendTo(this);

The reason why we’re calling the CSS method, rather than simply adding a class, is because these values will vary depending on the current page’s list item. As such, we must use JavaScript to retrieve they values.

  • width: Get the width of currentPageItem, including any borders and padding.
  • height: Get the height of currentPageItem, including any borders and padding. Also, add the amount of overlap, to make the blob extend outside of the menu.
  • left: Sets the left property of the blob equal to the left position of the currentPageItem. (We must set a positioning context in our CSS for this value to take effect.)
  • top: Sets the top value as well, and vertically centers the blob.
  • backgroundColor: Sets the background color.

Finally, we append this new list item to this, or #nav.

Next, we need to store a reference to #blob. That way, we don’t have to search the DOM everytime we wish to access it. We declared the blob variable at the top of the function. Now, let’s initialize it.

blob = $('#blob', nav);

Step 5 The Hover Event

We must now “listen” for when the user hovers over one of the list items (excluding the blob of course) in our navigation menu. When they do, we’ll set the width and left properties of the blob equal to that of the currently hovered list item.

$('li:not(#blob)', nav).hover(function() {
	// mouse over
	clearTimeout(reset);
	blob.animate(
		{
			left : $(this).position().left,
			width : $(this).width()
		},
		{
			duration : options.speed,
			easing : options.easing,
			queue : false
		}
	);
}, function() {
	// mouse out
	reset = setTimeout(function() {
		blob.animate({
			width : currentPageItem.outerWidth(),
			left : currentPageItem.position().left
		}, options.speed)
	}, options.reset);

});

To summarize the script above…

  • Get all list items – not the #blob – within the navigation menu, and when they’re hovered over, run a function.
  • Animate the blob, and set its left and width values equal to that of the hovered list item.
  • Pass an object literal as the second parameter of animate, and set the duration and easing equal to what we set in our configuration options. Set queue to false to prevent animation build-up.
  • When they mouse out, call setTimeOut, which will push the blob back to the current page item. If we didn’t do this, and the user didn’t click on a navigation link, the menu would show that they were on
    a different page entirely. This will, after a second or so, animate the blob back to currentPageItem.

And that’s all there is to it! This is a super simple plugin. The next step is to style our navigation menu.

Step 6 Styling the Menu

Without any styling, our menu should look similar to this:

Unstyled mark-up

Let’s first style the “nav” ul. Open your style.css file, and add:

#nav {
	position: relative;
	background: #292929;
	float: left;
}
Styling the navigation menu

Next, we’ll style each list item.

#nav li {
	float: left;
	list-style: none;
	border-right: 1px solid #4a4a4a;
	border-left: 1px solid black;
}

This simply floats each list item to the left, and adds a border to each side.

Styling the list items

Moving along, we next must style the anchor tags within our navigation menu.

#nav li a {
	color: #e3e3e3;
	position: relative;
	z-index: 2;
	float: left;
	font-size: 30px;
	font-family: helvetica, arial, sans-serif;
	text-decoration: none;
	padding: 30px 45px;
}

We’re setting a color, floating them to the left, setting some font values, and a healthy amount of padding. Take note of the z-index property. This is a necessity, and will be explained shortly. However, remember that, in order to adjust the z-index, we must set a positioning context, which we’ve done.

Styling the anchor tags

Because we’re not implementing a full reset stylesheet, let’s ensure that we zero out any default margins and padding on our ul and li, just to save any potential headaches.

ul, li {
	margin: 0; padding: 0;
}

The last step is to style the blob itself!

#blob {
	border-right: 1px solid #0059ec;
	border-left: 1px solid #0059ec;
	position: absolute;
	top: 0;
	z-index : 1;
	background: #0b2b61;
	background: -moz-linear-gradient(top, #0b2b61, #1153c0);
	background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 2px 3px 10px #011331;
	-webkit-box-shadow: 2px 3px 10px #011331;
}

Once again, we set some pretty colors for our borders, and add some background colors (including CSS3 gradients/borders/shadows for Firefox and Safari/Chrome). Once again, we see that z-index property. Without this, the blob will display above all of the text in the navigation menu. To counter this, we must be sure that its z-index property is LOWER than the list item’s! We also must set the position to absolute in order to adjust its top and left values with our plugin.

Screenshot

Conclusion

That’s all there is to it! With minimal effort, we’ve created a really neat looking navigation menu from scratch. Let me know if you have any questions! Thanks for reading and watching.


March 01 2010

18:04

How to Build and Enhance a 3-Level Navigation Menu

Perhaps more than any other topic, I’m most often contacted about how to build cross-browser navigation menus. Understandably, the reason is because every web designer has built one at some point, if not during every project! Nonetheless, it can absolutely be a tricky task. In this video tutorial, I’ll teach you how to build an attractive cross-browser navigation menu; notable features include CSS3 gradients, multiple sub-menus, and jQuery animations.


Other Viewing Options

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial


December 03 2009

19:41

Use Sprites to Create an Awesomeness-Filled Navigation Menu

CSS sprites can dramatically increase a website’s performance, and with jQuery, we can implement awesome transition effects easily. Let’s get started.


Tutorial Details

  • Requirements:
    • Basic Knowledge of jQuery
    • Basic Knowledge of Photoshop
    • Basic Knowledge of CSS
  • Difficulty: Intermediate
  • Estimated Completion Time: 40 mins

What is a CSS Sprite?

Sprites date back to the early days of video games, where they were used as optimization technique for displaying 2D graphics. A CSS sprite is a technique that involves grouping images to form a single master image, and then selectively displaying only the required sections using CSS attributes (width, height, background-position etc).

In this tutorial we’ll create a navigation menu inspired by Dragon Interactive. They have an excellent design concept, with a perfect use of highlights and colors.

Step 1

Begin by creating a new Photoshop document, which is 800px wide by 500px high.

Step 2

Next, we’ll create a horizontal ruler at the 70px mark by going to view -> new guide; this will be our menu height.

Step 3

Now we are going to create a folder menu, and inside it, a sub folder called “Menu Text.”

Step 4

Select the text tool(shortcut: t) and set the following properties in the character toolbox.

  • Font: Franklin Gothic Medium Cond
  • Font Size: 15pt
  • Color: Black

Other fonts can be used as well but this font family is best suited for embedded text effect which we will give later. If you don’t have this font you can get it from Website.

Step 5

Create another horizontal ruler at 40px, this will help to keep our menu text horizontally aligned.

Step 6

Now select the menu text folder, and type the menu words HOME, SERVICES, PORTFOLIO, ABOUT, and CONTACT, keeping equal spaces between each. It should now look like the image below.

Step 7

Now create another folder below the menu text folder, and name it “Menu Background.”

Step 8

Let’s next create a new layer inside the Menu Background folder, and then using a rectangular marquee tool, create a selection of 100px wide and 70px high.

Step 9

Select the gradient tool (shortcut : g), and set the gradient colors from #555555 to #adadae .

Step 10

Now draw a gradient starting from the bottom of the selection to the top of the selection; then give it a stroke with the following properties:

  • Stroke Size : 1px
  • Position : outside
  • Color : Black

The stroke was added to provide depth to our menu divisions.

Step 11

Now In order to achieve the highly polished ends, and to create the proper effect when the mouse hover occurs, we will give it an adjacent highlight.

Step 12

Go to select > modify > contract and enter 1px.

Step 13

Select the burn tool and set the following properties:

  • Brush Size : around 200px
  • Brush Hardness : 0%
  • Range : Shadows
  • Exposure :30%

Step 14

Now we will move the menu division right 1px, using the move tool(shortcut: v) in order to show the left side of the stroke, which was invisible due to its position.

Step 15

Create copies of the above layer and adjust them with respect to the menu text.

Two things that Must be Noted

  • Transform (ctrl + t) and increase the size of the layer underneath SERVICES and PORTFOLIO, since they are wider than the other words. Change the length from 100px to 110px.
  • The stroke of the adjacent layers must overlap each other.

This is what the menu looks like when we adjust the positioning of the layers and menu text accordingly.

Step 16

In order to embed the typographic effect, we add the “Drop Shadow” effect with the following settings to our text:

  • Color: #b7b6b6
  • Opacity: 40%
  • Distance: 1px
  • Spread: 100%
  • Size: 0px

Step 17

Now, its time to create what the menu looks like during the mouse hover state. Create a copy of the “Menu Background” folder, and rename it to “Menu Hover.” Then, using the move tool, move the folder 70px down so that the newly created menu’s top part touches the horizontal guide.

The reason we have created the copy of the menu folder, is because we’re interested in the positioning of the menu text. If we had created it manually, then we would have to worry about the exact alignment of the menu’s text, which would be much more tedious.

Step 18

Now, we will select the background layer of the service menu from the “Menu Hover” folder, and give it a nice elegant effect upon the hover state. To do this, first create a selection by pressing ctrl and click on the layer; then press delete, which will delete the current shade. Next…

  • Color – #9de0ff at 0% Location
  • Color – #0072ff at 50% Location
  • Color – #005ead at 100% Location

Select radial gradient, and draw a line from the bottom of the selection to 30px above the top of the selection.

Step 19

Our work is not done quite yet. To give it a smooth touch, we need to polish it a bit more. To create a more revealing menu division, we’ll make the edges darker. To achieve this, we need to add the following effects:

  • Select the burn tool, with a brush size of 200px, range – highlight and exposure to 50%, brush it along the edges of the division.
  • To make the edges even darker, we add an inner shadow effect:
    • Blend Mode : Hard light
    • Opacity : 70%
    • Distance: 0px
    • Choke: 0%
    • Size: 10px

Step 20

Apply a similar effect for the portfolio and about menus. For the contact menu, change the gradient colors to:

  • Color – #ff9dbd at 0% Location
  • Color – #ff0084 at 50% Location
  • Color – #a00337 at 100% Location

This what our menu looks like now:

Step 21

The home menu division needs to be given special treatment; select the layer by pressing ctrl and clicking on the layer. Press delete to remove the current shade, and select the gradient tool with the following colors:

  • Color – #fff5c0 at 0% Location
  • Color – #fae15d at 50% Location
  • Color – #eac500 at 100% Location

This time, select linear gradient, and draw a gradient from the top of the selection to the bottom of the selection.

Step 22

Select the burn tool, keeping the rest of the properties the same except for the range, set it to midtones, and apply brush strokes around the edges except for the top.

Step 23

Now to create the glassy effect: select the pen tool, make sure that “shape fill” is selected, and draw the shape like the one in the image, and set its blend mode to soft light with an opacity of about 40%.

Step 24

Two more things before we’re finished with the Photoshop part.

  • First, the text effect within the “Menu Hover” folder is not looking elegant enough; so we change the color of the drop shadow property.
    • Home Menu
      • Color : #fff368
      • Opacity : 80%
      • Also add gradient-overlay : #854406 to b75a03
    • Services, Portfolio and About Menus
      • Color: #78bbff
      • Opacity : 70%
    • Contact Menu
      • Color : #f78bb6
      • opacity : 80%
  • Second is the last division in Menu folder does not have an adjacent highlight to the right; so we’ll clip a small portion of the background layer, and align it next to the contact background layer. Then, we crop the image and save.

Finally our sprite image looks so:

Step 25

Now comes the coding section, which is quite easy. Create an html file, and add the following code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<title>Awesome Menu</title>
</head>

<body>
<div id="nav">
<ul id="navigation">
	<li ><a class="home" href="#"></a></li>
	<li ><a class="services" href="#"></a></li>
	<li ><a class="portfolio" href="#"></a></li>
	<li ><a class="about" href="#"></a></li>
    <li ><a class="contact" href="#"></a></li>
</ul>
</div>
</body>
</html>

Here we have created a simple html file, which consists of an unordered list – our navigation bar. Before moving forward, let’s take a look at a couple of files we’ll now be importing:

  • style.css is the external CSS file in which we will be styling our navigation list.
  • We’ve imported jQuery for the animation on hover.
  • The jQuery easing plugin is also used, which we’ll review later.
  • It’s good practice to create an external js file for our work, so we also do that in “sprite.js.”

Step 26

Create an external .js file, called sprite.js, and paste in the following code.

$(function(){

		   $('#navigation li a').append('');
           // span whose opacity will animate when mouse hovers.

		   $('#navigation li a').hover(
             function() {
	         $('.hover', this).stop().animate({
			'opacity': 1
			}, 700,'easeOutSine')
        	},
            function() {
	       $('.hover', this).stop().animate({
			'opacity': 0
			}, 700, 'easeOutQuad')

	})
		   });

When the DOM is loaded, we inject a span into our anchor tag; this span will actually animate. Then, using the hover function for the anchor tag, we animate the opacity of the span. To create a smoother animation, we will use the easing equation. I am using ‘easeoutsine’ and ‘easeoutquad’; feel free to try an alternative combinations, if you wish.

Step 27

Now comes the CSS part. Create the style.css file. Below is the initial image of what the menu looks like. For now, it’s only four dots, because we haven’t yet styled it.

Step 28

First, we align the list.

body{
background:#000000; }

#navigation
{
margin-left:250px;
}

#navigation li
{
float:left;
}

We’ve only moved the menu in the center a bit.

Step 29

Style the anchor tag; its background will be our sprite image.

#navigation li a
{
background-image:url(images/sprite.jpg);
display:block;
}

The display style must be set to block; otherwise, nothing will be displayed.

In the next step, we will give each of them the proper positioning.

	.home
	{
	background-position:0px 0px;
	width:102px;
	height:70px;
	}

	.services
	{
	background-position:-102px 0px;
	width:110px;
	height:70px
	}

	.portfolio
	{
	background-position:-212px 0px;
	width:108px;
	height:70px
	}

	.about
	{
	background-position:-320px 0px;
	width:102px;
	height:70px
	}

	.contact
	{
	background-position:-422px 0px;
	width:103px;
	height:70px
	}

Here, we’ve set the background positioning, and width of each anchor tag. The values may vary, and it requires a bit of time to get perfect.

Step 30

#navigation a .hover {
	background:url(images/sprite.jpg) no-repeat;
	display: block;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}

	#navigation a.home .hover {
	background-position: -0px -72px;

	}
	#navigation a.services .hover{
	background-position: -102px -72px;

	}
	#navigation a.portfolio .hover {
	background-position: -212px -72px;
	}
	#navigation a.about .hover {
	background-position: -320px -72px;
	}
	#navigation a.contact .hover {
	background-position: -422px -72px;
	}

Now we will define the CSS for the span; this is the same sprite image which is used above. The height and width are made 100% so that it occupies the whole anchor block. The background of each span tag is adjusted, and finally our work is complete.

Step 31

Note that it takes time to get the position and width tuning right; you may end up with slightly different values for these attributes – and that’s perfectly okay!

CSS Sprites Resources

Phew seems like a lot of work, but great things take time to build up. Here are some additional resources that you might find handy.



November 19 2009

08:32

39 Free Buttons And WebDesign Resources From Deviantart

title-free-webdesign-resourcesThis resource article features many extremely useful resources I found over Deviantart community! I consider these resources mainly for learning purposes to understand how different effects are achieved and of course to get fresh ideas to recreate good examples here! Not only that – many resources are completely free for personal/commercial use, but you need to check author’s copyright or ask for permission before you use them actually.

However enjoy and come back, I will release follow up article in next few days with many more free template resources for especially for web designers to make your job easier and better!

1. WEB UI Treasure Chest v 1.0 by ArtDesigner.lv

This is really one huge treasure chest with more than 100 elements in it!!! Outstanding and creator is from Latvia, same country I am from!

treasure-chest-webdesign-psd-free-buttons-icons

2. Free Interface PSD-Files by chaosLT

Amazing quality – great for learning purposes, psd files for free!

interface-psd-webdesign-psd-free-buttons-icons

3. dA UI Button Pack 1 by Proxone

da-ui-webdesign-psd-free-buttons-icons

4. 150 Badges by stunthacker

150-badges-webdesign-psd-free-buttons-icons

5. Free Layout No3 by ZeroniX-Designs

tech-layout-webdesign-psd-free-buttons-icons

6. One Fancy Icon by nonlin3

fancy-icon-webdesign-psd-free-buttons-icons

7. Website Navigation Menu by MericG

navigation-menu-webdesign-psd-free-buttons-icons

8. iPhone Gradation Set by woopsdez

Could come handy, great colors and free psd file with coloring.

iphone-gradation-webdesign-psd-free-buttons-icons

9. Glass Navigation by hapikacsa

navigation-glass-webdesign-psd-free-buttons-icons

10. Glossy Apple Badges by MacTyler

apple-badge-webdesign-psd-free-buttons-icons

11. Glowing Web Buttons by Mac002

glowing-webdesign-psd-free-buttons-icons

12. Web Buttons by ahmadhania

download-webdesign-psd-free-buttons-icons

13. Art PSD by MericG

This would be a really good way to showcase your latest works or designs, beautiful stock!

art-webdesign-psd-free-buttons-icons

14. Realistic IES Lighting Effect by shimapa

realistic-lightning-webdesign-psd-free-buttons-icons

15. Speech box by Fowz

speech-box-webdesign-psd-free-buttons-icons

16. Folders by Autoanswer

autoanswer-folder-webdesign-psd-free-buttons-icons

17. GreenLightOrb, GUI.S Resource by VidarWestfelt

green-light-orb-webdesign-psd-free-buttons-icons

18. Firstsession sample by woopsdez

firstsession-sample-webdesign-psd-free-buttons-icons

19. WebDesigner Mini Kit by LazyCrazy

Just great, I always wanted that cursor buttons, which are useful to show active buttons, show place you’re pointing at and more. Extremely useful for every web and graphic designer.

mini-kit-webdesign-psd-free-buttons-icons

20. Glowing Styles by Nanie-nyo

glowing-styles-webdesign-psd-free-buttons-icons

21. Win7 Library Icon Template 1.2 by Teri928

windows7-icon-webdesign-psd-free-buttons-icons

22. Stylish 3D Buttons by ahmadhania

stylish-3d-webdesign-psd-free-buttons-icons

23. Download button by SG3000

download-btn-webdesign-psd-free-buttons-icons

24. Navigation for web by Bartas1503

nav-web-webdesign-psd-free-buttons-icons

25. Vista Themed Template by soflyfx

psd-vista-template-webdesign-psd-free-buttons-icons

26. Text Template – BOLD by arnoldisawesome

Template to help new users understand layer styles, effects used to achieve such good looking text.

text-bold-webdesign-psd-free-buttons-icons

27. Designer Portal v.1 + PSD by berkayuygun

designer-portal-webdesign-psd-free-buttons-icons

28. SETUP ICON PSD FILE by LeMarquis

setup-box-webdesign-psd-free-buttons-icons

29. iKons Pack PSD by InfinityK4fx

ikons-pack-webdesign-psd-free-buttons-icons

30. Shouts PWN stamps by mindfuckx

shouts-stamps-webdesign-psd-free-buttons-icons

31. Windows 7 Taskbar .psd by Carlos-Way

windows7-taskbar-webdesign-psd-free-buttons-icons

32. etiquette PSD by TLMedia

etiquette-webdesign-psd-free-buttons-icons

33. My Orbs by opelman

my-orb-webdesign-psd-free-buttons-icons

34. nApple PSD Resource by nonlin3

Good looking psd Apple template, great for testing and analyzing effects.

apple-service-webdesign-psd-free-buttons-icons

35. Classic 2 Templates by Kshegzyaj

classic-folder-webdesign-psd-free-buttons-icons

36. Abode Pickleshop by leca

adobe-icons-webdesign-psd-free-buttons-icons

37. Free Template Number 2 by yiolo

free-tech-webdesign-psd-free-buttons-icons

38. Folder Menu Tabs by GraphicIdentity

folder-menu-webdesign-psd-free-buttons-icons

39. Free menu PSD for you by grafxdesign

free-menu-webdesign-psd-free-buttons-icons

Related posts:

  1. 45 Sites, Free Icons And PSD Resources For Web-Design
  2. 50 Free Social Twitter Resources and Icon Sets: Huge List
  3. 45+ Free Design Template And PSD Files
  4. 49 Top Sites And Collections To Find Free Icon Sets
  5. 22 Free Seamless Vector Pattern Resources Perfect For Web Design

November 16 2007

22:53

firstborn

a great site, and an even more impressive portfolio!
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...