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. 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. CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. For more details on CSS gradient, read my article Cross-Browser CSS Gradient. How To Use My Buttons?
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. 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: Overview of the Code The code isn’t too hard to figure out. Here’s a direct link to the live JS file if you want to take a peek.
css Zen Garden: The Beauty in CSS Design 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 design a sexy header for your site using CSS Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to dedicate a post about how to realize a similar "graphic composition", so I decided to publish a post with the "process" I use in general to design graphical sections for my web sites.First approach: be simple. The most important rule is: be simple. - Logo layer - Navigation bar - Green site introduction section Each element has a fixed width but how navigation bar and site introduction section fit the page size. Another solution to avoid container layers is applying a background picture to the <body> section using css, but I prefer working with pure layer instead of images to have more control on the design. Design the header with Photoshop A good practice is trying to design first your header in Photoshop to have an idea about how it will look. ... and CSS code is: It's all!
CSS gradients for all web browsers, without using images One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images. Syntax options and web browser support The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well). So, as of now, we have have CSS gradients support for: Firefox 3.6Safari 4Google ChromeIntenet Explorer 5.5 Examples 01. 02. 13.
Ten CSS tricks you may not know 1. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! 2. Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. <p class="text side">... Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. 3. When writing a border rule you'll usually specify the color, width and style (in any order). If you were to write just border: solid then the defaults for that border will be used. 4. Lots of web pages have a link to a print-friendly version. So, your page header should contains links to two CSS documents, one for the screen, and one for printing: 5. <h1>Buy widgets</h1>
Advanced CSS Layouts: Step by Step Abstract The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations. Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Introduction In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts. The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. The Layout Challenge The WebReference home page circa Spring 2001 has six big blocks that hold and organize the content (using three main tables to lay out the page): Can this complex layout be replicated using only CSS? 3 Column Layout: Step by Step Add the Top Nav and Ad Bars Float the Tip-o-the-Day Content Anyone?
Fixed Header & Footer Layout: A Beginner’s Guide | Noobcube Having a fixed header and/or footer can be quite effective in a web interface where its use proves to be advantageous. However, getting it implemented in all browsers, including IE6, can seem quite daunting. In this tutorial we'll not only get it working in all the major browsers, but we'll also cover all the necessary steps required in doing so. By the end of this tutorial, you should be able to implement this into your own projects without having to copy and paste a thing. Noobnote: Since the recent Firefox update (3.5), there's been a bug found in this layout. Introduction Creating a web layout with a fixed header and footer is quite easy in your modern browsers (Firefox, IE7/IE8, Opera, Safari, Chrome, etc). You need not only worry about Internet Explorer 6 when using position: fixed but the same problems can occur in IE7 if it's in quirks mode. Declaring the value fixed on the position property is closely related to its sister value, absolute . Create some basic content for our page