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.

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.

3. CSS Dropdown Menu Tutorial

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

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.

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.

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.

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.

8. Horizontal Subnav with CSS

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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+.

21. CSS Overlapping Tabs Menu

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

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.

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.

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.

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.

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.

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.

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.

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).

30. Create Windows 7 Start Menu Using CSS3 Only

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

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.

2. Liquid & Color Adjustable CSS Buttons

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

3. CSS3 Gradients: No Image Aqua Button

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

4. Sexy CSS Hover Button

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

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.

6. Roll Your Own Google Buttons

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

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.

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

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.

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!

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.

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.

13. How To Design A Sexy Button Using CSS

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

14. Radioactive Buttons

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

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.

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.

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.

18. Build Kick-Ass Practical CSS3 Buttons

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

19. CSS Only Button

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

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.

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

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

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!

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.

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.

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.

I wondered and decided to create article about it – finding the most popular, interesting and eye-catching WordPress toolbar plugins you could use daily to increase pageviews, comments, sharing, twitter followers, subscriptions and more. Some of these plugins even offer online chat with your readers, how cool is that? Enjoy, research and find your pick! Let us know your favorite toolbar plugin as well!

1.Extendy Toolbar

This plugin installs the Extendy toolbar to your blog without having to make edits to any of your template files. Note that you must have an Extendy account, available for free at http://extendy.com . Extendy lets visitors share their favorite pages, search your content, view your latest tweets and blog posts, connect with you across social networks, and more.

2. Meebo Bar

3.Gigya Toolbar

The Gigya Toolbar increases your blog’s traffic and provides an oppurtunity to make extra revenues.  Here are features Gigya offers:

• Get return traffic when users share and tweet from the toolbar.
• Supports 80 social destinations and includes a Facebook fan page and Twitter updates buttons.
• The toolbar does not affect page load time. It loads only after the page is fully loaded.

4. WordPress Toolbar Plugin

Static Toolbar displays a static toolbar in the bottom of the page, which may contain last posts, rss feed, search engine, social network and sharing links.

5.WordPress Toolbar

This WordPress toolbar will automatically enable a toolbar for all outgoing links from your blog, it is similar as Digg or Stumbleupon. It helps to keep visitors coming back and write some comment or social bookmarking. Great tool.

6. mit3xxx.de Toolbar

Adds the mit3xxx.de toolbar to your website.

The mit3xxx toolbar allows you to add the following features to your site: navigate to the start pageintegrate a button to your rss-feed,let your users tweet your content, share your content to social network sites such as Delicious, Digg, Facebookanr more. It also provides more then 20 themes.

7. WordPress Theme Demo Bar

WordPress Theme Demo Bar is a plugin for wordpress (compatible up to WP 2.8.3) allowing to preview any wordpress theme without activating. Demo bar is customisable in admin panel, with several CSS style files as well. Very handy for theme developers or Wordpres theme related articles.

8. The WordPress Bar

Editor’s description:

“Seen the DiggBar on Digg.com? Add a similar feature to your WordPress blog. Use your blog as a short link service with Easy Link Creation. Feature any link on the internet with a custom URL such as http://www.internetriot.com/?bing. Also feature social network links such as Facebook, Twitter, and Digg.”

9. WP External Links Bar

Maintain your external links (in posts and comments) in your site. Create a Link Bar like facebook, digg and google with share link as well.

10. WordPress Admin Bar

This plugin replicates all of the menu links in your normal admin area at the top of your main site for logged in users (i.e. you). You can go right to the “Write Post” or manage options pages in one click from anywhere on your blog. No more having to go to your dashboard first. You can even have it replace your admin area menus if you want.

11. WordPress Admin Bar Improved

Similar plugin to WordPress admin bar but with several improvements – now even if you are not logged in you can – you will have top toolbar visible to login.

>

12.Drag-To-Share eXtended

This plugin mimic the Mashable functionality where news stories and interesting articles can be shared to social networking sites. The functionality is driven by the images accompanying the articles, you click and hold on an image and can then drag it into a toolbar to share it. It’s brilliant and intuitive!

13. Snipi for WordPress

Using the Snipi Toolbar, you can drag and drop images from anywhere on the Internet and have them appear automatically in your WordPress Media Library or NextGen Gallery. Interesting toolbar indeed. Check Youtube video for more.

14. Fixed Social Buttons

This plugin will add fixed social buttons on right side : twitter, facebook, myspace, reddit, delicious, technorati and rss feed buttons. Open social bookmarks links in a new or in the same window with “rel=’nofollow’” attribute or not.

15. WP Super Bar

A very simple bar for outgoing links in your posts.

16. Fixed Search Button

Looks promising plugin, with handy buttons. This plugin will add fixed buttons on right side :

• Home button
• Login button
• Contact button
• Search button
• Go to top button

17. Frame Breaker, aka Die Digg-bar die!

Something different – did you want sometimes to people visit really your page not digg-bars, different frames like you will see in this post also. Activate this plugin to get rid of such frames.

I could find fixed Twitter and Subscribe buttons, I see often on left or right sides of windows. If you know one, please share with me as well, so I would be able to create even more comprehensive list. If you know more such fixed toolbars, bars, buttons please do share!

Navigation is very important aspect in every web-design, because it is usually the place where people will click the most as well as notice creative and usable buttons. Really all we need is to get visitor remember our site! To complete and sharpen you need to use Photoshop here, actually version doesn’t matter, I am sure everything can be completed in any of PS previous versions too!

Let’s get started and learn how to create shiny, clean, stylish, glossy or even 3D navigation menus! Hope you will enjoy this article!

1.Content Box With Orange Banner Heading

In this tutorial you will learn how to create a content box similar to the ones used on this site, where the corners are rounded and the heading has a 3D effect.

2. Vista Styled Button Photoshop Tutorial

Learn how to make a vista styled button by using lots of different layer styles, tools and techniques.

3. How to Create a Slick and Clean Button in Photoshop

This Photoshop tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).

4. Blue on Black Navigation Bar

Design a beautiful navigation bar in Photoshop. This tutorial will teach you how to combine several layer styles to create a beautiful yet simple navigation bar.

5. Green Navigation

In this tutorial, you will learn how to make a stylish looking green navigation with a shine effect.

6. High-Detailed Plastic Navigation Bar

This tutorial is describing detailed process of creation of “plastic” navigation bar.

7. Modernistic Navigation Module

Create this beautiful navigation module with Photoshop. This Photoshop layout tutorial will show how simple shapes and gradients can create elegant designs.

8. Create a Nice Stylish Glossy Button in Photoshop

9. Light Lime and Blue Navigation

10. Stylish Dark Navigation Box

In this tutorial you will learn how to make a more advanced styled navigation box using some more effects and tools.

11. Creating A Cool 3D Web Design Effect

In this tutorial you will learn some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.

12. Web Button Making Tutorial 1 by easydisplayname

The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.

13. Web Button Making Tutorial 2 by easydisplayname

The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.

14. Photoshop Tutorial: Designing a Unique Bookmark Box

In this Adobe Photoshop tutorial we’ll be learning how to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

15. Volkswagen Inspired Navigation

16. Professional Menu Button

In this easy, step-by-step tutorial you are going to see how to design an interesting professional menu button by using some simple filters, for example Gaussian Blur & Motion Blur.

17. Design Watercolor Effect Menu

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article),you will learn how to design a watercolor effect menu in Photoshop.

18. Professional header design for your website

This Photoshop CS3 tutorial will teach you how to make a nice-looking and professional header for your website easily.

19. Glossy-Style Carbon Fibre Navigation Buttons

20. Interface Orbs

Shiny glass orbs have been popular fixtures for web interfaces and application skins for quite some time. In this tutorial, you will be going over a technique for making a standard interface orb.

21. How To Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

22. Clean Vertical Navigation Interface in Photoshop

In this photoshop tutorial you will learn how to create a Clean Vertical Navigation Interface for your website.

23. Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

24. RSS button in Photoshop

25. Stylish Dark Navigation Menu

In this tutorial, you will be learning some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.

26. Sleek Photoshop Header Design

27. Slick Blue navigation

Learn how to create a slick looking web 2.0 website banner / header!

28. Sleek Glossy Blue Button

Use a variety of different techniques to make a stunning button.

29. Simple Glossy Navigation Buttons

30. Navigation Bar – Create a glass type navigation bar

31. Simple and Clean Menu Bar

Learn how to make this simple and clean menu bar.

32. Glossy Web 2.0 Button

Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.

33. Pixel Style Navigation Box

Learn how to make a navigation box with a unique pixel style.

34. Professional Dark Web Button

This tutorial will show you how to make a Professional web button and also to use it like a Navigation Bar.

35. Clean Blue Navigation Box

This tutorial is going to go over how to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.

36. Create a Wii Web Header in Photoshop

This photoshop tutorial will teach you how to design the Wii header found at Nintendo.com.

37. Metallic Header Design in Photoshop

38. Design Web 2.0 Interface in Photoshop

Understanding the tutorial below is understanding it’s technique, with it you can draw yourself some graphical user interface for a website. Side navigation, buttons, headers, for instance. All Web 2.0 style.

39. Creating flexible buttons using Photoshop shapes and styles

40. Web 2.0 style buttons tutorial

41. Shut Down Button

42. Clean White Navigation

43. Photoshop Button Maker

44. Web buttons

45. Chrome Button Navigation

46. Glass Button Photoshop Tutorial

47. Green Gel Button

48. Awesome, War-Style Game Buttons

49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

50. Easily Create An Apple-Inspired Navigation

If you know any more quality navigation tutorials, please add links on the comments! Thank you!