Animate a Contact Us Slide-Out Area using jQuery. 14th July, 2009 Tom Kenny Tutorials Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked.
All with the help of our little friend, jQuery. View the Demo Download Files (.zip) First we start of with the necessary file includes: We’re using jQuery 1.3 hosted by Google, the jQuery easing plugin and our own custom code in the contact.js file. Let’s set the height of the contactArea div to the desired height in the css. Of course we need to start off with the $(document).ready() function so that jQuery knows what code to load and use. $(document).ready(function() { // put all your jQuery goodness in here. }); The first line of code is going to be the code mentioned earlier to hide the contactArea div.
$(document).ready(function(){ $("#contactArea").css('height', '0px'); How to Build a Kick-Butt CSS3 Mega Drop-Down Menu. Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout.
In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features. Step 1: Building the Navigation Bar Let's begin with a basic menu, built with an unordered list and some basic CSS styling. Creating the Menu Container We'll now apply some basic CSS styling. Now, let's see how we can improve it with some CSS3 features. For rounded corners, the syntax will be : For the background, we'll use gradients and a fallback color for older browsers. The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.
We can now add a darker border and polish the design with a "fake" inset border created with the "box-shadow" feature. HTML Part. jQuery Push Menu Preview. Slide-Down Mega Drop-Down Menus with Ajax and jQuery. The menu above has mega drop-downs that slide the content area down, similar to the drop-down menus on CBC.ca.
This is just filler content to show how the content below the drop-downs slides down instead of being overlaid (as with customary drop-downs). Read the associated article for a full description of the features of this menu. Or just try it out. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Slide-Down Mega Drop-Down Menus with Ajax and jQuery. UPDATE 11/22/2010: I’ve completely revamped the code for these menus, making it a little cleaner and more efficient.
Still works exactly the same way. While reading an article on CBC’s website, I noticed they have added what seem to be newly-designed mega drop-down menus that work in an interesting kind of way. These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely. It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so I’m holding off on that for now. Here’s the demo link if you want to view it before reading the description below: Features of the Drop-Down Menus Here are some characteristics of the CBC version, that I incorporated into mine: Bonus Features In addition to those features, my version includes: