The Wireframe – HTML

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

Styling – CSS

Take a look at the comments below for an explanation of the styles.

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:286px;	width: 790px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Step 3. Setting up jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 4. Bringing it to Life – jQuery

The following script contains comments explaining which jQuery actions are being performed.

Setting up the Image Slider
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

Setting up the Slider Function and Timer
We first create the function for the slide event by itself (rotate). Then create another function (rotateSwitch) that will rotate and repeat that slide event (rotate).

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

Take a look at this tutorial for an explanation of how the timer (setInterval) works.

Hover and Click Events
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});

Inspiration

Below are some sites that use similar techniques, check them out for inspiration!

Related Articles

• AJAX update content every X seconds
• Simplest jQuery Slideshow

Similar Posts:

• Simple Tabs w/ CSS & jQuery
• Simple Toggle with CSS & jQuery
• Horizontal Subnav with CSS
• Greyscale Hover Effect w/ CSS & jQuery
• Facebook Style Footer Admin Panel Part 2

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.

HTML

<li id="alertpanel">
    <a href="#" class="alerts">Alerts</a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
        </ul>
    </div>
</li>
<li id="chatpanel">
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
            <li><span>Family Members</span></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
    </div>
</li>

CSS

Since we declared a list item link style already (with the text replament technique), override the properties so we can use regular links in the sub-panels.

#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
	text-indent: 0;
	width: auto;
	height: auto;
	padding: 0;
	float: none;
	color: #00629a;
	position: static;
}
#footpanel ul li div a:hover {	text-decoration: underline; } /*--Reset hover style for sub-panel links--*/

Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <h3>.

#footpanel .subpanel {
	position: absolute;
	left: 0; bottom: 27px;
	display: none;	/*--Hide by default--*/
	width: 198px;
	border: 1px solid #555;
	background: #fff;
	overflow: hidden;
}
#footpanel h3 {
	background: #526ea6;
	padding: 5px 10px;
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
	font-size: 1.5em;
	float: right;
	line-height: 0.6em;
	font-weight: normal;
}

The following section is the area that will be scrollable. Use an overflow: auto; to allow the scroll to appear when the content exceeeds the <ul> height.

#footpanel .subpanel ul{
	padding: 0; margin: 0;
	background: #fff;
	width: 100%;
	overflow: auto;
	padding-bottom: 2px;
}
#footpanel .subpanel li{
	float: none; /*--Reset float--*/
	display: block;
	padding: 0; margin: 0;
	overflow: hidden;
	clear: both;
	background: #fff;
	position: static;  /*--Reset relative positioning--*/
	font-size: 0.9em;
}

Chat Panel

#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
	padding: 5px;
	background: #fff;
	color: #777;
	float: left;
}
#chatpanel .subpanel li a img {
	float: left;
	margin: 0 5px;
}
#chatpanel .subpanel li a{
	padding: 3px 0;	margin: 0;
	line-height: 22px;
	height: 22px;
	background: #fff;
	display: block;
}
#chatpanel .subpanel li a:hover {
	background: #3b5998;
	color: #fff;
	text-decoration: none;
}

Alert Panel

#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
	border-top: 1px solid #f0f0f0;
	display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
	background: url(delete_x.gif) no-repeat;
	float: right;
	width: 13px; height: 14px;
	margin: 5px;
	text-indent: -9999px;
	visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
	text-align: right;
	padding: 5px 10px 5px 0;
}

Step 3. Activating the Subpanel – jQuery

Adjust the Subpanel Height

The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.

To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.

The following script contains comments explaining which jQuery actions are being performed.

jQuery

//Adjust panel height
$.fn.adjustPanel = function(){
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height

    var windowHeight = $(window).height(); //Get the height of the browser viewport
    var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel

    if ( panelsub > panelAdjust ) {	 //If sub-panel is taller than max height...
        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
        $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
    }
    else if { //If sub-panel is smaller than max height...
        $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
    }
};

//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
    $("#chatpanel").adjustPanel();
    $("#alertpanel").adjustPanel();
});

Add the Toggle Function

Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.

The following script contains comments explaining which jQuery actions are being performed.

//Click event on Chat Panel and Alert Panel	
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
        $(this).next(".subpanel").hide(); //Hide active subpanel
        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
    }
    else { //if subpanel is not active...
        $(".subpanel").hide(); //Hide all subpanels
        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
    }
    return false; //Prevent browser jump to link anchor
});

//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
    $(".subpanel").hide(); //hide subpanel
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
    e.stopPropagation(); //Prevents the subpanel ul from closing on click
});

//Show/Hide delete icons on Alert Panel
$("#alertpanel li").hover(function() {
    $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
    $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});

Conclusion

The footer panel can be useful for admin driven applications and much more. There are many useful techniques that we covered today like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.

If you have any questions, concerns, or suggestions, please do not hesitate to let me know!Similar Posts:

• Facebook Style Footer Admin Panel Part 1
• Simple Tabs w/ CSS & jQuery
• Simple Toggle with CSS & jQuery
• Horizontal Subnav with CSS
• Greyscale Hover Effect w/ CSS & jQuery

This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.

Step 1. Wireframe and Tooltip Bubbles – HTML & CSS

Lay out the wireframe of the admin panel using an unordered list for the foundation. The last two list items (Alert Panel & Chat Panel) will have sub-panels nested within them. Since these two panels will float to the right, the order in the markup will be reversed.

Notice that there is a <small> tag nested within the <a> tag, this is how we will achieve our tooltip bubble on the navigation.

HTML

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#" class="home">Inspiration <small>Design Bombs</small></a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel"><a href="#" class="alerts">Alerts</a></li>
        <li id="chatpanel"><a href="#" class="chat">Friends (<strong>18</strong>)</a></li>
    </ul>
</div>

CSS

First start by fixing the panel to the bottom of the viewport.

#footpanel {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 9999; /*--Keeps the panel on top of all other elements--*/
	background: #e3e2e2;
	border: 1px solid #c3c3c3;
	border-bottom: none;
	width: 94%;
	margin: 0 3%;
}

As you may already know, IE6 does not understand fixed positioning. I stumbled across a tutorial that fixed this problem*.

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
	margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
	position: absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

*Note: Due to heavy loading on the browser, an alternative solution would be to either use an position: absolute; or if the situation/client allows it use display: none; for those with IE6.

Style the unordered list which will be the foundation of this panel.

#footpanel ul {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	list-style: none;
	border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
	font-size: 1.1em;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
	position: relative;
}
#footpanel ul li a{
	padding: 5px;
	float: left;
	text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
	background-color: #fff;
	height: 17px;
	margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
	border: 1px solid #555;
	border-top: none;
	z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
	position: relative;
}

Declare the text replacement for each link.
You can download these great icons by Pinvoke here.

#footpanel a.home{
	background: url(home.png) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
	background: url(balloon.png) no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  /*--Right align the chat and alert panels--*/

Style the tooltip bubble, by default the <small> tag will be hidden with a display:none;. On hover over, allow the tooltip to appear with a display:block;

#footpanel a small {
	text-align: center;
	width: 70px;
	background: url(pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; /*--Hide by default--*/
	color: #fff;
	font-size: 1em;
	text-indent: 0;
}
#footpanel a:hover small{
	display: block; /*--Show on hover--*/
	position: absolute;
	top: -35px; /*--Position tooltip 35px above the list item--*/
	left: 50%;
	margin-left: -40px; /*--Center the tooltip--*/
	z-index: 9999;
}

What’s Next?

Part 2 of this tutorial will go over how to style the sub-panels and how to activate them using jQuery. If anyone had any questions or comments regarding the tooltip technique, please let me know!Similar Posts:

• Facebook Style Footer Admin Panel Part 2
• Side Navigation Tooltip / Popup Bubble
• Styling Post Headings That Stick Out
• CSS Vertical Navigation with Teaser
• Fancy Thumbnail Hover Effect w/ jQuery

Instead of writing a tutorial for CSS beginners, this time Vitaly Friedman (editor-in-chief of Smashing Magazine) asked various questions regarding intermediate/advanced techniques found throughout the web, and how each of these methods were achieved.

Based on the live examples, I went ahead and broke them down on how I would achieve each of these effects.

This post is the the next installment of posts featuring “Useful Coding Solutions for Designers and Developers”, a series of posts focusing on unique and creative CSS/JavaScript-techniques being implemented by talented professionals in our industry. A key talent that any Web designer must acquire is the ability to observe, understand and build on other people’s designs. This is a great way to develop the skills and techniques necessary to produce effective websites.

Similar Posts:

• Do You Eat and Run?
• Learning One Step at a Time
• Recommended Magazine – Web Designer
• Mastering CSS : Getting Started – Guest Post
• Why Designers Should Subscribe to RSS Feeds

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. – Jakob Nielsen – Alert Box

As I read his article he recommended that these kind of drop down menus should have a subtle time delay when hovering in and out of them. I decided to use the Hover Intent jQuery plugin to help me achieve this effect.

Step 1. Foundation – HTML

Just like all of my navigation tutorials, start by creating an unordered list. Since we will be using CSS Sprites for our navigation states, each link within the list item should have a unique class name to it.

<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="products">Products</a></li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

Step 2. Styling Foundation – CSS

Since our drop down menu will be using absolute positioning, be sure to add a relative positioning to the list item. Shoot the text off of the page by specifying a text-indent of -9999px. We will then replace each navigation link with an image by specifying an image path to each link class name.

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative; /*--Important--*/
}
ul#topnav li a {
	float: left;
	text-indent: -9999px; /*--Push text off of page--*/
	height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/
ul#topnav a.home {
	background: url(nav_home.png) no-repeat;
	width: 78px;
}
ul#topnav a.products {
	background: url(nav_products.png) no-repeat;
	width: 117px;
}
ul#topnav a.sale {
	background: url(nav_sale.png) no-repeat;
	width: 124px;
}
ul#topnav a.community {
	background: url(nav_community.png) no-repeat;
	width: 124px;
}
ul#topnav a.store {
	background: url(nav_store.png) no-repeat;
	width: 141px;
}

Step 3. Creating the Mega Sub Navigation – HTML

Add a class of “sub” right after your main navigation link and nest unordered lists within. Each nested unordered list will act as the nav columns of your mega drop down.

<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li>
    	<a href="#" class="products">Products</a>
        <div class="sub">
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

Step 4. Styling Mega Sub Navigation – CSS

To get the sub nav to stick to the bottom left corner of the parent hovered nav, be sure to set an absolute position to the .sub container with the coordinate of top 44px and left 0px. For style, I added rounded corners to those browsers that support it (Firefox/Chrome/Safari).

Keep in mind when having multiple levels of nested lists, you need to override its conflicting properties. Check out the comments below.

ul#topnav li .sub {
	position: absolute; /*--Important--*/
	top: 44px; left: 0;
	background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--Hidden for those with js turned off--*/
}
ul#topnav li .row { /*--If needed to break out into rows--*/
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%; /*--Override parent list item--*/
	color: #fff;
}
ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/
	padding: 5px 0;
	background-image: none;
	color: #e8e000;
}
ul#topnav .sub ul li a {
	float: none;
	text-indent: 0; /*--Override text-indent from parent list item--*/
	height: auto; /*--Override height from parent list item--*/
	background: url(navlist_arrow.png) no-repeat 5px 12px;
	padding: 7px 5px 7px 15px;
	display: block;
	text-decoration: none;
	color: #fff;
}
ul#topnav .sub ul li a:hover {
	color: #ddd;
	background-position: 5px 12px ;/*--Override background position--*/
}

Step 5. Setting up jQuery & Hover Intent

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

After calling the jQuery file, visit and download the latest Hover Intent jQuery Plugin. Save the file to your current directory, and call the file.

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

Step 6. Launching Code on Document Ready

Directly after the line where you called your jQuery and hover intent file, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 7. Set Hover Over & Hover Out Events – jQuery

Note: When using the hover intent plugin, it requires each hover over and hover out state to be in its own function.

The Logic

When a drop down parent link is hovered over:

1. Find .sub and fade it in (By default, we will fade the opacity down to 0)
2. Check if a .row exists (in case you want more than one row in the drop down)
3. If .row does exists, find the widest row and set the width of the .sub container.
4. If .row does not exist, set the width of the .sub container.

On hover out:

1. Find .sub and fade it out (Opacity 0)
2. Hide .sub (Display none – so it is completely out of the way)

The following script contains comments explaining which jQuery actions are being performed.

//On Hover Over
function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;	

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

Step 8. Set Custom Configurations & Trigger Function

Now that we declared the hover over and hover out function in the above step, its now time to set the custom configurations and call the hover intent function.

//Set custom configurations
var config = {
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
     interval: 100, // number = milliseconds for onMouseOver polling interval
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
     timeout: 500, // number = milliseconds delay before onMouseOut
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

For more detailed explanation of how hover intent works, check out their website.

Conclusion

Keep in mind that this script calculates the width of your .sub container (adding up all UL’s per row) and automatically adjusts it. If you would like to specify your own custom width, you can delete that portion of the code and specify a static width in your CSS. This all depends on what you are trying to add in your mega drop down, and each scenario may be different. I hope you grasped the basic concepts of this tutorial so you can make your own custom mega drop down for future projects. If you have any questions, concerns, or suggestions, please let me know!

Inspiration Elsewhere

Now that you know how to create a mega drop down from scratch, check out some of these sites for inspiration.

Related Articles

• Designing Drop-Down Menus: Examples and Best Practices
• Hover Intent
• Mega Drop-Down Navigation Menus Work Well

Similar Posts:

• Horizontal Subnav with CSS
• Animated Navigation with CSS & jQuery
• “Active” State in CSS Navigations
• Side Navigation Tooltip / Popup Bubble
• Simple Tabs w/ CSS & jQuery

If anyone has any advice, requests, or suggestions for my future guest post articles, please let me know. I’m constantly trying to better myself and it would appreciate your support

Similar Posts:

• Guest Post – 5 Useful Coding Solutions Part 2
• Using Print Stylesheets Effectively
• CSS Beginners Do’s and Dont’s Part 2
• Learning One Step at a Time
• CSS Beginners Do’s and Dont’s Part 1

Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.

Step 1. Wireframe – HTML

Start by visualizing the wireframe of how each post item will be laid out.

<div class="post">
	<div class="postheader">
		<!--Post Header Elements Goes Here-->
	</div>
	<!--Post Content Goes Here-->
</div>

Step 2. Styling Wireframe – CSS

Each post entry will be wrapped within the .post class. Since we are using absolute positioning on the .postheader, be sure to add enough top padding on .post so the post content does not overlap with the heading.

.post {
	margin: 0; padding: 110px 20px 20px;
	float: left;
	width: 560px;
	position: relative;
}
.post .postheader {
	background: url(postheader_bg.gif) repeat-x;
	float: left;
	width: 600px;
	position: absolute;
	left: 0; top: 0;
}

Step 3. Post Header Wireframe – HTML

Now we’ll look closer at how each element will be placed within the .postheader.

<div class="postheader">
	<span class="date"><strong>Oct</strong>25 <small>2009</small></span>
	<h2><a href="#">Styling Blog Post Headers with CSS</a></h2>
	<a href="#" class="comments">25</a>
	<p>
		<span>Category: <a href="#">CSS</a> | Tags: <a href="#">Headings</a>, <a href="#">Tutorials</a></span>
		By <a href="#">Soh Tanaka</a>
	</p>
</div>

Step 4. Styling Post Header – CSS

Date Style
The part that sticks out of the layout is the date. Set the positioning to absolute and pull it back -50px to the left.

.date {
	background: url(date_bg.gif) no-repeat;
	width: 46px; height: 57px;
	float: left;
	padding: 3px 5px 3px 0;
	text-align: center;
	font-size: 1.8em;
	position: absolute;
	left: -50px; top: 0;
}
.date strong, .date small {
	font-size: 0.5em;
	text-transform: uppercase;
	display: block;
}

Comments Style
Similar to how we styled the date, we will use absolute positioning to push the comments block -10px to the top and -10px to the right.

a.comments {
	position: absolute;
	right: -10px; top: -10px;
	background: url(comment_bubble.gif) no-repeat;
	width: 34px; height: 39px;
	padding: 7px 0 0;
	text-align: center;
	color: #fff;
	font-size: 1.6em;
	text-decoration: none;
}

Level 2 Heading Style
Since the comments area is bleeding over on top of the heading, make sure you have enough padding on the right side so it does not overlap. Set height and line-height to match so it can be vertically aligned. For those browsers that support text shadows, we can add a nice touch of letter press style using the text-shadow property.

.post .postheader h2 {
	margin: 0; padding: 0 25px 0 10px;
	font: normal 2.2em Georgia, "Times New Roman", Times, serif;
	height: 62px; line-height: 62px;
	text-shadow: 1px 1px 1px #cfeb7f;
}
.post .postheader h2 a {
	text-decoration: none;
	color: #222;
	display: block;
}

Auxiliary Information Style
The aux information will be wrapped in a paragraph tag. To accommodate for the background image, be sure to add 60px padding to the left. For the category and tag information, wrap it in a span which will be floated to the right.

.post .postheader p{
	font-size: 0.9em;
	background: url(author_bg.gif) no-repeat 10px bottom;
	height: 27px; line-height: 27px;
	margin: 0; padding: 0 10px 0 60px;
	color: #fff;
}
.postheader p a {color: #fff;}
.postheader p span {float: right;}

Conclusion

Now that you know how this technique is achieved, check out some of the sites below for inspiration! If you have any questions, suggestions, or concerns, please don’t hesitate to let me know.

Usability Post

Line 25

Noupe

From the Couch

Koodoz

Web Designer Wall

Branded 07
Similar Posts:

• Animated Navigation with CSS & jQuery
• Two Simple Ways to Vertically Align with CSS
• Side Navigation Tooltip / Popup Bubble
• Horizontal Subnav with CSS
• Facebook Style Footer Admin Panel Part 2

My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

Wireframe – HTML

First set up an unordered list which we will use as our foundation for the list
of gallery images.

<ul class="gallery">
	<li>
		<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
		<h2><a href="#">Image Name</a></h2>
	</li>
</ul>

You will notice that each list will contain an image which is nested within a <span> tag. The <span> tag will be used to crop the image to only show its default state. Take a look at the image below to get a visual.

Styling – CSS

We will style this up as a typical gallery. Only thing unique about the below CSS is that we have the <span> to crop our image as we demonstrated in the above example.

ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

Step 3. Animation – jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

The logic here will be to fade out the default thumbnail, and set a background image on the <a> tag. Using CSS Sprites, we will position the image to the ‘bottom’ so the greyscaled thumbnail can seep through on hover over.

The following script contains comments explaining which jQuery actions are being performed.

jQuery

$(document).ready(function() {

	$("ul.gallery li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});

Conclusion

I’m sure there are various ways of achieving this technique. I decided to use CSS Sprites technique to prevent glitching on the initial hover over. If anyone has a better solution, have questions, or suggestions, please feel free to let me know!Similar Posts:

• Fancy Thumbnail Hover Effect w/ jQuery
• Horizontal Subnav with CSS
• Animated Navigation with CSS & jQuery
• Simple Tabs w/ CSS & jQuery
• Mega Drop Down Menus w/ CSS & jQuery

Take a look at the demo below to get a preview of what you will be creating. Also if you would like to download the PSD that we will be working with, go right ahead.

Foundation – HTML

Start by creating your navigation with an unordered list. Be sure to assign a unique class name to each of the list items.

<ul id="topnav">
	<li class="home"><a href="index.htm">Home</a></li>
	<li class="about"><a href="about.htm">About Us</a></li>
	<li class="services"><a href="services.htm">Services</a></li>
	<li class="portfolio"><a href="portfolio.htm">Portfolio</a></li>
	<li class="contact"><a href="contact.htm">Contact</a></li>
	<li class="blog"><a href="blog.htm">Blog</a></li>
</ul>

Styling – CSS

Strip down the unordered list to bare bones. This will prepare us for the text replacement technique for each of our navigation links.

ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
	float: left;
	width: 960px;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
}

We will be using CSS Sprites, this will basically allow us to have three states (Default, Hover, & Active) for each navigation link.

/*--CSS Sprites - Default State--*/
ul#topnav a {
	float: left;
	display: block;
	height: 58px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
	background-image: url(home_a.jpg);
	width: 120px;
}
ul#topnav li.about a {
	background-image: url(about_a.jpg);
	width: 147px;
}
ul#topnav li.services a {
	background-image: url(services_a.jpg);
	width: 157px;
}
ul#topnav li.portfolio a {
	background-image: url(portfolio_a.jpg);
	width: 182px;
}
ul#topnav li.contact a {
	background-image: url(contact_a.jpg);
	width: 179px;
}
ul#topnav li.blog a {
	background-image: url(blog_a.jpg);
	width: 175px;
}

Setting the “Active” State

We will be adding this “active” state by assigning an ID to the <body> tag on each of our pages. By assigning an ID to each page, we can now specify different properties and values depending on which page it’s on.

So for example, the homepage file should have the <body> tag set like this:

Home Page HTML

...
<body id="home">
...

and the About Us page like:

About Page HTML

...
<body id="about">
...

and so on. Each page should now have its own unique ID on the <body> tag.

Using CSS Specificity to override the default and hover states, we associate each body ID with its matching list item class to set the active state.

The Logic in Plain English
If it’s on the “home” page (body id=”home”) , set the “home” link (li class=”home”) to “active” (background-position: left bottom;).

Now we will apply this logic to cater for all of the pages.

CSS

#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.services a, /*--Services Page > Services Link--*/
#portfolio li.portfolio a, /*--Portfolio Page > Portfolio Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
	background-position: left bottom;
}

Below is a visual demonstration of how all of this is working together.

Conclusion

If anyone has any questions, concerns, or comments please feel free to let me know!

Need Navigation Inspiration?

Check out Design Bombs for some navigation inspiration!

Similar Posts:

• Animated Navigation with CSS & jQuery
• Horizontal Subnav with CSS
• Mega Drop Down Menus w/ CSS & jQuery
• CSS Beginners Do’s and Dont’s Part 2
• Facebook Style Footer Admin Panel Part 1

Today I would like to go over how to create a fixed sidenav layout for your blog or website.

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…Read More

Similar Posts:

• CSS Vertical Navigation with Teaser
• Markup Hierarchy – Advantages in SEO
• CSS Beginners Do’s and Dont’s Part 2
• Side Navigation Tooltip / Popup Bubble
• Using Print Stylesheets Effectively