Grow your CSS skills. Land your dream job.

Some Updated and Improved Examples

Published by Chris Coyier

We are all learning and becoming better web designers and developers all the time. At least I hope we are, that is the whole point of this site! It is always a good idea to re-visit things from time to time and make sure we did things as well and as smart as we are able. If it's been long, chances are there are things that can be done better. Here are some examples that I have updated recently.

Digg Header

With the help of Christian Gorbach, I was able to improve the jQuery for the drop-down menu in the Digg Header Example. Before, the drop down menus were activated by toggling the display value of the unordered list that made up that menu. Plus, it relied on each of those menus having a unique ID. jQuery is able to be MUCH smarter than that, this is how we do it now:

<script type="text/javascript">
	$(document).ready(function(){
	   $("#zone-bar li em").click(function() {
			var hidden = $(this).parents("li").children("ul").is(":hidden");
			
			$("#zone-bar>ul>li>ul").hide()        
			$("#zone-bar>ul>li>a").removeClass();
				
			if (hidden) {
				$(this)
					.parents("li").children("ul").toggle()
					.parents("li").children("a").addClass("zoneCur");
				} 
		   });
	});
</script>

Aside from being shorter and more flexible code, it has more functionality. Now the menus will now close when another is opened. In Christian's words, it "preserves the state of the menu" before the toggling happens. Also the current menu highlighting is done now by applying a class so that it can stay highlighted even when you mouse away. Very cool.

 

Photo Revealer

Along these same lines, I have made a few improvements to the Revealing Photo Slider. In this new version, no longer are any variables hard-coded into the javascript, they are all dynamically gotten from the size of the image in the markup. Each photo you wish to add simply looks like this now:

<td><div class="photo_slider">
	<img src="images/baloon.jpg"/>
	<div class="info_area">
		<h3>Climbing Mt. Hood</h3>
		<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
	</div>
</div></td>

This can (and will) be made even smarter yet. Right now, you can see the main DIV is wrapped yet again by a table cell, this is because a table with a single row is an easy way to prevent any line wrapping so the row of pictures only horizontally expands. This table and cells could be applied directly from jQuery and not need to be coded directly in the markup, just haven't gotten around to that yet. HUGE thanks to Benjamin Sterling for all his patience at help on this one. Firefox is still being a punk about getting the image sizes on the first page load...

 

Great Gallery Roundup

There has been some new website galleries pop up since I first created The Great Website Design Gallery Roundup. A number of them have been added. Several folks have sent in requests for sites to be added. I'm happy to do that in order to keep this being a useful reference for those type of sites.

 

Menu Fader

Romain Sauvaire helped me out with a great way to handle the "Menu Fader" example. In the new smarter version, instead of hard-coding which buttons and content areas fade in and out when the buttons are clicked the script first checks to see if the button is already faded or not. If it is, it fades it in and reveals the proper content area based on it's ID (some extra smarts in there). If it's not it does nothing so it doesn't waste any cycles.

Comments

  1. Benn
    Permalink to comment#

    Hey this update on the menu fader is really cool. It loads really fast and saves writing all that previous code in. The only thing that i have noticed is that it seems to fade the content a little. Is this intentional or something thats changed in the JQUERY?

    be good to know how to set it so that the content doesn’t fade

    Benn

  2. Benn
    Permalink to comment#

    back again. Just noticed that the content when first brough up is clear and not faded out. But as soon as you hit one of the menu link the content then stays faded?

    Benn

  3. Hey Benn,

    To fix that, change this line toward the bottom of the jQuery:

    $clicked.siblings().animate({

    to this:

    $clicked.siblings(“.button”).animate({

  4. Benn
    Permalink to comment#

    Wicked that worked

    Tres bien to that man

    Benn

  5. Benn
    Permalink to comment#

    Wow found another ickle glith. Im using an iframe for a contact form, like the original example you had done chris. When this menu link is loaded the iframe seems to flash and then again when you go to another link.
    Is this because the JQUERY isn’t referencing this directly on the same page? This didn’t happen before with the original JQUERY code

  6. Peter
    Permalink to comment#

    Interesting CSS variation on Menu Fader : http://www.3point7designs.com/web-design2.html

    http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/

    demo ( horizontal menu ) : http://www.3point7designs.com/web-design2.html

    NB : as stated in one of the comments, a left-parenthesis is missing from the CSS-code here :

    #home.active { background: url../images/navigation/home.gif) -103px 0;

  7. Permalink to comment#

    Hi Chris,

    I am sorry, but the dropdown menu fix does not work. The dropdown menus remain still open!

    Regards,

    Tobi

  8. the revealing photo slider its cool! but You have to slide a lot to see the other images..
    I like more LightBox.. or something like that..

  9. wow! Im the 2nd one who voted ! :D
    jQuery!! and Mootools are awesome! :D

  10. Michael
    Permalink to comment#

    The Digg example doesn’t work all that great for me. If I click on a menu drop down arrow then click off the menu say on the content the menu box will not go away but stay there. Sometimes if I click on the content 3-4 times the drop down menu might go away, even then it’s not always.

    Digg’s website does go away when I click off the menu.

  11. @Michael: Yep, you are right. I have no idea how to fix that. I am just learning jQuery myself. If you figure out how to take care of that, let me know and I’ll update the example.

  12. Permalink to comment#

    I really like the revealing photo slider – definitely a fan of Mootools.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".