dhtml-menu-builder.com » Latest Samples

CSS3 Animated Navigation Menu

evazhou — Thu, 25 Aug 2011 12:01:05 +0000

Navigation menus play a crucial role in web design and a good navigation menu is definitely a plus to the design. Lately I was playing around with CSS3 for a navigation menu and I learnt how to create an animated navigation menu by only using CSS3(No Images, No JavaScript). Using CSS3 in place of jQuery/JavaScript for animations has obvious advantages like faster load time, lesser heavier website, etc. In this article I am sharing the code of a navigation menu made using CSS3. It renders perfectly on Chrome, Firefox, Safari and Opera. And without the easing effects on Internet Explorer and non CSS3 compatible browsers.

The CSS

body {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	background:#545454;
	margin: 0;
	background:-webkit-gradient(linear, left top, right bottom,
        from(#5454  color-stop(.5, #7e7e7e), to(#545454)) fixed;
	background:-webkit-linear-gradient(45deg, #545454, #7e7e7e .5,
        #545454);
	background:-moz-linear-gradient(45deg, #545454, #7e7e7e .5,
        #545454);
	background:-o-linear-gradient(45deg, #545454, #7e7e7e .5,
        #545454);
	border-top:7px solid #52a8e8;
	text-shadow:0 0 3px rgba(0, 0, 0, 1);
	letter-spacing: 2px;
	font-size: 20px;
}
a {
	text-decoration:none;
	color:#fff;
}
header {
	width:850px;
	margin-left:auto;
	margin-right:auto;
}
header nav a {
	position:relative;
	float: left;
	width:150px;
	text-align:center;
	padding-top:23px;
	padding-bottom:30px;
	margin-right:20px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
	background:#52a8e8;
	background: -webkit-gradient(linear, left top, left bottom,
       color-stop(.2, #52a8e8),
        color-stop(1, #4984ce));
	background: -moz-linear-gradient(center top, #52a8e8 20%,
        #4984ce 100%);
	background: -o-linear-gradient(#52a8e8, #4984ce);
}
header nav a:hover {
	padding-top:53px;
	padding-bottom:60px;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
}

The HTML



  
    HOME
    ABOUT
    WORK
    CONTACT
    BLOG

21 Free High Quality Navigation Menu PSD

evazhou — Tue, 23 Aug 2011 11:49:40 +0000

One of the most essential part of website is Navigation Menu, Navigation Menu guides visitors how to navigate, explore and interact with the other parts (web pages) of particular website, a navigation menu should be simple and easy to understand, should not conflict the mind of visitors.

SkyTechGeek explored numerous design sites and collected 21 beautiful high quality PSD files, so that users don’t need to explore hundred of Google Pages to find out an appropriate PSD file for their design, Designers and Web developers can use them in their upcoming projects and can give their websites stunning and beautiful look.

1. Simple Navigation Menu

2. Modern Menu & GUI Elements PSD

3. Slick Horizontal Menu

4. Breadcrumb Navigation

5. Menu Notification Badges

6. Mini Drop-Down Menu

7. Clean Crisp Setting Menu

8. Dark Navigation Menu

9. Candy Coated Red Navigation

10. Navigation Menu Horrido

11. Birds Sign, Grass and Shit Navigation

12. Sci Fi Menu

13. Pixel Navigation

14. Elegant Ribbon Menu

15. Header Navigation Pack

16. Grunge Gothic Navigation

17. Simple Navigation Menu

18. Mega Menu Navigation

19. Fresh Drop Down Menu Pack

20. Pixel Daily

21. Vivid Navigation Bar

8 Well-Designed Tabbed Menus Showcase

evazhou — Wed, 10 Aug 2011 15:32:23 +0000

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks (thanks, Allen).
So, with all of that in mind, take a look at these excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

City of Grace
A good example of tabs that work nice colors into a usable layout.

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Magpie
Doesn’t get much more simple than this, but still a good example.

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

Inkd
Good styling and usable because of size and separation.

10 Attractive Navigation Menus for Inspiration

evazhou — Thu, 04 Aug 2011 14:17:05 +0000

Successful, eye-catching and mainly user-friendly site navigation sometimes is key to whole web design, because users usually search for navigation at first, when they visit website. Also don’t shy to experiment – portfolio websites can stand out just by that, creating something beautiful and unusual. In our days there are times when whole websites slide over your eyes, possibilities are pretty limitless. Keeping in mind such parameters, I created a list with 10 innovative, beautiful, creative and eye-catching navigation menus for your inspiration in web development process.

Panic – Coda

Popular menu already, you may know about this one before.

Helmy-Bern

Excellent example of well implemented grunge website and JavaScript navigation

SkiAlpine

Simple yet well designed navigation dropdown menu.

TapTapTap

Exceptional navigation, you gonna love this one.

TheHoleInOurGospel

Apple

Whole website is one big beauty and MAC section has interesting sliding menu.

Creasenso

Beautiful rollover effects in navigation.

Branded07

Aperfolio

AteBits

8 Example Websites Using Rounded Corner Menu

evazhou — Thu, 28 Jul 2011 15:55:09 +0000

Creating rounded corner in web design absolutely not a new thing, but with the presence of CSS3 in popular browser like Firefox, Chrome, Safari, and Opera, now is easier for us to creating rounded corner, sometimes I remember before when I need to add an image in each corner of the box, what a frustrating. Untill these day many websites still using it as a main navigation style, even in the corporate website, and some of more simple websites their menu style inspired by apple.

Mozilla Firefox

Oracle

Apple

Roxio

Real Mac Software

gOSSkype

Loop Insight

10 Creative Drop Down Menus

evazhou — Tue, 26 Jul 2011 16:41:04 +0000

One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation.

The result is a boring list of links.

That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around.

In this post we’ve pulled together some of the best designed drop down menus (both horizontal menus and vertical menus) to help give you ideas to enhance your own.

1. Clear Left

Another multi-line menu with a great color scheme.

2. Mint

Another wide-tabbed menu with a transparent effect.

3. Ronny Pries

Chalk-on-blackboard effect makes the menu casual yet creative.

4. Sohtanaka

Pretty colors, elegant fonts and light effects.

5. The Resume Girl

Another creative menu with a nice casual look.

6. Web Designer Wall

Another casual sticky-note style menu.

7. Carbonica

A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.

8. IipVapi

A black-and-white vertical menu in the shape of a post card.

9. Nando Designer

A casual menu with a notebook effect.

10. Nick Ad

A highly dynamic menu with great effects and contrasting colors.

Drop-Down Menu: 10 Useful Scripts to Enhance Header Navigation

evazhou — Fri, 04 Mar 2011 15:49:51 +0000

Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It’s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern.

In this article, we’d like to show you some of the best drop-down menu scripts we come to know. These drop-down menu varies from CSS only, CSS & Javascripts and menu that will work with your current Javascript library like jQuery, MooTools and Prototype. Full list after jump.

CSS (Only)

If you are worried about Javascript disabled on client’s browser, these css-only drop down menu will not fail you.

Ultimate CSS only drop-down menu

CSS Express Drop-Down Menus
Help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other “pure” CSS menus.

CSS + Javascripts

With the help of Javascript, drop down menu are more interactive or at least they get some subtle animation that enhance user experience. CSS on the other hand, make sure the look and feel is easily cuztomizable.

Professional dropdown

Drop Down Tabs (5 styles)
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. Comes in 5 different styles.jQuerys

If you’ve implemented jQuery Javascript Library on your site, here are some really cool jQuery based drop down menus you should know.

Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
Menu system, which can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options.

Mega Drop-Down Menu
A drop down menu that holds more than just new line of links. It also makes group links and make nagivation much easier!

(mb)Menu
Powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way.

MenuMatic
MenuMatic takes a sematic ordered or unordered list of links and uses MooTools 1.2 to turn it into a dynamic drop down menu system, with enhanced usability and flair.

Unobstrusive Mootool Drop Down Menu

Scriptaculous/Prototype

Dropdown Menu
Based on Knallgrau Unordered list. Here’s more similar drop down menu – Horizontal dropdown menu, e24TabMenu.

Showcase Of Beautiful Vertical Navigation Designs

evazhou — Tue, 01 Mar 2011 17:27:47 +0000

Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.

Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.

Riot Industries
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.

vertical

Village Version
Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).

Bruno Souza
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.

Cambrian House
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.

Comfort Brothers
Navigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.

Auberge de l’Ill
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.

The Hipstery!
This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.

Research at MICA
The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.

Power to the Poster
The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.

From the Couch
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.

10 Innovative Icon-Based Navigation Menus

evazhou — Tue, 01 Mar 2011 17:05:20 +0000

Here at Design Shack we love a good navigation menu. Lately we’ve noticed a trend arising around menus that use icons either exclusively in place of text or as a support of additional textual information.

Adding icons to your navigation can not only give you an aesthetic boost but actually make for a quicker visual read of the link. Here’s a collection of over thirty icon-based navigation menus that we found online. We’ll conclude with a few resources you can use to snag some free icons to create your own fancy menus.

KK Media

Bite Club

Mac Rabbit

Narwhal Company

Pixel Resort

Fishing Cactus

Tutorial 9

Envira Media

Duarte Pires

Weblifting

15 Really Amazing jQuery Navigation Menu

evazhou — Thu, 24 Feb 2011 16:18:33 +0000

JQuery is a most useful component that can giving your visitor unique experience in a variety of ways, like image sliders, show your twitter stream, image galleries, navigation menu and contact forms.

In this post you’ll find 15 really amazing jQuery navigation menu in tutorials and premium scripts, which will help you to create a navigation menu of your dreams.

Tutorials of Amazing jQuery Navigation Menu

Rocking and Rolling Rounded Menu with jQuery

by Mary Lou
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Halftone Navigation Menu With jQuery & CSS3

by Martin Angelov
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Beautiful Slide Out Navigation- A CSS and jQuery Tutorial

by Mary Lou
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

How To Create a Cool Animated Menu with jQuery

by Chris Spooner
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.

Beautiful Background Image Navigation with jQuery

by Mary Lou
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

Animated Navigation with CSS & jQuery

by Soh Tanaka
As I was checking out some flash sites for inspiration, I ran across a couple websites that had some nice navigation effects. I’m not a huge fan of wildly animated navs, but these had simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today.

A Fresh Bottom Slide Out Menu with jQuery

by Mary Lou
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

How to Make a Smooth Animated Menu with jQuery

by Zach Dunn
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects.

Overlay Effect Menu with jQuery

by Mary Lou
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

CSS Dock Menu

by Nick La
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 of my icons. It comes with two dock position: top and bottom.

Little Boxes Menu with jQuery

by Mary Lou
Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image.

Premium jQuery Scripts for Cute Menu Navigation

SV Animated Menu Pack 2

by SplitV
This is a set of 4 animated menu scripts. All are stand alone, requiring no external libraries or frameworks. They are extremely small at 1-2kb a piece uncompressed. If you compress them they are all closer to 1-1.5kb. These scripts make it possible to create great menus with flash like effects very easily.

Nice Menu V1.0

by Alexandra1710
A new way to slide between 2 level huge menu.
easy to use, valid html and css code
works in all majors browsers
easy to plug and play script to your website / blog or gallery

Super menu pack (10 menus)

by VanKarWai
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.

It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.

Cute Menu – 8 transitions pack

by arl1nd
Cute Menu is very simple to embed to your HTML code. It’s requirements are only JavaScript and CSS support.

Article source: http://www.dynamicwp.net/