$('.entry').waypoint(function() {
          alert('You have scrolled to an entry.');
     });

Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page.

Waypoints is dual licensed under the MIT and GPL licenses. You can fork the project or report any issues in the GitHub repository.

jQuery lint’s main objective is to notify you of incorrect usages of jQuery’s API. So, if you pass incorrect arguments to any method then jQuery Lint will let you know. It compares your arguments to the argument signatures in jQuery’s API.

How to Use

To use it, you need to include it, after jQuery, in your document:

<script src="jquery.js"></script>
<script src="jquery.lint.js"></script>

Features Include:

• - Reports via Firebug, although you can quite easily plug-in your own console mechanism.
• - Has four different error-reporting levels, zero reports nothing, three will report everything, including small things like using css().css().css() instead of css({…}).
• - Helps you in determining where the problem occurred in your code.

You can read more about jQuery Lint and download it at Github.

Features Includes:

• - This plugin uses ZERO images and is completely customizable via CSS.
• - It’s also only 3.5kb minified which makes it a lightweight jQuery plugin.
• - TipTip can be applied to any element, not just links.
• - TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

How It Works:

TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element. The structure looks like this:

<div id="tiptip_holder">
    <div id="tiptip_content">
        <div id="tiptip_arrow">
            <div id="tiptip_arrow_inner"></div>
        </div>
    </div>
</div>

To learn more about how to use it check out the documentation.

There’s a lot of powerful interactivity you can bring to your site to spice up just about any web page using one of the most powerful and modular javascript libraries—MooTools! It’s important to note that small and useful features can cleverly deal with hiding and showing important information in non-traditional ways.

Today, we will have a look at 20 creative techniques using MooTools javascript framework for rich UI in modern day websites.

1. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login panel on top of your page using Mootools 1.2.

2. MooGenda

MooGenda is a javascript calendar based on MooTools, that reads events from JSON requests. MooGenda supports double click on event to see the deafult event view, drag and drop event in month view, every change send a request to back end, to store when and what changed in the event.

Check out the demo here

3. Morph Effect on mouseenter/mouseleave with Mootools 1.2

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Check out the demo here

4. Create a Simple, Powerful Product Highlighter with MooTools

Create a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Also, learn some of the many reasons why MooTools just might be the right javascript library for all of your future projects!

Check out the demo here

5. Jazz Up Your Forms With MooTools Pt. 1

A MooTools and contact forms with animated field highlighting, displaying/hiding instructions for each input field, live comment previewing and auto-resizing of both the comment preview and it’s corresponding textarea input.

Check out the demo here

6. Mootools CSS Styled Scrollbar

A small piece of javascript that creates a css styled scrollbar from the Mootools (version 1.2b2) Slider class. The example page shows three div elements with a styled horizontal and/or vertical scrollbars.

Check out the demo here

7. Delayed Image Preloading Using Mootools

There are possible scenarios that need image preloading. Most browsers only allow two concurrent requests at the same time to the same domain. When we do the image preloading on domready, it might hold up other resources that need to be loaded. Because we preload images that are not shown when the page loads, we can delay the preloading.

Array.each.delay(3000,this,[
	['foo.gif', 'bar.png','moo.png','tools.png', 'mootools.png'],
	function(src){var img = new Image();img.src = src;}
]);

8. Facebook-Style Modal Box Using MooTools

David Walsh took facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect of Facebook’s Modal box.

Check out the demo here

9. OmniGrid

The OmniGrid component is inspired by two similar components: FlexGrid jQuery and phatfusion:sortableTable and partly uses their source code.

Check out the demo here

10. MooTools Flashlight Effect

A nice neat effect inspired by the jQuery version found here.

Check out the demo here

11. FormCheck

FormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm…), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.

Check out the demo here

12. Fancy Upload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

Check out the demo here

13. AutoCompleter

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Check out the demo here

14. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a Newsvine News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your web projects.

Check out the demo here

15. mParallax

mParallax is a MooTools implementation of the popular jQuery plugin: jParallax. “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”. You can create parallax effects while having the option to customize various settings.

Check out the demo here

16. BySlideMenu

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text. You have the option to create it vertically or horizontally, the container width/height can be adjusted automatically, Menu can be pinned or not, by mouseover or click and with Overflow support.

Check out the demos here

17. mooCSSChart

Create animated Bar Charts using the MooTools.

Check out the demos here

18. MavSelectBox

MavSelectBox is a simple-to-use form select replacement that allows for better customization. MavSelectBox mimics the GUI interactions of a normal select element as much as possible. Up and down arrows move the selection, tabbing to it and hitting alt+down shows the menu, tabbing to it and simply hitting up or down selects the next available option in that direction, focusing then start typing and the option that matches what you are typing is selected, enter selects, esc closes, and so on.

Check out the demos here

19. A Better Pagination

It is only a little script that can turn your ugly looking numbers into a nice looking Slider using MooTools. The script only contains a little fix for the Slider in mootools-more so the “knob” doesn’t jump around when clicking it and is also packed up a little example in PHP to see how you can integrate this script in your blog easily.

Check out the demos here

20. SlideItMoo

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel. It supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.

Check out the demos here

Must Read Mootools Tutorials

- 30 Days of MooTools Tutorials

These tutorials will assume no previous Mootools or JavaScript experience, but will require basic knowledge of html and CSS.

1. jQuery Sequential List

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example in this tutorial will show you how to add a comment counter to a comment list using jQuery’s prepend feature. The code is very simple, the following example shows how you can add a counter number to a comment list.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#commentlist li").each(function (i) {
    i = i 1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>

To get this markup:

<ol id="commentlist">
	<li><span class="commentnumber"> #1</span>
		...
	</li>
	<li><span class="commentnumber"> #2</span>
		...
	</li>
	<li><span class="commentnumber"> #3</span>
		...
	</li>
</ol>

Check out the demo here

2. jQuery Corners

This jQuery plugin will simple allow you to create rounded corner for your design elements including forms or anchor links without using images or obstructive markup.

Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy.

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Check out the demo here

3. jQuery Checkbox

This jQuery plugin will simple skin checkboxes and radio buttons in a nice way.

Check out the demo here

4. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

<button class="ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="ui-state-default ui-corner-all">Link</a>

Check out the demo here

5. Create A Colorful Sitemap With jQuery

In this article, Chris Coyier teaches us how to build a visually interesting sitemap that makes the hierarchy clearer through the use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

Check out the demo here

6. Style Author Comments Differently with jQuery

Now you want to apply the custom styling applied to comments left by the author on blogger. The script will loop through all of the comments on the page, if the member link on the current comment matches the member link in the profile page on your blog, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

Check out the demo here

7. asmSelect – Alternative Select Multiple

A progressive enhancement to <select multiple> form elements which is easier for users to understand and interact with than regular <select multiple> form elements. Also, it doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

Check out the demo here

8. Flexgrid

A lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source to load the content. Features include: Resizable columns, Resizable height, Sortable column headers, Cool theme, Can convert an ordinary table, Paging, Show/hide columns and more.

Check out the demo here

9. MaxLength

This plugin makes it easy to apply a "maxlength" attribute to custom elements for example a <textarea>. It also gives you the possibility to add a nice character counter under the element that shows the user how many chars he/she has left before the maxlength is reached, and/or an alert message.

To use this on a simple text area, all you have to do is:

<script type="text/javascript">
  $(document).ready(function(){
    $('#textarea_1_1').maxlength();
  });
</script>

Check out the demo here

10. ClockPick

ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.

Check out the demo here

11. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Check out the demo here

12. (mb)ContainersPlus 1.0

This is a useful plug in to build full featured and full skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; there is a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the button-bar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.

Check out the demo here

13. Auto line-height for flexible layouts

Adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.

Check out the demo here

14. UI.Layout

This plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Check out the demo here

15. Colorize

Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.

Check out the demo here

16. jQuery 3 State Switch Plugin

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.

Check out the demo here

17. Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Check out the demo here

18. jQuery Feed Menu

It’s nice to offer users an alternate way to get at your feeds, here is an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site.

Check out the demo here

19. jquery Hover Sub Tag Cloud

Here is a new way to create your tag cloud Using jQuery and reduce its size, so my demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

Check out the demo here

20. jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Check out the demo here

1. Achieving Rounded Corners in Internet Explorer with DD_roundies

Unfortunately, CSS3 border-radius is only supported by Safari and Firefox, leaving browsers such as Internet Explorer to gracefully degrade to square corners. DD_roundies library offers a new approach to bringing rounded corners to Internet Explorer. DD_roundies works with selectors – much like jQuery – this capability allows for a very convenient mapping to jQuery UI’s CSS Framework classes, and allows us to apply DD_roundies to jQuery UI in a few short lines.

Check out the Demo here

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge. From a usability and performance standpoint, one smart solution is to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

Check out the Demo here

3. Cross browser text-shadow

Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The only downfall is that it doesn’t work in Internet Explorer. One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. This should work in Internet Explorer 5.5 to Internet Explorer 8.

Check out the Demo here

4. Rounded Corners

This jQuery plugin will create beautifully rounded corners. No images or obtrusive markup necessary. Support for padding ensures your layout degrades gracefully for users who have disabled javascript.

5. Position Footer

This little plugin will allow you to position a footer at the bottom of the browser viewport when the content doesn’t reach that far. It will not adjust the footer if the content goes below the viewport height.

Check out the Demo here

6. Link Control

A simple plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.

Check out the Demo here

7. Page Peel

A jQuery plugin for the page peel ad effect used on quite a few sites now.

Check out the Demo here

8. Delaying loading of images in (long) web pages

Lazy loader is a jQuery plugin that delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This plugin specially helps on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Check out the Demo here

9. Preload Images Sequentially With jQuery

This is a small code snippet you can use for preloading images for mouseovers. It uses $(window).bind(‘load’, function() {…}) to wait until all page elements have finished loading. This includes all images.

10. BGIframe

Helps ease the pain when having to deal with IE z-index issues.

11. Fixing IE overflow problem

IE has a different implementation of overflow compa(red) to Firefox or Safari. In particular, Firefox et al, when overflowing an element, it puts the horizontal overflow scroll bar on the outside of the element. Because the content overflows horizontally in IE, the new horizontal scroll bar means we can’t see all the content vertically, thus generating a vertical scroll bar.

Vertical overflow is always inside the element, so you need to apply the following in IE only:

• Find all elements whose contents is overflowing horizontally.
• Add 20 pixels of padding to the bottom of our element.
• Strip the vertical scroll bar.

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });
    } else {
      return this;
    }
  };
})(jQuery);

// usage
$('pre').fixOverflow().doOtherPlugin();

This fix results in IE conforming to putting the horizontal scroll bar below the element.

Check out the Demo here

12. Avoiding CSS hacks using Javascript

If you don’t have to code those ugly CSS hacks for those browsers that just won’t show you what you want them to, you can use one trick to ease the CSS writing: “Browser selectors”. So now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser.

Check out the Demo here

13. Increase the size of click targets

Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

Check out the Demo here

14. Vertically Center An Element

In this video tutorial, you will learn how you can vertically center an image in your browser by combining CSS with jQuery’s power

15. JSizes ― jQuery extension plugin for CSS properties

JSizes is a small plugin which adds support for querying and setting the CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties. Additionally it has one method for determining whether an element is visible. In total it adds six new methods to the jQuery element API.

Some examples of how the new methods can be used:

jQuery(function($) {
   var myDiv = $('#myDiv');

   // set margin-top to 100px and margin-bottom to 10em
   myDiv.margin({top: 100, bottom: '10em'});

   // displays the size of the top border in pixels
   alert(myDiv.border().top);

   // displays true if the element is visible, false otherwise
   alert(myDiv.isVisible());

   // set padding-right to 10px and margin-left to 15px using chaining
   myDiv.padding({right: 10}).margin({left: 15});
});

Don’t forget to

subscribe to our RSS-Feed and visit my twitter page : nourayehia to get notified when our next post is here.

you.

A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also

because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick CSS code

snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers

while others are not. We thought we could share them only if you are looking for a quick fix.

This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better

methods, then post a comment below or email me so we add it in this series.

1. Hide text with text indent

h1 {
text-indent:-9999px;/*Hide Text, keep for SEO*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

By Drew Douglass.

2. Cross Browser Minimum Height

#container  { min-height:500px; } * html #container { height:500px; }

“Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser

of “height” as a min-height. The only drawback to using this code is that it’s not valid CSS.” by

href="http://davidwalsh.name/cross-browser-css-min-height">David Walsh

Another way to do this and make it valid CSS:

#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3. Highlight links that open in a new window

Here’s the CSS to highlight links that open in a new window.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
 }

4. Highlight links to PDF and Word files

Here’s the CSSto highlight links that open PDF or Word files without informing the user.

a[href$="pdf"]:after,
a[href$="doc"]:after {
margin:0 0 0 5px;
font:bold 12px "Lucida Grande";
content: " (PDF)";
}
a[href$=".doc"]:after {content: " (DOC)";}

“This will insert either (PDF) or (DOC) after links with an href attribute value that ends in pdf or doc.” by

href="http://www.456bereastreet.com/archive/200812/reveal_new_window_links_and_links_to_non-

html_files_with_a_user_stylesheet/">Roger Johansson

5. The order of link pseudo-classes

Eric Meyer

explains why the order matters. So in case you came across the “link-visited-hover-active” (LVHA) rule. This holds that

the four link states should always be listed in that order, like so:

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

6. Simple Clearing of floats

One of the simplest and most common layout structures involves the placing of a small, set-width DIV ‘#inner’ within a

larger wrapping DIV ‘#outer’ that contains the remaining content. If ‘#inner’ grows taller than it’s wrapping parent, it

breaks through the bottom edge of ‘#outer’. As we can’t always control the amount of content in these DIVs, it certainly

presents a problem. The markup would be something like

<div id="outer">
        <div id="inner"> <h2>A Column</h2> </div>
        <h1>Main Content</h1>
        <p>Lorem ipsum</p>
</div>

The CSS will look like this

#inner{
width:26%;
float:left;
}
#outer{
width:100%;
}

A simple trick to fix this issue is

by adding ‘overflow:auto’ to the outer DIV

7. Creating a Page Break

Snook share a little CSS trick for those who

run blogs: force a page break before the comments so the users have the option to print the article with or without the

comments. If they print just the article then it can stand alone in a nice clean package.

#comments {page-break-before:always;}

8. Style Your Ordered List

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tip on

how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list. By

href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Nick La

The markup would be:

<ol>
  <li>
    <p>This is line one</p>
  </li>
  <li>
    <p>Here is line two</p>
  </li>
  <li>
    <p>And last line</p>
  </li>
</ol>

The CSS to style it:

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

9. Create Resizable Images With CSS

“I’m a big fan of layouts that still work if a user increases their browser’s text size. However, I was wondering what

it would be like if any images resized along with the text rather than staying constant in size. Would everything seem

more in proportion?” by Christian Watson. To do this, we

need to use a large image and wrap it in a div which was sized in ems. This enables it to be centered within the div

Here’s the HTML:

<div class="resize2"><img src="image.jpg" alt="" /></div>

And the CSS:

.resize2 {
  border: 3px double #333;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  overflow: hidden;
  width: 12em;
}

.resize2 img {
  margin: -220px 0 0 -210px;
  padding: 6em 0 0 6em;
}

10. Create a Block Hover Effect for a List of Links

The “block hover” effect for lists of links gives the design an elegant effect. we see this all the time now.

“Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item.

Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of

<em> and <span> tags.” by Christian

Watson.

Here’s the HTML:

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div>

And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the

same as that of the list item. Otherwise the hover effect will only display when you mouse over the text within the list

item.

#links ul {
        list-style-type: none;
        width: 400px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

11. Eric Meyer’s Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and

font sizes of headings, and so on.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

12. DROP CAPS

According to w3schools only font, color, background, margin, padding, border, float and some other properties can be

applied to the first letter. Still you can make a nice drop cap with CSS

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

13. CSS Transparency Settings for All Browsers

“Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your

bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all

every time you wish to add transparency is no big hassle and worry-free.” by Chris Coyier.

Transparency is set to 50%

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

14. Rounded Corners with Border-Radius

CSS3 specification offered us Rounded Corners with Border-Radius, which is currently supported by few browsers. Here is

a snippet:

.container{
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
}

14.2 Cross Browser rounded Corner

“Simplest way is to use a giant gif, then I’ll markup my box”-

href="http://www.askthecssguy.com/2007/11/mike_asks_the_css_guy_for_reco_1.html">Askthecssguy.

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

CSS would be:

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

15. HangTab. Check out Panic’s website for their software Coda.

Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content).

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

Today we wanted to highlight 10 brilliant Multi Level Navigation Menu Techniques built using different Javascript Libraries including jQuery, Mootools along with some CSS magic to give us what you see below.

1. Create Vimeo-like top navigation

Almost the same top navigation implemented on Vimeo.com is created by Janko. Best thing about it, is the menu that drops down when you hover search box. 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. The structure is visually described in the image below:

As you can see the UL has four items. The first one is logo with short submenu. Then comes login link, Help link with submenu and search item with submenu. Each submenu is being shown when hover corresponding link.

Demo | Download source code

2. CSS Drop-Down Menu Framework

This menu does not only separate HTML from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

Features Include:

• The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
• Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
• Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
• Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.

Horizontal Menu Demo | Vertical Menu Demo | Download source code

3. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support. This script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Click here for the demo | Download source code

4. MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Features Include:

• - Search Engine Friendly
• - Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys
• - Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.

Horizontal Menu Demo | Vertical Menu Demo | Download source code

5. A circular menu with sub menus

This nice menu adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

6. Fancy Sliding Menu for Mootools

The Fancy Sliding Tab Menu runs on Mootools with an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

View Demo | Download source code

7. Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site.

The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus.

8. Collapsable menu

This menu was part of a tutorial written by Antonio Lupetti illustrating the art of reusing code in your web projects. In this example he implemented a collapsable box with an animated effect on mouse over (try to move your mouse over “About Me” and “Click here”).

View Demo | Download source code

9. Designing the Digg Header

This is a replica of the Digg header. Important things like subscribing, searching and account information are right up top where you would expect them to be. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors.

View Demo | Download source code

10. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso.

What i like about this menu, is its ability to style icons based on file extension and using AJAX to fetch file information on the fly. More over you can customize expand/collapse event and speeds.

View Demo | Download source code

Features Include:

• - The range picker uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.
• - Integration of date.js library to allow for easy preset development.
• - Optional forward and back arrows allow a user to jump forward and backward by range duration.
• - Uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.

Download It Here | View Demo

Benefits of using custom methods:

• - These are completely customizable via CSS (which can make your apps look much more professional).
• - You can set a custom title for each dialog
• - IE7 users get an ugly warning and usually have to reload the page if you use a regular prompt()

These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Everything you need to produce the dialogs in the demonstration is included in the download.

Download It Here | View Demo