Jquery Navigation Menu For Your Web Projects

A navigation menu helps visitors to interact with other pages and let them navigate through navigation menus to different pages of a particular website. A simple, neat minimalistic design always gain the attention of visitors, navigation menu plays a vital role in over all look and feel of a website that’s why designers should not ignore the navigation needs of a website. Designers use different types of navigation menus for different purposes such as image sliders menus, text effect menus, photo galleries and many more.Check Out these 12 jQuery Navigation Menu

1 Animated Content Menu With jQuery

Demo | Tutorial

2 Expanding Image Menu With jQuery

Demo | Tutorial

3 Portfolio Image Navigation With jQuery

Demo | Tutorial

4 Jquery One Page Navigation

Demo | Tutorial

5 Wander wall

Demo | Tutorial

6 Elastic Thumbnail Menu

Demo | Tutorial

7 Halftone Navigation Menu

Demo | Tutorial

8 Overlay Effect Menu

Demo | Tutorial

9 Sliding Boxes and Caption With jQuery

Demo | Tutorial

10 Rocking and Rolling Round Menu

Demo | Tutorial

11 How to Create A Cool Navigation Menu

Demo | Tutorial

12 Animated Text and Icon Menu With Jquery

Demo | Tutorial

How to use @font-face

Firstly, you’ll need to find a nice-free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we need to first create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {

font-family: 'graublauweb-webfont';

src: url('fonts/graublauweb-webfont.eot');

src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');

}

h1 {

font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;

font-size:48px;

}

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

Next we insert our simple markup:

<h1>This is a heading with some custom font.</h1>

That’s about it! Test the page in a browser to see the results.

Grey Box:New Javascript Popup Box

A pop-up window that doesn’t suck.

Introduction

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Where could it be used?

• Showing external pages
• AJAX uploading of files
• Showing internal pages (login, user preference, properties, contact formulas etc.)
• Showing a video or a flash animation
• Showing images
• Showing product information
• Admin sections
• …

What browsers are supported?

• Safari
• Firefox 1.5+
• Internet Explorer 5.5+
• Opera 8.5+

Other browsers may also be supported.

Download

How can I use custom fonts on my website? A helpful resources

How can I use custom fonts on my website? What is Cufon and @font-face? Which should I use? These are often asked question and in this tutorial I’ll answer them and show you how to get custom fonts working in all major browsers.

Cufon or @font-face? Typography on the web

As you may already know, if you wanted to display a custom font with anti-aliasing, you had to design the words in Photoshop and insert them as images into your website. Another option was to use Javascript or Flash. These days the latest and best solutions are Cufón javascript and @font-face CSS declaration.

Cufón

Cufon is an implementation of javascript, SVG, and Canvas that places your font after the browser has loaded your website with an amazing amount of speed and efficiency.

You can set it up in a few minutes, let’s see how. Visit Cufón website and download Cufón’s javascript file.

In Security you can set a specific domain to increase security. This way you can protect your font from evil ninjas out there. You can leave the final two sections at their default values. Accept the terms, click on Let’s Do This button and save the generated script.

Now create an HTML document and import these two javascript files:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>


Add some H1 and H2 headings to the HTML and initialize Cufón:


<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>


In replace function we can define which elements we’d like to replace with Cufón. If you want to replace specific elements by ID or class, simply import jQuery library BEFORE Cufón and you can start using its selector engine:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#header h1');
Cufon.replace('.content h2');
</script>


That’s it! You can use any font you wish just make sure you have the proper privileges to use it.

Pros

• * Fast
• * Simple to install and use
• * It works on every major browser on the market

Cons

• * If javascript is disabled, default fonts will be used.
• * Text isn’t selectable.
• * You can’t define hover state

@font-face

@font-face CSS declaration also lets you use custom fonts in your web pages. Unfortunately older browsers support it differently.

The first step is get a free font because of licensing concerns, you cannot simply embed any font on your website. There are a lot of sites that lists free fonts that you can use with @font-face. My favorite is fontex.org.

Once you have your font, you need to create at least three font files in order to get support cross browser. Fortunately there’s an online tool which generates them for you and also includes sample pages! The @font-face Generator!

Finally create an HTML document, add some headings and paragraph and add the following CSS code:


@font-face {
font-family: 'MergeRegular';
src: url('merge-webfont.eot');
src: local('˘'), url('merge-webfont.woff') format('woff'), url('merge-webfont.ttf') format('truetype'), url('merge-webfont.svg#webfontC1PyeCOP') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, p {
font-family: 'Merge', tahoma, verdana;
}


The code links to all of the different font formats that we have created, and will make the font work cross browser. When setting an element’s font fafmily, always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font.

Pros

• * It works without Javascript
• * Text is selectable

Cons

• * Font rendering quality differs from browser to browsers
• * While the font is downloading, the user see the default font during 1 or 2 seconds
• * If the font is provided by your client, He may be concerned by the fact that the font will be downlodable from the website

Embed custom fonts in your web page with Typeface

Typeface :

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Top 60 CSS tools For Your Web Designing/Devlopement Project

Layout.

YAML Builder This is by far the best layout generator out there, definitely use this if you want to practice CSS.

Templatr– Almost like YAML without the pretty colors.

CSS Creator– This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Firdamatic– Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze.

The Generator Form– Allows the creation of easy to create websites right from the click of a button.

Qrone CSS Design Editor– You can easily edit CSS with this design editor by Qrone.com

CSS template generator– This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

HTML PHP CSS Website Template Maker– This PHP – HTML – CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout.

CSS rounded box generator– Allows for the creation of rounded CSS boxes.

CSS layout generator– This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

WordPress Theme Generator– This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.

Optimization

Online CSS Optimizer– This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go. More information on this tool can be found on the about page.

CSS Compressor– Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

CSS Analyzer– This service has been provided to allow you to check the validity of your CSS against the W3C’s validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

Clean CSS CSS formater and optimizer based on CSS tidy.

CSS Tidy– CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).

Tabifier– The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what he could manage to make a program produce from dirty source.

Lonnie Beast– CSS online formatter, easily format your CSS without any programs.

Navigation

DOMTab– DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

List-O-Matic– List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go – it’s child’s play!

Tabs Generator– Creating tabs has never been this easy!

CSS Navigation Generator– This web tool generates the necessary code you need to build up a valid and accessible text based imaged navigation bar with one sprite image, XHTML and CSS.

CSS Menu Generator– CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

CSS Button Generator– Generate buttons and field text easily.

CSS Play– Huge database of menus.

List-O-Rama– List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish.

Izzy Menu– Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

CSS Buttons– CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

CSS Tab Designer– CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

CSS Menu Generator– Over 31 designs of CSS menus ready to be picked.

CSS Menu Generator– Easily generates menus for your use.

Listamatic– Nested list options, there are plenty to choose from.

Fonts

Type Chart– Type chart lets you flip through, preview and compare web typography while retrieving the CSS.

EM Calculator– Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design.

Vertical rhythm calculator– Want to convert pixel values to EM values, this calculator is for you!

Type Tester– It has beautiful layout and a very friendly user interface.

CSS Font and Text Style Wizard– Allows for the easy creation of css font options.

Font Tester– Are you tired of having to refresh the page to view how your font will look like? Font tester to the rescue.

Sky CSS Tool– Online CSS Authoring Tool. «Sky CSS» allows you to create CSS classes almost without using manuscript code.

Clear CSS Generator– You can easily select colors from the palette to preview your future web-project design right now.

CSS Frameworks

Elements– Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient.

Hartija– It attempts to create printer friendly pages.

Sen CSS– SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.

Eswat– Easy to edit grid based layouts.

Emastic– Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Blue Print CSS– Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Clever CSS– CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

Logic CSS– The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

CSS Firefox Extensions

CSS Validator– Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page.

Firebug– Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

Grid Fox– GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it.

Aardvark– Clean up unwanted banners and surrounding “fluff,” especially prior to printing a page.

FireScope– FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

CSS Viewer– I love this tool! If you ever go into a website and want to see its CSS properties this tool will allow you to do just that.

CSS Mate– Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that he had been using for many months. He gutted it, made each stylesheet load into a seperate tab.

Miscellaneous

CSSHttpRequest– CSSHttpRequest is cross-domain AJAX using CSS.

Grid Designer– Creates grids without having to waste time creating them manually.

CSS Text Wrapper– Ever thought about making shapes with text? Then this tool is right for you.

Collaborative Javascript Debugging– Test live JavaScript with HTML and CSS context

Fixed Width CSS Layouts– Stop wasting time creating your own layouts, instead use one of these.

jCoverflip: jQuery Content Slider Plugin

jCoverFlip is jQuery plugin that allow us to showcase both images and content associated with an item for easily creating coverflow-like interfaces, This plugin has been developed to enable fast and granular customization of the look and feel and feature set. jCoverFlip support for Drag or click functionality to showcase featured content items on demand by the user.

Home: http://www.jcoverflip.com/
Demo: http://www.jcoverflip.com/demo
Download: http://www.jcoverflip.com/download