My Facebook-style tutorials are very popular among you people and Almost 5000 downloads have been counted for the Facebook wall script application. Thank you all who like and appreciate my work. Last few days I was searching about checking domain names’ availability using Ajax and PHP.
I found some solution and I thought to create a post on my blog so that anyone can get this simple script easily. I used jQuery and CSS3 to put some attractive looks in this. Share it if you like this tutorial. Thanks a lot!
Having a great and user-friendly navigation menu is important for any website to give visitors a good experience and to help them navigate to the content they need, it is an important requirement for SEO and it helps in site ranking. When designing a website it is useful to look for Navigation menu PSDs as a source of inspiration and to find usable design elements.
This may speed up the design process and also help to overcome the design of difficult elements by having a look at how others solved it. Besides doing the hard work yourself it is also an option to pick a ready-to-use CSS navigation menu plugin that should work on any type of website.
WordPress users are typically spoiled as there are so many nice simple WordPress themes with great-looking navigation and WordPress navigation plugins.
In this article, you will find plenty of inspiration to get started designing your own navigation menu on Photoshop.
Simple navigation menu by Pawel Kadysz
This is a simple navigation menu with a dark mega sub-menu.
Free PSD – 6 Navigation Bars by Design Beep
This navigation menu PSD set includes 6 Navigation Bars with fully layered and easy to modify every element including colors and patterns. All the fonts and icons are free for personal and commercial uses. You can change to whatever you like. You can easily resize the navigation bar. You can use both for personal and commercial projects.
This is a set of 3 awesome navigation styles (FREE PSD)
Drop-down navigation bar (Free PSD) by duck files
Neat and simple navigation menu bar for a corporate website. Clean style. Unlimited levels. The current menu item is available.
Slick Menu comes in a variety of colors such as Blue, Aqua, Pink, Mustard, Purple, and Lime. A perfect unique blend of colors tailored for your future web project.
Dark Menu PSD by Ahmad Hania
The Dark Menu is designed to look simple, stylish, professional, and attractive. This resource has all layers intact, with menu items normal, hover, and active states, it has also a design for a dropdown. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed.
Free Ribbon Navigation PSD by WillyEpp
This is a really great-looking navigation menu using ribbon as the finish.
Pop Up Black Sleek Buttons by Layer Lovers
Pop up Black Sleek Buttons Lined with Pink Diagonal Striped Bar under Green and Pink Flowers Navigation
Candy Coated Red Navigation by Layer Lovers
Grayscale is Mac Inspired and fully editable. PSD file with FREE grayscale web elements for your website or another project.
Dropdown Navigation Bar by DuckFiles
This is a navigation menu for different types of websites. Good base for a future web design. The .PSD file has a good hierarchy. It is ready to customize.
Black and Silver Navigation by easy display name
This menu PSD contains a black and a silver design where active menu items look like they are cut out or pushed down. The light effects are pretty good and worth using.
Modern menu & GUI elements PSD
This is a set of modern menus and related GUI elements in PSD format. These ribbon-style menu and web elements are pretty handy and may be helpful in your next creative web design.
Iconic Navigation Menu bar PSD by CSS Junction
Here you find a free navigation menu PSD that is silky, high contrast, and with icon + texts for menu items.
Profile Menu by Hector Ardila
Different but cool navigation meant to be used as a profile menu. Idea saw on a community site project.
Pretty dropdown menu by Pawel Kadysz
Great looking dropdown menu PSD with icons. Two-color schemes for both light and dark backgrounds. You can change the color of the menu with just a few clicks.
Navigation PSD Pack
7 Layered Navigations in black, blue, red, green, orange, pink, and grey.
Mini Navigation Daniel Sandvik
Simple and clean menu layout in light and dark colors.
Yellow Navigation David Bradley
14 Free Custom Web Navigation Menu PSD by Download PSD
The PSD set consists of 1 PSD file with different Navigation Menu Styles and color variation.? This layered PSD is arranged in groups and named perfectly. You can modify this PSD according to your needs. All menus are editable, you can easily update color, change the size, remove text. Rollover states and sub-menus? are in their own layers and groups.
Navigation Free PSD by WillyEpp
Another dropdown design available as a Photoshop PSD file for free download
Horizontal Dropdown Menu Bar by Adrian Pelletier
Horizontal Dropdown Menu Bar is a PSD file with a clean menu design. Dropdown menus are one of the most commonly used elements in web design.
Simple Dark Navigation Menu (PSD) by Orman Clark
This is a clean and simple dark navigation menu PSD ready to be picked up.
Stylish Navigation by sirjeffoakley
Navigation menu PSD with 3 ready-to-use menus.
Dark Button Navigation (PSD) by Orman Clark
This is a simple navigation menu made up of a series of buttons and a single search field
Header & Navigation Pack by Adrian Pelletier
Header & Navigation Pack is a PSD file with 3 different styles of header and main navigation designs. Each design includes normal, hover, and active states for the links
Checkout Process Navigation (PSD) by Orman Clark
Not really a traditional navigation menu, but a checkout process indicator or navigation – an absolute must for any eCommerce operation.
Free Colored Web Menus by MosheSeldin
Here you find several cool Looking Colored Web Menus In a Single. PSD
Clean & Simple Navigation Menu (PSD) by Orman Clark
This PSD provides a great design for a clean and simple navigation menu.
Bold and Chunky Navigation PSD by Liam McCabe
Simple dark navigation menu PSD with a good-looking mouse over effect.
Plaid Navigation by Layer Lovers
Premium tabbed navigation by Layer Lovers
This PSD offers a cool tabbed navigation with icon images.
Vertical Navigation Menu (PSD) by Orman Clark
In this PSD you will find a sweet and simple vertical navigation menu with styles for sub menus thrown in for good measure.
Elegant Ribbon Menu by Adrian Pelletier
Elegant Ribbon Menu is an attractive, ornate PSD file with three different ribbon colors. The layers are well organized and creating new menus with your own color choice is very easy.
Breadcrumbs Navigation PSD by Liam McCabe
Navigation menu PSD for designing a breadcrumbs function.
Sexy Dropdown Menu by Web Designer Aid
This is a nice dark dropdown navigation menu PSD where the dropdown overlaps the main menu area.
Free PSD Source – 2 by prkdeviant
Simply menu for that could be useful e.g. for an upcoming WordPress theme or portfolio site. It is available in all that 4 colors.
PSD navigation menu by PSD Graphics
10 unique website navigation menus with rounded corners, for your web project. Used glossy style. All menus are editable, you can easily update color, change the size, remove text and export it in a necessary file format. Rollover states are in their own layers.
Pixel Navigation by Layer Lovers
Mega Menu Navigation Free PSD by Victor Osea
Mega Menu Navigation, perfect for an e shop website. You can modify the PSD to suit your needs.
Website menu PSD by Martz90
Menu Notification Badges (PSD) by Orman Clark
Included in the download (layered PSD) is a navigation menu which is a nice little bonus. The main freebie, the badges, come in 3 colours giving you some options to play with.
Dark Navigation Menu (PSD) by Orman Clark
This dark navigation menu can be dropped straight into a bunch of different designs and you’re good to go. Included in the download (PSD) is of course the navigation menu bar itself and two varying hover or active states
3 color borders navigation by goldhand88
3 color border-style navigation.
Clean, Crisp Settings Menu by Taiyab Raja
clean, crisp settings menu (PSD) for all your menu lovers. The download includes a fully-layered PSD ready for use.
Author: Lars Vraa
Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools, etc., and to write articles for tripwire magazine readers.
1. Custom Styled Radio Buttons and Checkboxes
It is always hard and next to impossible to customize the style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and checkboxes to make them more user-friendly. Here are two different ways to stylize them:
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts, JQuery can improve your SEO efforts. Here’s the jQuery way to set the equal height of multiple elements using the equal heights plugin. With this plugin, you can make equal height columns with just a single line of code. view plain copy to clipboard print?
3. Styling Select Elements
<select> is another HTML element that is not easy to customize using CSS, but with jQuery at our disposal, we can certainly make them look cool and usable.
jQuery UI Select menu This is a plugin for jQuery UI that lets you customize select elements easily.
It is always good to provide visual feedback to users when they perform any action while using a web form. Highlighting the field in which the user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides a good user experience.
5. Fix IE Overflow problem
Internet Explorer has this rather strange problem, when overflow is set to auto or scroll, the scrollbar shows up inside the width of the element. This is fine when you have multiple lines of text within that element, but if you just have a single line of text, then the scrollbar would cover that and it won’t be visible. This jQuery technique from Remy Sharp will fix that IE bug.
6. Block Hover Effect
Creating block hover effect with CSS using display:block is possible but when you have some other content inside a box alongside the link, then it is not possible to create a semantically correct block hover effect using CSS. Here’s a nice jQuery plugin – Bigger Link to achieve that.
7. Rounded Corners
CSS Rounded corners are now supported by most browsers like Firefox, Safari but some browsers like IE do not support them. For those unsupported browsers, you can use jQuery Curvy Corners.
8. Attractive Menus with jQuery
Creating a CSS-based navigational menu that displays hover state separately is not difficult, but with a little amount of jQuery, you can achieve some really nice effects. Check out these two example menus that use jQuery to produce a very subtle hover effect. Create an Attractive jQuery Menu with Fade In and Fade Out Effect
Animated Menu Using jQuery
9. Creating a Floating HTML Menu Using jQuery and CSS
You can fix the position of an element using the property but that won’t provide as rich a user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, the menu also follows your mouse scroll.
10. Splitting Content over multiple columns
Ever thought of splitting the text of a page into multiple columns just like a newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split the content into multiple columns with a single line of code.
11. Semantic Blockquotes with jQuery
If you use blockquotes in your design to highlight important points of an article, then you also duplicate the content within blockquotes as it is also there in the article. Here’s a nice jquery way to do this leaving the duplication of the content to jQuery by specifying which content to show as a blockquote.
12. Text Shadows
CSS3 includes a nice property of text-shadow that allows you to set a text-shadow to generate nice text effects without using any images. But IE does not support this feature to date. Text-shadow in IE adds this support to Internet Explorer using jQuery.
13. Border Image
CSS3 lets you use images as border backgrounds in addition to just colors. But since it is not supported my many browsers, you’ll need jQuery to come to the rescue. jQuery. border-image provides cross-browser support for border-image property.
Opacity is one such CSS property that is supported by most browsers including IE but each has a different way to implement it, though CSS3 standard defines a property opacity to be used for setting the opacity of elements, you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.$(“some selector”).css(“opacity”, 0.5);
15. Super CSS Selector Support with jQuery
CSS 2.1 supports various types of selectors including :focus, :first-child, nth-child but not all browsers(IE!) support these selectors. but with Super CSS Selector, you can be sure to have support for those selectors even in IE.