dhtml-menu-builder.com

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

How to add Google style menu bar for your blog- Google nav Menu

evazhou — Fri, 19 Aug 2011 14:10:20 +0000

Google recently updated its all product with new design and also navigation menu in the top of the header. Most of the developers and me too likes google’s new nav menu and want to install this menu style to my blog. The simple code to add Google style navigation menu to header for blogspot user.

For Blogspot users:

1. Sign in to blogger.com

2. Go to design and Edit HTML (Note: Download template xml file with download full template)

3. Find ]]> and paste below code to above it.

Code with custom left Search bar:

#c4t_topbar { height: 30px; background: #2d2d2d; width:100%; } #c4t_access { display: block; float: left; } #c4t_access .menu-header,div.menu { font: 13px/27px Arial,sans-serif; margin-left: 4px; width: 960px; } #c4t_access .menu-header ul,div.menu ul { list-style: none; margin: 0; } #c4t_access .menu-header li,div.menu li { float: left; position: relative; } #c4t_access a { color: #ccc; display: block; height: 29px; line-height: 30px; text-decoration: none; padding: 0 10px; } #c4t_access ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; } #c4t_access ul ul li { min-width: 180px; } #c4t_access ul ul ul { left: 100%; top: 0; } #c4t_access ul ul a { background: #f1f2f4; line-height: 1em; width: 160px; height: auto; padding: 10px; } #c4t_access li:hover > a,#c4t_access ul ul :hover > a { background: #444; background: #4c4c4c; color: #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #c4t_access ul li:hover > ul { display: block; } #c4t_access ul li.current_page_item > a,#c4t_access ul li.current-menu-ancestor > a,#c4t_access ul li.current-menu-item > a,#c4t_access ul li.current-menu-parent > a,* html #c4t_access ul li.current_page_item a,* html #c4t_access ul li.current-menu-ancestor a,* html #c4t_access ul li.current-menu-item a,* html #c4t_access ul li.current-menu-parent a,* html #c4t_access ul li a:hover { height: 28px; line-height: 27px; border-top: 2px solid #DD4B39; color: #FFFFFF; font-weight: bold; } /* Google Search Navbar*/ #google-search { width:175px; height:19px; float:right; moz-border-radius:10px 10px 10px 10px;border-radius:10px;border:3px solid #B1C3FC;margin:5px 0 0;padding:1px;background-color:#F1F4FE; display:block; margin:5px 5px 0 0; } #google-search form { float:left; } img.magnify { position:relative; top:7px; left:-5px; display:none; } #google-search input[type="text"] { float:left; width:150px; font-size: 12px; border:1px solid #186F9A !important; font-family:Arial; padding:2px 10px !important; margin:1px 0 0 0; } #google-search input[type="submit"] { display:none; }

Code without Search Bar:


4. Find  and copy below code and paste to below body section.
HTML Code with Search bar:












Home





thangaraju blog





care4tech





w3newz





Technodriller





Digzzy





Movies











 










Google Navigation Menu without Custom search:












Home





thangaraju blog





care4tech





w3newz





Technodriller





Digzzy





Movies












5. Save template to view Google style navigation.
Note: For both CSS and HTML code above to match with custom search bar or without custom search bar.

Don’t Underestimate the Importance of Navigation in Web Design

evazhou — Tue, 16 Aug 2011 16:56:42 +0000

When people are surfing the web they will get very impatient when they cannot find what they want quickly. Navigating the web has to make sense to the surfer and right away, so if the web design is done with this in mind, the layout of an effective website will have similarities to all the others.

You need to use standard conventional links like buttons underlining the text and changing the color. It is not such a good idea to use clever names for the links. Simple is good. Keep in mind the type of people who are going to visit your website and have it designed to suit them.

The elements of navigation are very important so whether you are trying to inform a person about a service or product, or trying to sell them this service or product, the web design for your links can be the important factor to consider.

Inform the visitor to your website that the link is just that. Say you are in real estate and your property is in a specific city so you need a link with a map of that vicinity to guide them to all the particulars about that area. They will need the city name to click on to so specify this on your site. Professional web designers have a rule they use which is the three clicks method. When a person is surfing they will click no more than three times to get the information they are looking for so make sure that they will reach all the particulars of your site within those parameters.

Three clicks on your website should get them to all that they need to know. Keeping your web page with a simple web design is more attractive and is able to keep a person’s interest better than one which is too full of information. People do not want to read a huge amount at one time. People who surf the web are basically looking for information, so only use a short movie or clip if it really adds to your site, and make sure there is an easy way to link to it or they will be gone from your site forever.

The best places for navigation

Top Menus-located below the graphic header page where the logo site is found. These will be expanding menus drop menus or single links. A text or graphic will represent them. A visitor can click on the link to any of them. Bottom Menus can be a footer or menu bar. Footers use text links while menu bars use text links or graphics. These are all very important aspects of web design.

Right side navigation is not so often used but can be on the right side of the page as a text area or column. Most often it is used for advertising. Left side navigation is just the opposite to the right this is located on the left and usually the top of the page.

These are just a few suggestions that you are going to want to keep in mind for your web design decisions.

Accessibility Tips for Better Navigation

evazhou — Thu, 11 Aug 2011 11:00:00 +0000

Website navigation is our common communication system between all other web pages. Interlinking through unique identifiers (URLs) has worked for decades. If anything navigation links have been with the basics of web design since the early days. Through advancements in digital arts and design we have seen new practices bubbling up everywhere.

Accessibility has turned into a major concern for Internet browsers. With more users on their mobile phones and tablet devices it’s important to develop a navigation around common themes. Below are some themes repeated in modern designs for good, clear website navigation.

Placement is Everything

How your navigation looks holds well over 50% importance towards how your visitors will conceptualize and interact with your site. The needs between each website are also very different since there are varying degrees of access and focal points.

A personal portfolio website may contain 2-3 simple pages with content and information. This is much different than a social networking application which will present tens if not hundreds of different views. This means fitting a lot of links into the same amount of “room” on a user’s monitor.

Top/right placements have yielded the best results for collective site navigation. Often you’ll see horizontal links sewn across the page a-la bar-style. This works well and can even contain deeper level links in drop-down submenus.

Sidebar Links and Advantages

I haven’t seen too many around these days but for future reference there is always plenty of room in a website’s sidebar for overflow. Instead of trying to cram 30 or 40 links into a horizontal bar, why not split 8-10 of the site’s most important links as a heading?

Using this methodology you keep your visitors focused on the core pages at the top of your layout while offering sub-topics and related pages all down the sidebar. This method can work well with smaller-niche sites such as video game communities. Heading links should contain the site’s core pages while information about the games, characters, bios, forums and other resources can be split into sidebar pieces.

Develop Font Styles Concisely

CSS provides a number of advanced features, even for today’s standards. The ability to add text shadows, glows, embossing (and the list goes on) with just a few lines of code is irreplaceable. Typography will make up mostly all of the content on any website and this is especially true for site navigation.

As a small example the choice between sans-serif and serif font can make a world of difference in a finished product. Simple designers stick with simple mindsets and will sometimes choose options at random – clearly not the best approach. Consider how your final page layout should look, how elements are aligned. Take into account what style of font would best stand out as a frontier menu navigation.

You may also try simple text manipulation techniques to draw attention. Bold lettering, text capitalization, small caps and letter-spacing variants are all fun and unique options to try out. CSS3 offers universal rounded corners which can be applied onto background colors and images for neat effects.

Best Practices for Dynamic Menus

Since many site navigation links will require crawling it’s important to understand how to style a menu. As Google and Bing send their search bots out into the web you’ll notice how quickly a new website will become indexed. Pages which are readily available will be checked and ranked while an order of importance is applied.

It can be useful to structure links with unordered lists in HTML code. This is a malleable system which allows for easy addition/subtraction from a website. Often you’ll want to add links or change text in your site navigation on-the-fly. Holding all of the pieces together in a list will help web bots understand the hierarchy and makes editing super simple.

Unordered lists also allow more creativity when working with CSS selectors. For example you may develop a class “.active” which is applied to the navigation link which matches the current page. This can be applied dynamically in all backend languages and is even possible through JavaScript (though not recommended).

Separate File Includes

Web developers with any experience in backend programming such as Python or PHP should be familiar with includes. When working with multiple files in a project you are able to include code from another set into a page. This provides huge benefits when it comes to web layouts, especially for navigation design.

Instead of keeping multiple files with navigation links in each it is much simpler to hold an external file with HTML code already written. Then using include functions it’s simple to add the file into any web page. This process means you can add/remove links by editing just a single file – and all changes are updated site-wide immediately.

Though the exact code for including files will change based on your backend language of choice (PHP, RoR, etc…) it’s all generally the same idea. Check through Google for a basic guide if you’re lost, since the implementation is a bit out of scope for this article.

Design and Translate

The best way to learn proper navigation styles is to study the greats. Check out popular design galleries and notice key advantages to other navs (especially websites related to your niche). Modern design frequently changes and there are no base rules or stone-set solutions.

The best trends cannot be taught and must be learned through frequent practice. This is why studying comes so heavily into play when discussing unique webpage design. Examine the works of other skilled designers and compare elements. Take the best of all worlds and combine techniques together for your own navigation formula.

If you’d like to get more involved there are many HTML/CSS menu tutorials available for free. They offer an easy step-by-step process to get integrated in the world of web page navigation design. The topic is broad yet refined enough to present accessibility problems. Universal rules tend to limit creativity in this area, however one truth seems to remain: the best way to build is study and practice followed by innovative actions.

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.

Creating a Floating HTML Menu Using jQuery and CSS

evazhou — Fri, 05 Aug 2011 10:49:10 +0000

For all of us who deal with long web pages and need to scroll to the top for the menu,

here’s a nice alternative: floating menus that move as you scroll a page. This is done

using HTML, CSS and jQuery, and it’s fully W3C-compliant.

View floating menu samples here

This tutorial covers how to create a “floating menu” using HTML, CSS, and jQuery. To

reiterate, a floating menu stays visible even if you scroll down a web page. They’re

animated, so they move up and down as you scroll the browser window up or down. I am

going to show you how to make a floating menu using jQuery and CSS, and hopefully make

some new jQuery disciples .

Before we continue to the coding steps, have a look at the two screen snaps below. The

first shows a web page with a floating menu at top right. Of course, you can’t tell it’s

floating until you see it live and actually scroll the page. So look at the second

snapshot, and you can see that the menu has moved.

Figure 1

Figure 2

Step 1

Let’s start with the HTML markup for a nice menu consisting of three sub-menus:
view plaincopy to clipboardprint?

Home

Table of content

Exam

Wiki

Technical support

This is the basic markup we will use. The main part in this bit of HTML is the

floatMenu”>…

in Line 01, which encapsulates the whole menu. The three lists are

only used to demonstrate structure, which can be modified to suit your needs. In this

case, there are three sections to the menu, as represented by three unordered HTML

lists.

As a matter of habit, I disable the click on dummy links (href=”#”). Just to be sure

that a click on a dummy link doesn’t send the page back to the top, there is also an

onclick=”return false;” in . This method allows to add menu item features such

as lightboxing – something that requires the page to stay at its current vertical

position when the user clicks on a menu link.

Step 2

Now we need some CSS rules to skin and position the menu. (I used Eric A. Meyer’s CSS

Reset, so that’s why there is no margin:0 or padding:0 on the ul element):
view plaincopy to clipboardprint?

body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px “Lucida Grande”, “Lucida Sans”, “Trebuchet MS”, verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}

The body height (Line 03, above) has been set only to get enough room for our menu to

scroll up and down with the page. This should be removed in a real case scenario. The

two other things to take note of are the position:absolute (Line 08) and the left:50%

(Line 10), both in the #floatMenu CSS rule (Line 07), above.

The “position” attribute is used when you need to remove an element from the flow of the

document and keep it at a precise place in your page. If you use the text zoom function

of your browser, an element with absolute positioning will not move, even if the text

around it increases in size.

The “left” attribute is used to position the specific div element horizontally. The

value needs to be defined as a percentage in the case that we want a centered design.

With a 50% value, the left side of the container is positioned in the middle of the

page. To position it left or right we need to use the “margin-left” attribute (Line 11),

with a negative value for an offset to the left and a positive one for an offset to the

right.

The others elements in the above stylesheet rules customize the visual design.

Step 3

Now we have a menu of three sections positioned in the upper right hand side of the

page. To enhance the menu item roll-over effect, let’s add style classes menu1, menu2

and menu 3 to each menu section, respectively (to each

distinct sub-menus using our 3

code shown in Step 1 above:
view plaincopy to clipboardprint?

Now let’s define some CSS hover-based roll-over effects, which will be different for

each menu section.
view plaincopy to clipboardprint?

#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Now each menu section will display a different color when the mouse hovers over a menu

item. If you like, you can also add rules for other menu link states using :link,

:visited, :hover and :active pseudo classes. The order in which you should write them

can be easily memorized like this: LoVe and HAte, where the capitalized letters

represents the first letter of each state.

Step 4

We’ve got a nice looking menu and could stop here, but we do want that floating menu, so

it’s time to add some jQuery. You’ll need to download the jQuery library and the

Dimensions plugin. This plugin will be used to grab information about the browser’s

window (width, height, scroll, etc.). You can link to both bits of jQuery code from your

HTML file in the … section. Just remember to change the URL path according

to where on your server you place the jQuery library and plugin files.
view plaincopy to clipboardprint?

We’ll need some custom jQuery code as well, so start a new

Add the following jQuery code inside the the