Oct 29
Advanced CSS Menu
Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.
Overview
Here are the required graphics to assembe the menu (you can download from the zip).
1. Main background
Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.
2. Button graphics
Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).
Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Paste the "home" graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.
Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.
Repeat this step for the other buttons. You should have the follow graphics:
3. HTML source
When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.
- note there is an id="menu" assigned to the
<ul>tag - an unique class name assigned to each link
<a> - an empty
<span>tag (the purpose of this is to make the mouseover effect)
<ul id="menu">
<li><a href="#" class="home">Home <span></span></a></li>
<li><a href="#" class="about">About <span></span></a></li>
<li><a href="#" class="rss">RSS <span></span></a></li>
</ul>
#menu
Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span
Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.
#menu span {
display: none;
position: absolute;
}
#menu a
The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover
When mouseover the link, we want to shift the background image from top to bottom.
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span
When mouseover the link, we want the span element to display:block.
#menu a:hover span {
display: block;
}
#menu .home
Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span
Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about
Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss
Repeat this step for .rss
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
All in one:
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
Done
That’s it. You can preview my CSS menu.
Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.
Design Watercolor Effect Menu Review: PayPal Redesign
Comments
There are 479 comments (+Add)
Loading ...
1 Dodski http://www.dodski.com
October 29th, 2007 at 1:41 am
WOW nice rollover menu.. ^_^
2 Arctic http://hellobmw.com
October 29th, 2007 at 1:52 am
You are a real artist! Amazing work!
3 Martius http://www.designfount.com
October 29th, 2007 at 2:02 am
Perfect tutorial! Thank you
4 Nathan http://artisticimpulses.com
October 29th, 2007 at 2:22 am
Your tutorials are always so so helpful. Brilliant work as usual.
Now I must read it again for it to sink in. lol!
Thanks!
5 nagraz http://nagraz.ifastnet.com
October 29th, 2007 at 3:11 am
thx 4 your tutorial…so amazing….
6 Paul Wilkins
October 29th, 2007 at 3:33 am
That’s a great tutorial, but please, you may want to update “Start with an un-ordered list ” to say “Start with an un-ordered list “
7 Paul Wilkins
October 29th, 2007 at 3:35 am
Edit:
That’s a great tutorial, but please, you may want to update the “Start with an un-ordered list” piece so that it doesn’t use an OL tag but instal an UL tag.
8 Jonny Haynes http://www.jonnyhaynes.co.uk
October 29th, 2007 at 6:07 am
Hi nice tutorial, however you made a mistake - may confuse some people - see below … you mention a un-ordered list but show the tag for an ordered list.
Great work though … keep it up!
9 Christina http://www.christinafowler.com
October 29th, 2007 at 6:52 am
This is a great tutorial, I have a slightly different way of doing the same thing. I place the span tags around the link text like this –> About
So when you declare - span {display:none} - it hides the text.
10 Christina http://www.christinafowler.com
October 29th, 2007 at 6:53 am
^ ^ Sorry that should say span>About/span>
11 Christina http://www.christinafowler.com
October 29th, 2007 at 6:55 am
Grr! How do you show tags using these comments??
Try this! <span> About </span>
12 Grant http://www.grantmc.co.uk
October 29th, 2007 at 6:59 am
Great tutorial!
Good to know.
13 Mike
October 29th, 2007 at 7:27 am
You can achieve pretty much the same effect - but without the use of non-semantic span tags - by applying the background image directly to the a tag, and setting the width and height on that.
Unless I’m missing something specific with the span…?
14 Olivier http://innovablog.com
October 29th, 2007 at 7:34 am
Wonderfull job. Go on !
15 Mike
October 29th, 2007 at 7:36 am
Actually, looking back at the code and what I just wrote - you’d need to do the following:
Combine the ‘out’ and ‘over’ graphics into a single image - ‘out’ state at the top, ‘over’ state at the bottom.
Use the css background-position property to set the background image at the top of the ‘a’ tag when it’s inactive, and set the background-position at bottom on the ‘a:hover’. You’ll need to check your specicivity to make sure the right image is displayed on the right li.
Set the display of the ‘a’ tags to ‘block’, and set the width and height (you may need to float the ‘li’s).
Set the text-indent on the ‘a’ tags to a fairly large negative number.
That *should* be your lot (although I’m probably missing something out!) - no non-semantic span tags, and single image rollovers which should save on both bandwidth and server requests (and make your css a tiny bit leaner).
16 Ryan Scherf http://www.ryanscherf.net
October 29th, 2007 at 7:53 am
Your tutorial has a typo:
3. HTML source
When you are done with the graphics, let’s start coding. Start with an un-ordered list .
17 Carly http://twisted-barfly.co.uk
October 29th, 2007 at 7:56 am
Wow… this is great. I’ve only skimmed the coding but with all that positioning does the menu work correctly in every single browser/resolution combo?
I can’t wait to try this out though…!
18 noway http://www.advise-art.com
October 29th, 2007 at 8:03 am
excellent ! … je vais le tester tout de suite !
19 Elliot Jay Stocks http://elliotjaystocks.com
October 29th, 2007 at 8:41 am
It’s funny you should post this, Nick - I posted my own very similar tutorial at the weekend! I think I prefer the way you’ve laid yours out, though, and the hover effect with the is a really nice touch. Well done… again!
20 Duluoz
October 29th, 2007 at 10:36 am
Mike - You are correct. The added span and extra graphic can be consolidated to a single sprite graphic with less CSS required as you mentioned.
21 eshark http://esharkdesign.com
October 29th, 2007 at 12:40 pm
Great you have this tip continued and put it to the next level.. a Must Read tutorials indeed.. Bravo again!
22 chris http://www.okaymentary.com
October 29th, 2007 at 1:06 pm
nice tutorial, but using 7 images here seems a bit bulky when it could be done with 2. check out elliot’s tutorial above or alistaprt for the css sprite method.
23 Nick http://www.webdesignerwall.com
October 29th, 2007 at 1:34 pm
@Mike - Yes, alternatively you can put all the button graphics in one single GIF image, but by separating the graphics it gives better control. I can simply change the button location by the top and left property (without going to Photoshop, editing the image, and then changing the CSS again).
@Jonny Haynes, Paul Wilkins - Thank you for the correction. The typo is fixed (changed from <ol> to <ul>).
24 Rahul Joshi http://www.rjdesignz.com/
October 29th, 2007 at 2:39 pm
nice one… i was waiting for such a tutorial….
actually i wanted to implement a horizontal navigation menu in a wordpress theme, where normal and hover states are different images. This tutorial is a bit close to that, but can u please help me out and let me know how can i achieve such menu in wordpress?
25 andrej http://speak-friend.com
October 29th, 2007 at 6:20 pm
what function does the “outline:none” on the “#menu a” element have?
26 Nick http://www.webdesignerwall.com
October 29th, 2007 at 7:06 pm
@andrej - the outline property is to remove the dotted border around the link in Firefox on click.
27 andrej http://speak-friend.com
October 29th, 2007 at 7:18 pm
thank you, nick. great article by the way.
I was wondering if there is any negative search engine outcome when using css-properties such as text-indent: -900% to remove search engine relevant html code from the users eye.
In your case it is not critical, however what about properties like display:none, are capable of removing whole blocks of text.
28 Víctor http://geekway.org
October 30th, 2007 at 1:13 am
Wow. Exelent man, as always. You’re like my heroe, every day i learn more and more XHTML tips but this is just great.
29 Timothy Diokno
October 30th, 2007 at 4:18 am
@Nick: Yes, it can be done in two images.Why seven? It’s because of the amount of time consumed when loading the whole image needed for the sprites?
30 Mike
October 30th, 2007 at 4:22 am
@ andrej: As far as I’ve found, there are no negative search engine outcomes to using a negative margin on the text - the text is still in the markup and is fully readable by search engines and screenreaders. On the other hand, some search engine robots and screenreaders ignore any text that’s hidden by display:none (or so I’ve read) so that would have an impact. Both methods fall down when images are turned off and CSS is turned on in a user’s browser, but there are a couple of ways around this (which require non-semantic span tags, unfortunately) - mezzoblue has a list of different methods with advantages and pitfalls.
For most sites I design/build, I use a semantic single-image negative margin method with the background image, display:block and dimensions applied directly to the ‘a’ tag. It’s served me well so far, and it’s reasonably quick to do.
31 Chris
October 30th, 2007 at 8:12 am
@Mike: Search engines discourage what they call cloaking, basically intentionally showing the search engine something different than what your site shows a user. Sites that use a heavy amount of Flash often cloak to get their site content in the search engines. I do not think negative margin would be considered cloaking.
Search Engine Spiders cannot read CSS or JS so I doubt that they are paying attention to whether or not an element is set to: display:none or visibility:hidden.
Just turn off your CSS in FF and that is most likely what Google sees.
32 Sig Generator http://www.mysigchat.uni.cc
October 30th, 2007 at 8:25 am
Rollovers in css basically right? Nice effect, the notepaper effect is still pretty fresh.
33 Hayden Noonan
October 30th, 2007 at 8:41 am
There is a better method, although it takes a bit extra CSS code, that only requires the use of one image. By using only one image for all effects (normal, focus, hover, etc..), you are guaranteed that all images will be displayed instantly without any extra loading time when hovered over or focused on.
To do this, you use the “background-position” property.
Quite a nifty little trick which I use on most of my designs nowadays.
34 Kevin Holler http://www.kevinholler.eu
October 30th, 2007 at 8:49 am
Very nice indeed.. I love the whole freestyle feel to it. It doesn’t feel so, bland. Cool idea.
35 Wendy
October 30th, 2007 at 9:27 am
Hmmm. If you’re going to use images for just about everything in the menu, why are you even bothering with CSS? One of the chief advantages of CSS menus is that they’re easy to update — they’re text. With this menu, you have to redo images and worry about sizes every time something changes. It’s a beautifully done menu, but still.
36 Jim
October 30th, 2007 at 9:34 am
Overall very nice. Doctype on this is XHTML 1.0 Strict when it should be Transitional. The empty <span> tag is throwing validation warnings as well as the <link> tag inside of the <div id=”content”>. The single image is great but the use of the empty span can be overcome as you mentioned with the negative margin.
Well done, thanks.
37 ryan http://none
October 30th, 2007 at 10:10 am
How in the !#@$$ is this advanced? its @#$% css…
38 drew http://www.adultswim.com
October 30th, 2007 at 10:15 am
wow — so, so simple yet so genius — tnx for the tips.
39 Sergio http://ihatedesign.frih.net/blog/
October 30th, 2007 at 10:30 am
amazing!! your blog is great and this tutorial rocks!!
Cheers!
40 Peter
October 30th, 2007 at 10:31 am
Well, ryan, it’s !#@$$ advanced CSS because there are other, simpler, methods of using CSS for menus. I’m sorry this article insulted your supreme intelligence and skill.
41 DJinHouston http://www.fhpentertainment.com/blog/
October 30th, 2007 at 11:00 am
Great Article, I love the theme and i love how your website comes together, very creative…
Thanks…
42 wilson http://realityasylum.net
October 30th, 2007 at 11:14 am
I haven’t even finished reading the article, I am just absolutely BLOWN AWAY by your site design. Completely awesome!! As to the comment by Wendy, I think that CSS is the future of all layout not just text. I still use photoshop to export tables for my menus and rollovers. but I am currently trying to convert to CSS. why? because tables are a pain in the a**. CSS seems to allow easier placement and arranging of items without all the fuss of table alignment.
43 Jagan Ram
October 30th, 2007 at 11:25 am
looks very interesting
44 Dan Black http://www.dystopiapop.com
October 30th, 2007 at 11:33 am
I’ve got to chime in with Mike here… What’s the reasoning for adding the span tag when the same can be achieved by being directly applied to the list items themselves. I suppose its to hide the type underneath?
45 Peter
October 30th, 2007 at 12:24 pm
First: Fireworks does this better than Photoshop, and faster, too. Two: this is for personal sites because it’s not SEF. In other words, with this technique you sacrifice SEF at the expense of graphics. Sorry I can’t dig up the alternative that allows it both ways.
46 alberto http://alblog.adoxis.com
October 30th, 2007 at 12:26 pm
Pretty good, but really you need to tell me how did you do that dashed line in photoshop, or is it illustrator?
47 Phil Moss http://none
October 30th, 2007 at 1:16 pm
agreed…its poop
48 Mark Story http://mark-story.com
October 30th, 2007 at 1:39 pm
Why use the span elements at all? you can easily do the hover with a single graphic by implementing a CSS sprite. So both the normal and hover state would be one graphic and you would shift the graphic up to reveal the over state instead of using a extra unneeded span element and another graphic file. But other than that a good tutorial.
49 Ben http://www.thecaseworkshop.com
October 30th, 2007 at 1:47 pm
Disregard the douches who are downplaying your menu. This is a fantastic approach!!
50 Michael Whalen http://whalesalad.com
October 30th, 2007 at 1:51 pm
I have to agree that this wasn’t exactly coded the easiest and most efficient way. There are quite a few things I might do differently to use less markup and CSS, but, cool idea!
51 Fabio Sasso http://abduzeedo.com
October 30th, 2007 at 2:24 pm
Excellent article… thanks..
52 Limited Edition iPhone http://limitededitioniphone.com
October 30th, 2007 at 2:55 pm
What font did you use for Rss. I really like that R
53 Livin Truth http://n/a
October 30th, 2007 at 3:09 pm
whos the tool who named him self “limited edition I****” (censored myself).
Also, thanks for the tip, i’m viewing this in IE7 and at first i thought it was flash when it did its transition.
54 John Page
October 30th, 2007 at 4:05 pm
Mark Story has the right idea. There is a CSS menu mouseover technique which makes the span tags unneccessary. Make one background image with both background images on it. Set the hover state for the a tag to change the background-position so that it shows the other portion of the background image. Done.
Having gotten that off my chest.. nice design.
55 T http://g8.no
October 30th, 2007 at 5:20 pm
Hey man, great tip.. Do you read your e-mail? I´ve tried sending you e-mail, but never gotten a reply back.. Please send me a note so I know how to reach you.
Cheers,
Terje
56 Shantanu Bala http://womlution.com/
October 30th, 2007 at 7:10 pm
Great menu. The complicated CSS placement is amazing. Only downside is the amount of images the menu, and this site has. I prefer lightweight, fast loading, and low bandwidth consuming templates. Don’t mean to criticize your site, but 700k for a site is fairly unbelievable. There are bigger sites, but not everyone has T1. Not only that, but the bandwidth consumption is terrible.
57 Erwan http://www.buzzynote.com/
October 30th, 2007 at 9:00 pm
humm… It makes me want a news template
58 benwa http://www.ebenoit.com
October 30th, 2007 at 9:32 pm
quickly reading through your code I think there is a little simpler/shorter method that I have done before. i’ve done it on the following site - http://www.hansongardenclub.org - if someone wishes to disect my code to understand - not sure if I have a bookmark on this method…I’ll go check
59 benwa http://www.ebenoit.com
October 30th, 2007 at 9:40 pm
i also believe the method i did worked fine in IE6 with no javascript.
60 benwa http://www.ebenoit.com
October 30th, 2007 at 9:47 pm
copy/paste from my css
=======
#nav a:hover {
background-position: 0 -42px;
}
a.home {
display: block;
float: left;
width: 60px;
height: 42px;
background: url(”../images/nav_rollover_home.jpg”) 0 0 no-repeat;
text-decoration: none;
}
========
my html file - i took out the brackets otherwise the site converts the html
========
div id=”nav”
a href=”/” class=”home”
/div
this is all you need - i remember it working on Mac/PC multiple browsers
61 Boris http://www.ooyes.net
October 31st, 2007 at 5:50 am
thanks..
Look this site
http://www.ooyes.net
62 Bart http://=
October 31st, 2007 at 9:08 am
@Boris: Why do you use the wallpaper of bartelme in your design?
63 dduck http://dstyle.org
October 31st, 2007 at 1:51 pm
I just changed position property of ‘#menu’ to absolute.
And ‘#ment span’ to relative.
So the mouseover function works in IE & FF.
64 Andrew Ingram http://andrewingram.net
October 31st, 2007 at 8:33 pm
I haven’t read all the comments but I imagine most of this has already been said.
The menu looks very nice but it could have been done much more effectively using just one or two images and without the issue of waiting for multiple images to load.
I wrote a plugin for Fireworks that practically automates the whole process of making such a menu using a single image.
65 saxdes http://www.saxdes.com
November 1st, 2007 at 1:11 am
uhh,
can one switch this css to multiple languages using the same objects?
maybe thats just an .svg option available in go live; back when it was supported by adobe and w3c, and live motion worked too.
has anyone seen where smart objects and .swg went off to?
i can seem to find much on that
seems we are either coding in html or cutting up images. the dom applies but i guess its not for web graphic designers, and these people can t print like the printers who cant typograph, or read computer code. ill be in the closet hiding out making things move and buttons that make noise on the computer. hand rendering is much better than computer rendering too. i make money as a cadd drafter. so I cant write poetry.
its clear i should pick up a book on css too, this looks pretty cool.
blrrr blrr blhi. I like chicken; my palsy
66 Boris http://www.ooyes.net
November 1st, 2007 at 9:19 am
Bart because it’s good for design and it’s free for use.
:))
67 Eliena Andrews http://www.happy-funtime.blogspot.com
November 1st, 2007 at 9:30 am
i got what i was looking for thanks.
68 Brian Purkiss http://plainbeta.com
November 1st, 2007 at 1:28 pm
Very nice post!!!!!
I am going to use that!
Thanks!
69 Carl Davison http://www.focusedexistence.com/blog/
November 2nd, 2007 at 1:51 am
Wow, what a beautiful site you’ve got here. And great content. I’ll be sticking around! Thanks!
70 Ryan
November 2nd, 2007 at 2:49 am
What program do you use to code it? Just wondering…
71 Ara P. http://www.baliwebdesign.net
November 2nd, 2007 at 8:33 am
amazing tutorial..i will try to use it in my next website..thanks a lot
72 Scottsdale Web Design http://www.tenships.com/
November 2nd, 2007 at 8:05 pm
cool tutorial, I’ve never seen the process laid out in such an easy to understand format before.
73 j e a m http://www.alvarezmontes.com
November 3rd, 2007 at 7:47 am
wow this tut is very nice thanks
74 Desdaemona http://guiltypleasures.iobloggo.com
November 4th, 2007 at 2:11 pm
Thank you SO much. Really. ^ ^
Your tutorial is perfect for me!
(and sorry for my uncertain english :p)
75 Brian Khouw
November 5th, 2007 at 3:00 pm
Nice tutorial, will try it sometime. Thanks.
76 ahmar.rehman http://www.witchitra.com
November 6th, 2007 at 3:08 am
am very glad to found your website first time and it’s amazing and intersting css
thanks u very much …
i hope will get much more about css
77 Paul http://www.studioracket.org
November 7th, 2007 at 1:54 am
Great tutorial… ended up using Elliot Jay’s… but this got me most of the way…
78 Milan http://blog.mno-net.de
November 7th, 2007 at 6:39 am
Hi thanks for this grate tutorial and for this wonderful website!
I come back every day to search for something new
79 Emre Toprak http://www.tombraiderfan.com
November 7th, 2007 at 12:35 pm
excellent
80 Aaron Zipagan http://ozseoservices.com
November 7th, 2007 at 5:49 pm
hi,..i like your tutorial but i’m really amazed about your “back to top” action…
can you please give a tutorial for that or at least send me how?…
thanks…
81 DANIEL http://www.evanescence-fan.com/
November 7th, 2007 at 9:58 pm
yeah! me too! i fall in love with the BACK TO TOP action, it’s really cool, so we’re two now
back to top tutorial!!
82 music000
November 8th, 2007 at 1:43 am
that’s cool,thank you！
83 Search Scripts http://www.search-scripts.com
November 8th, 2007 at 8:16 am
Very Clear and Concise tutorial to create this CSS based menu. It first looked like one has scanned his handwriting to create this menu.
84 PiticStyle http://www.piticstyle.com
November 9th, 2007 at 9:16 pm
Great job!
85 Website Designer http://www.dynamicdeveloper.co.uk
November 10th, 2007 at 7:25 am
Great stuff. Keep posting. The best thing i like about your work is, despite the obvious heavy amount of graphics that’s used, it still loads quickly. You’ve got talent. I’m jealous.
86 compare car insurance rate
November 11th, 2007 at 10:18 pm
Man, what a well set-up website!
87 Vincent
November 13th, 2007 at 1:41 am
Thanks for taking the time to share this great technique with us. Great looking site by the way.
88 Web design Bulgaria https://ooyes.net
November 13th, 2007 at 4:39 am
Awesome! Very impressive and influential to see someone take so much time of their own to give this to all web designers. Thanks!
89 Web design Bulgaria https://ooyes.net
November 13th, 2007 at 4:39 am
Awesome! Yeah Very impressive and influential to see someone take so much time of their own to give this to all web designers. Thanks!
90 dressup http://www.dressup121.com
November 14th, 2007 at 10:00 am
Congrulations
91 Graeme http://www.frogwebworks.co.nz
November 14th, 2007 at 8:57 pm
One of the most beautiful sites I’ve seen. Not only visually stunning, but technically brilliant. Great work! I look forward to seeing future tutorials.
92 netmint http://www.zhajin.com
November 15th, 2007 at 3:24 am
Great work!
Thanks a lot for share this great idea!
I found it has a little bug in IE6,
so i changed the ‘display’ to ‘visibility’,
and it works! No need javascript!
93 Mehmet Poyraz http://www.kurutma.net
November 15th, 2007 at 9:48 am
very nice
94 raja http://www.varnam.in
November 17th, 2007 at 1:56 am
Its really nice man, keep it up . . . . .
95 Jakob
November 17th, 2007 at 7:36 am
Hi,
do yo use microsoft expression?
96 albert lumu
November 17th, 2007 at 11:51 am
This is so cool!
Thanks!
97 sturdy http://www.high5five.com
November 17th, 2007 at 10:27 pm
You are very good at teaching! Congratulations by this tutorial!
98 WebOlution http://www.webolution.gr
November 19th, 2007 at 6:35 pm
excellent work guys !!! just respect
99 Anthony http://www.anthonylipari.net
November 21st, 2007 at 6:45 am
Awesome tutorial thanks
100 Jauhari http://www.jauhari.net
November 21st, 2007 at 5:13 pm
Just Perfect
Really easy and nicely tutorial..
101 Web hosting, design & marketing http://web-hosting-design-marketing.blogspot.com/
November 21st, 2007 at 9:00 pm
Thanks for the detailed instructions. I wonder how it will hold up in Opera, IE 5.5, etc… Will have to try I guess. Your site is an inspiration. I am gonna try these flowers etc. as background soon
102 bLuefRogX http://blog.bluefrogx.com
November 24th, 2007 at 8:44 pm
Absolutely great guide and wonderful website! Love the design
103 ethel http://ethelwenn.com
November 25th, 2007 at 6:19 am
You’re such an inspiration. Thanks!
104 elizer http://relizers.ueuo.com
November 26th, 2007 at 8:47 am
that nice and i want to implemented on my website…
105 angeles http://usa
November 27th, 2007 at 11:24 pm
padrisimo este tapiz
106 Edmonton Web Design http://www.whitespark.ca
November 28th, 2007 at 4:40 pm
Fantastic tutorial. Really easy to follow and use. I’ll definitely be using some of these techniques on future sites. Thanks!
107 huckle
December 2nd, 2007 at 5:55 am
I love this tutorial, and the techniques you use are superb.
Just wondering as to why you use two images - one for the circling and one for the supplementary text (like “home” and “who”)? Surely you could of just placed them into a single image that is css-positioned?
huckle
108 huckle
December 2nd, 2007 at 5:58 am
Sorry, I’ve just read the previous comments!
109 Dennison Uy http://blog.codesignstudios.com
December 2nd, 2007 at 11:04 am
I have been contemplating on writing a similar article as a “tutorial” for one of my newly hired web developers. This article fits the bill nicely. You just saved me a lot of time
110 bahçe aydınlatmaları http://www.buse-aydinlatma-sistemleri.com
December 3rd, 2007 at 4:14 am
thanks .perfect
111 kablo kanalı http://www.ekip-ltd.com.tr
December 3rd, 2007 at 4:15 am
Absolutely great blog
112 Jerome
December 4th, 2007 at 10:16 am
This is great! These tutorials are clear and really help!
113 karolz.M http://karolz-m.blogspot.com
December 5th, 2007 at 5:42 am
COOL!
that give me inspiration on my coming design. you’ll have a new reader! XD
thanks a million. lookin forwward to read your future tutorials.
114 Tayzar44 http://www.tayzar44.blogspot.com
December 5th, 2007 at 5:54 am
Cool!!! Really Awesome!! the best menu I’ve ever seen!!
115 Ali SEVIMLI http://www.alisevimli.com
December 5th, 2007 at 7:33 pm
Güzel tasarım.. tebrikler..
116 Anton Shevchuk http://anton.shevchuk.name
December 7th, 2007 at 4:46 am
Nice article, i use your tutorial for create menu on my personal blog.
117 ashif hus http://ezeewebsolutions.com
December 7th, 2007 at 5:05 am
this is good tutorial but not useful it is also unique. but we can not keep such menu in website.
118 ashif hus http://ezeewebsolutions.com
December 7th, 2007 at 5:10 am
sorry for writing this now i have decided to keep colon in my site
119 Mark Abucayon http://www.mabucplus.com
December 7th, 2007 at 10:15 pm
so nice, I used the technique already… all in all nice job and excellent.
120 Lisa
December 9th, 2007 at 1:19 pm
There is a problem with having position: absolute for the main div, and position: relative for everything else. In Firefox, Opera and Safari, if you want the div to be flush against the top of the page, it adds a space. The only way to fix this is to make everything the same attribute.
I just found this out the hard way. If you know a workaround, that would be wonderful.
121 Jon http://www.fadern.se
December 11th, 2007 at 10:07 am
Good Stuff
122 well
December 12th, 2007 at 1:04 am
I simply wanted to add that you should add text-decoration: none to the stylesheet, as there are odd blue lines (the underlines) rendered from the position of the link way off to the left (to meet the text that is in the negative margin). Although this is a rendering fault and shouldn’t be required (and probably isn’t in many browsers), it’s probably worth the 24 some bytes of code when it produces no incompatibilities whatsoever.
123 Victor Fauziek Sidharta
December 12th, 2007 at 10:49 am
Thank you, it’s a great design. More power to you
124 San
December 12th, 2007 at 2:29 pm
Great, Useful Article.. Like many of yours..
Can you provide the JavaScript for the IE bug, for those who don’t understand Javascript.
125 Jagadish http://jeevan.joolo.com
December 14th, 2007 at 12:33 am
This is really cool and nce.
126 KaraSancak http://www.karasancak.net
December 16th, 2007 at 4:11 am
Good work thanks
127 Sebastian Lissau Lund
December 17th, 2007 at 4:09 am
Hi there, good tutorial but, I can´t seem to find the Photoshop file in the zip file.
128 Sebastian Lissau Lund
December 17th, 2007 at 4:54 pm
Sorry, I found the Ps file.
129 lanx
December 17th, 2007 at 9:27 pm
hey…thanx for sharing your knowledges…hope you can be more succesful in your career…peace..
130 ety
December 19th, 2007 at 5:41 pm
U ARE AMAZING!!! thank u so much for sharing your info!!!
131 emily
December 19th, 2007 at 9:09 pm
how do you download/get photoshop?!
132 ArthasMX http://www.revientate.com.mx
December 23rd, 2007 at 1:55 pm
Really nice site, of course goes to my bookmark list.
Now, for emily (post 131)
U should buy a licensed photoshop copy, but if you want 2 download, search about “torrentz” and read about them
133 Tokyo http://www.ilovetokyo.fr
December 23rd, 2007 at 7:47 pm
Well done ! You’re my Master…teach me more.
134 shweta
December 26th, 2007 at 1:15 am
its a great site i love it,,very cool
135 ictharus http://ictharus.net
December 30th, 2007 at 10:51 am
I am very impressed — thanks for the tutorial.
136 arman http://www.vindoz.blogfa.com
January 1st, 2008 at 3:26 am
wo wo…. this is very nice
thanks a lot
137 SMASHINGAPPS.COM http://www.smashingapps.com
January 2nd, 2008 at 8:23 am
Great tutorial. Thanks for sharing with us.
138 CiCi http://www.gabeltang.de
January 4th, 2008 at 11:06 am
It’s so nice. I will bookmark your web for further learning.
Thanks for sharing!
139 Salman Tanvir http://www.salmantanvir.com
January 4th, 2008 at 2:03 pm
This is really interesting, thanks for sharing.
140 Fabian http://www.onyx-design.net
January 5th, 2008 at 12:45 pm
First of all, thanks for writing this great tutorial.
I am working on a menu my own and I saw that here in your own menu at webmasterwall, you display the data about how much people have subscribed.
Can you explain how you did that?
141 Arun Pattnaik http://www.amazingronit.com
January 7th, 2008 at 5:36 am
One of the finest tutorials I have ever seen. Stumbled & Bookmarked. Thanx!
Ron,
Interactive Media Manager,
AXEKS Labs, India
142 Miffy
January 7th, 2008 at 10:18 pm
This is really interesting,thank you for sharing this.I have bookmarked for my reference.
143 Arun Pattnaik http://www.amazingronit.com
January 15th, 2008 at 6:43 am
Would you like to share how to tweak the menu to get the effect similar to the one u used on this page? I tried but failed. Also, the comment preview thing is very interesting. (In fact, i’m writing this comment looking at the preview itself, lol)!
Ron,
Interactive Media Manager,
AXEKS Labs, India
144 filipezone http://filipezone.com
January 15th, 2008 at 7:06 am
I’ll try to do it .. It’s looks great … But I read it and I have some daughts .. Let’s see what I can do!
Thanks for the tutorial!
145 Gary Storm http://www.sellaband.com/mandyleigh/
January 16th, 2008 at 11:01 pm
Great tutorial! So glad I`m one of your subscribers
Could you please share the javascript fix for the IE6 span problem?
146 Dhruva Sagar http://www.dhruvasagar.com/blog/
January 18th, 2008 at 5:46 am
Simply awesome. Thanks a ton for this man, I love it!
147 5ivedance http://www.5ivedance.com
January 18th, 2008 at 10:45 am
Enjoy your tutorials,your website and so many amazing works.
148 Jon http://www.dinnermint.org/
January 21st, 2008 at 12:37 pm
Great tutorial! I implemented it on my site. http://www.dinnermint.org/ Thanks!
149 Dennis http://www.talentado.weebly.com
January 25th, 2008 at 2:11 am
Nice work. keep it up guys.
150 massives http://massives.blogsome.com
January 27th, 2008 at 9:55 am
whew, cool tutorial, i must try it.. thanx
151 Emprenye http://www.emprenye-basinclikaplar.com
January 29th, 2008 at 6:45 am
This is really interesting,thank you for sharing this.I have bookmarked for my reference.
152 Prasanth http://prasanth.opdyne.com
January 29th, 2008 at 3:18 pm
Wow this is cool. Nice work dudes at Designer Wall. Hats off to you.
153 music http://mp3bulet.com
January 30th, 2008 at 4:07 am
What do you mean ?
154 Foxinni - Wordpress Designer http://www.foxinni.com
January 30th, 2008 at 12:06 pm
Nice. I love to make use of matrix’s. I’m gonna make good use of it in my next design. Can’t Wait. Excellent blog design and awesome post.
155 Evan
January 30th, 2008 at 6:13 pm
This is a great tutorial -I showed it to a few people. I have a question though
If I place my Navbar and links into on div I can get them to display horizontally with no problem.
Instead of HTML links for my navbar I am having it display layers for the content.
This is OK but one problem I have is it doesn’t like
so, I use and assign hover properties in the css but it won’t display horizontally -any ideas?
156 egzemplarz http://egzemplarz.jogger.pl
January 31st, 2008 at 3:28 pm
What can i say? Great job!
157 Cloud9 Design http://www.cloud9designonline.com
January 31st, 2008 at 5:56 pm
wonderful tutorial. one thing though. you shoudl reallya dd a print this page button on your posts. formatting when haywire when i cut & pasted this into word so i could print it out.
158 Nicolas Alexander http://goodmorningstranger.com/blog
February 4th, 2008 at 3:20 am
very thorough ! just a thing…you should name your photoshop layers in your tutorials
159 Niklas
February 7th, 2008 at 10:59 am
Awesome tutorial, I like it very much!
You are doing a great job.
160 mark http://www.friendster.com/myparis
February 8th, 2008 at 12:38 pm
hey, i was searching in the net for some paper tutorials in photoshop for my online library system project in school, and then i get here in yout site, and i was shock that css can do that menu animations! how nice! i treat persons like you as a GOD!!! haha… i want to be a great web designer someday.
great tutorials, pls keep this tutorials for future researchers, tnx again!
161 Milinda Lakmal http://inf-dimensions.blogspot.com
February 8th, 2008 at 11:14 pm
Nice tutorial. Thanks.
162 Ali malik
February 13th, 2008 at 9:29 pm
ummm wouldn’t be easier if we used rollover on DW or in FW -no coding needed-
and much shorter
163 John
February 15th, 2008 at 10:32 am
I just love it! Also your watercolor tut is great. Your references with brushes etc are AWESOME. Great job. Thanks for sharing…
J. M.
164 kimmi
February 18th, 2008 at 9:48 am
Just one point, image load. Your images are quite small here but I still noticed onload that on mouse over there was a delay to the image load. Perhaps add some js to pre-load images to the browser cache. Examples of which can be found here http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/ .
165 Braintrove.com http://www.braintrove.com
February 21st, 2008 at 2:36 pm
Great job! Thanks for sharing this.
166 simone http://www.randomthought.altervista.org/
February 22nd, 2008 at 4:16 am
it doesn’t work on IE6. why? it’s just an hover effect…
167 Technology News http://www.londoninfotech.net
February 22nd, 2008 at 8:30 am
thanks..really nice post.
168 Dan Loffler http://www.lofflerturner.com
February 22nd, 2008 at 8:49 am
Your website makes me horny baby. And you tutorials get me high. Thank you so much.
Dan
169 Joe http://www.jtaylormarketing.com
February 22nd, 2008 at 9:03 am
Very nice tutorial. I like the attention to detail and the very clear explanations of each step. There are lots of people out there learning CSS and Design via the web, and these types of posts are very beneficial! Kudos!
170 melania http://www.melaniabelotti.com.ar
February 22nd, 2008 at 10:12 am
I think it’s great what you’ve showed us. I’m already practising this one. Thanks >;)
171 Enderson http://endersoncastillo.blogspot.com
February 24th, 2008 at 4:52 pm
Great Menu and great tutorial… Thanks…
172 Sam Jennings http://www.samjennings.com
February 24th, 2008 at 5:51 pm
Thanks for sharing
173 web pixy http://www.3rdeye.co.uk/
February 29th, 2008 at 2:26 am
I absolutely love the appearance of this menu, thank you for sharing the source and everything:) I will definitely use that, its so cool!
174 Max http://abbb.ru
March 3rd, 2008 at 8:56 am
thanks for really good lesson!
175 Anton Shevchuk http://anton.shevchuk.name
March 3rd, 2008 at 10:49 am
Very nice article, I translate it to Russian, you can see it on this link
176 Dragolux http://www.tutorialwow.com/
March 4th, 2008 at 7:29 pm
Very nice tutorial! Thanks for all your dedication to writing tutorials, they are appreciated more than you know!
177 carrie
March 7th, 2008 at 1:47 pm
really great post. . . i used it on my website: http://www.strongwatermedia.com
I was wondering if there is a way to use the empty tag to also create
a:active and a:visited. I created new graphics with the 4 different stages in one graphic. Am I on the right track?
178 Sarah http://workinonit..
March 8th, 2008 at 4:31 pm
hey. Your awesome web designer. Love the tutorial but how this css menu in wordpress?
179 DAWN http://inprogress
March 10th, 2008 at 3:49 pm
Very nice one!!!
But in case of a scaled browser the nav-links don’t stay on the positions they should be…any idea to fix this..?
180 ngoc
March 13th, 2008 at 9:28 pm
i don’t understand, what is the top property with a negative value (-20) in #menu .home span????
181 petnos http://www.petnos.com
March 16th, 2008 at 5:12 pm
at the beginning it seems hard for an amateur(this is me) but after solving all of it, you can see exactly what you done well.
182 ngoc
March 17th, 2008 at 3:09 am
yes, i am beginning and trying because i have this question so i need answer.thanks
183 CSSBanter.com http://www.cssbanter.com
March 17th, 2008 at 5:43 am
wow this is absolutely gr8 tutorial. Thanx 4 sharing!
184 Jordan Burnett
March 21st, 2008 at 12:47 am
Great technique.
Question: When I change the class=”home” to id=”home” in the anchors, it doesn’t seem the have the same effect. I’m changing the CSS as I do the HTML, but it doesn’t seem to work.
Any ideas?
Jordan.
185 akkie
March 25th, 2008 at 1:15 am
thanks for really good lesson!
186 FayeC
April 6th, 2008 at 12:29 am
Great tutorial!
Are you planning on posting the IE JS fix in the future?
Looking forward to reading more of your tuts!
Thanks!
FayeC
187 delipot http://www.delipot.com/
April 8th, 2008 at 8:20 pm
Beautiful! Thanks!
188 sandeep
April 10th, 2008 at 1:09 am
gr8 tutorial. thanks 4 sharing…..
189 pablogt http://www.pablogt.com
April 15th, 2008 at 4:14 pm
Hi, thanks for this tutorial… I have being working at it all afternoon… and can’t figure it out how to make three stays down , over, seleected page… any tips…?
190 Martin http://aeonbeat.com
April 22nd, 2008 at 6:51 am
thank you, again
191 Anna
April 22nd, 2008 at 10:02 pm
Thank you for such a wonderful tutorial. I have been looking for a way to code this. Sweet !
192 DonSailieri
April 25th, 2008 at 9:52 am
Good stuff but unfourtunately it´s got some nasty bugs in IE6 =(
193 Real Estate Graphic Design and Marketing http://www.youplusbuild.com/
April 30th, 2008 at 12:54 pm
I’d also love the IE6 hover javascript fix. Otherwise I’ve applied your instructions with success at http://www.youplusbuild.com/
Thanks!
194 BMD-Media.com http://www.bmd-media.com
May 1st, 2008 at 1:20 am
WOW! This will definitely come in handy. Great Article
195 Nick
May 1st, 2008 at 3:53 pm
great script!!… but it dont work with ie6 the nav pushes down the images bottom..
196 smitholi http://www.smitholi.com/css-templates
May 3rd, 2008 at 6:24 pm
wow, I’ve been searching for this for about 30 min’s this seems to be the only place to find this tutorial. Awesome stuff, Thank you!
197 website design http://ooyes.net
May 5th, 2008 at 4:12 am
Really nice site, of course goes to my bookmark list.
U should buy a licensed photoshop copy, but if you want 2 download, search about “torrentz” and read about them
198 Dharam Mali http://malidharam@wetpaint.com
May 6th, 2008 at 7:15 am
Nice layout, Good Css, Nice design,
& Good work.
199 jacob http://j12media.com
May 7th, 2008 at 10:52 pm
what does it do in IE6? could they be fixed with a simple _hack?
200 Nick best http://www.bestbuyhdtv.net/
May 9th, 2008 at 12:32 pm
Thanks for tip. it so beautiful.
201 M Rageh http://www.codingpoint.co.uk
May 10th, 2008 at 11:37 am
What a wonderful tutorial. Thanks a lot.
202 Nicole http://www.bestbuy-hdtv.com/
May 11th, 2008 at 9:40 pm
Excellent Work!!
203 istioselida http://istioselida.gr/
May 12th, 2008 at 9:11 am
really nice tutorial!
204 Mike http://www.buycheaphdtvonline.com/
May 13th, 2008 at 5:21 am
Wow!! Nice menu.
I will use technic to improve my menu.
thanks.
205 php-web-developer http://www.php-web-developer.net
May 14th, 2008 at 8:33 am
Nice tutorial I think I might be using this in the future
206 Lucy http://www.dolfingz.com
May 15th, 2008 at 10:54 am
This tutorial was brilliant - thank you very much!
I used this to help me build the menu on the website I just created for myself, thus I have addess a link from my website to this one - if the link works that is! I’m only a novice!
207 esanjor http://www.arasta.com
May 16th, 2008 at 3:26 am
Thanks for the great trick
208 NoobTrying2Learn
May 16th, 2008 at 4:03 am
Nice website (bookmarked!) - fantastic tutorial! Detailed and throughout! Thanks a bunch! =)
209 afg89 http://wallpapers.zxq.net/
May 16th, 2008 at 4:18 pm
can i have the psd please ?
210 Jackie
May 17th, 2008 at 8:59 am
Thanks so much! I’m learning CSS and really appreciate the detailed info.
211 k1ko
May 18th, 2008 at 1:05 pm
Cool stuff! Bookmarked!
212 Mei http://mei.gwilym.net
May 19th, 2008 at 10:31 am
Excellent tutorial. Never knew the Copy Merged tool before - invaluable!
213 Jayme http://www.nestinstyle.wordpress.com
May 20th, 2008 at 4:26 pm
Can menu navigation be designed within the sites header image or should the navigation have its own table with in Dreamweaver CS3? In order to design menu navigation with CSS, should I make a separate table for the header image and menu navigation?
214 Michelle http://www.michelleglaman.com
May 20th, 2008 at 11:11 pm
I just discovered your site and totally fell in love with it. I definitely refer to your site often. Check out my website, but it is in the works of being remodeled.
215 Rikkiya http://empire-of-movies.de
May 26th, 2008 at 4:08 am
thanks, nice work
216 Blogger-Holic http://blogger-holic.blogspot.com/
June 1st, 2008 at 7:34 am
cool css menu.
wow you have very nice template
217 plakali esanjor http://www.arastadt.com
June 2nd, 2008 at 4:12 am
Very good for me thanks
218 araba ilanı http://www.ucretsizilan.net
June 3rd, 2008 at 6:56 pm
cool css menu.
thank you man.
219 raj
June 4th, 2008 at 10:28 am
great code..
only problem is in IE, I get a horizontal gap between the navigation and the next div tag . work fine on FF.. The gaps gets bigger the more li items I use.. Tried zeroing paddings and margins but this doesn’t help.
Any ideas anyone ?
220 sinisa http://www.apin.hr
June 4th, 2008 at 6:06 pm
very nice. i will give it a try.
221 apin http://www.apin.hr
June 4th, 2008 at 6:07 pm
nice one.
222 sarah.g
June 6th, 2008 at 4:32 am
cool stuff..thanks for sharing!
223 pedro http://empower-sport.com
June 8th, 2008 at 9:22 am
excellent tutorial, stands head and shoulders above anything else I have seen. Tells me exactly what I want to know as clear as crystal.
This is an excellent web site, I love the design, hats off to you, inspirational… that’s from one who has been building sites since netscape 1
224 calmhuang http://www.tomjerry.cn
June 11th, 2008 at 10:20 pm
very cool,I favorite it
225 Giuseppe http://www.tmdesigner.it
June 14th, 2008 at 6:29 am
Good Work. original!
226 mTanriverdi http://mtanriverdi.com
June 16th, 2008 at 7:24 am
Very good
227 Ryan http://www.diggfish.com/
June 18th, 2008 at 7:16 am
awesome, thanks, this blog’s design is just amazing, just starting to browse other tutorials.. thanks
228 jon
June 24th, 2008 at 1:51 pm
Isn’t it great when ye find a good website, its like finding money in an old pair of jeans!! Quality tuts!!! Unfortunately im struggling with the IE bug. The thing is ive been teaching my self CSS over the last few days. So when you say put in a bit of javascript ….you kinda lost me! eh? anyhelp
229 kok hong http://www.kokhong.com
June 27th, 2008 at 11:31 pm
Great tips, thanks for sharing = )
230 ozz
June 29th, 2008 at 11:13 pm
Thanks for all tutorials
231 John Prine http://mp3mountain.com/mountain_genres/mountain_mp3_mountain_a_genre332/mountain_rock/
June 30th, 2008 at 5:29 am
Nice article! I shall try to use on the blog
John Prine
232 CSS Lover http://www.programming-web.com
July 3rd, 2008 at 4:43 am
Great article on css. It is great from customization point of view
233 grafik tasarim http://photoshop-dersi.blogspot.com
July 15th, 2008 at 8:13 am
css layer examples / properties and layer attributes
css-lessons.ucoz.com/css-layer-properties.htm
234 Chanty
July 15th, 2008 at 10:54 am
There is a way to get rid of the space below the menu in IE6:
Create a new .css file, I named mine ie6fixes.css. Then, copy & paste this in it:
#menu {overflow: hidden;
}
Save and close. Then, open your layout file/header file, and place this between the head tags:
#!--[if lt IE 7.]##link href="ie6fixes.css" rel="stylesheet" type="text/css" media="screen" /#
#![endif]--#
# and # should obviously be , and if you named your css file differently, ie6fixes.css should be renamed ofcourse. This code will only apply to IE browsers older than IE7. I’m not sure this is the right way to fix this issue, but it’s a quick and simple fix so it shouldn’t be a problem
235 People Search Dude http://www.spokeo.com
July 17th, 2008 at 6:39 pm
Nice article! I shall try to use it on the site I’m doing for my friend.
236 Teknoloji http://www.teknohell.com
July 20th, 2008 at 1:20 pm
Thakns you. and very good.
237 Dokz05
July 23rd, 2008 at 10:13 pm
could you please specify what particular javascript is it to fix the hover effect on IE6? Thanks… Good Job! I love it!
238 alexus
July 24th, 2008 at 8:56 am
oh….
100% good job!
thanks!
239 saç dökülmesi http://saclariniz.blogcu.com
July 27th, 2008 at 12:17 am
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
240 Jack
July 30th, 2008 at 4:30 pm
Great tutorial, I’m a complete css novice but this was easy to follow and tweak to suit my needs. A quick question: should the -900% text ident interfere with positioning the menu on the page? I seem to have to rely on absolute positioning coordinates, for example to center the menu next to an image at the top of my page.
Thanks!
241 Bill
July 30th, 2008 at 11:21 pm
It seems like I’m having issues every time that my images swap from a non hover to a hover mode, they shift just slightly and it ruins the effect. I think it could be a photoshop error. Anyone got any ideas?
242 Harish http://www.dreamsmedia.in
July 31st, 2008 at 11:55 am
I appreciate this tutorial, but wanted to know about how the messages are display on the menu in this website
243 Panther http://www.panthersweat.com
August 9th, 2008 at 9:16 pm
Excellent tutorial. I’ve tried to follow a similar tutorial but had no luck completing it. This one’s even easier to understand. Kudos.
244 Carolyn
August 10th, 2008 at 9:01 pm
Does anyone know how to have an active page “on state” show up rather than always coming up as the inactive state and losing where you are in a website
?????? please help!
245 Dinu / Switzerland
August 13th, 2008 at 2:25 am
Nice :-), can you tell me which font you have used ? It’s a cool font.
246 m0Fo
August 13th, 2008 at 9:18 am
What`s the font used in the RSS
247 laidey
August 16th, 2008 at 1:39 pm
i tried to follow every single code u made, it displays vertical menu. Can somebody tell me how to change it to horizontal menu”?
248 murtaza http://www.netkeyif.com
August 17th, 2008 at 5:05 am
Great tutorial, I’m a complete css novice but this was easy to follow and tweak to suit my needs. A quick question: should the -900% text ident interfere with positioning the menu on the page? I seem to have to rely on absolute positioning coordinates, for example to center the menu next to an image at the top of my page.
Thanks!
249 Maqsood http://joomlahbs.com
August 21st, 2008 at 8:12 am
Its a great css. Great Job
250 Nehem http://leveltensolutions.com
August 21st, 2008 at 8:13 am
Its really cool
251 alex
August 21st, 2008 at 8:19 am
Grate help
252 Henzen http://www.hen-zen.de
August 21st, 2008 at 10:53 am
very cool, i’m just redesigning my own site, and will use this..very cool thx
253 CSS Model http://www.cssmodel.com
August 23rd, 2008 at 4:19 am
This is really a very good technique. Thanks!!!
254 B
August 27th, 2008 at 9:14 pm
Doesn’t work on IE6
255 ant
August 28th, 2008 at 11:54 am
To B: isntead of complaining upgrade your browser !
256 anizot http://www.triumphvillage.com
August 30th, 2008 at 2:05 pm
very cool indeed. must try. thanks
257 Phyu Mon
September 5th, 2008 at 8:31 am
Wow! That’s an amazing tutorial. Thanks.
258 gaijun http://www.ccliving.cn
September 8th, 2008 at 2:19 am
study
259 CP
September 10th, 2008 at 1:41 am
Nice technique, i would like to use this technique, but need the js fix.
@author - Maybe you could post the javascript fix?
@ant - poor comment, 25% of webusers i 2008 use IE6.
260 mbrewer
September 11th, 2008 at 9:00 am
I also would like to see the js for handling the ie6 bug. I’m more of the designer and not so much the developer, so I’m sure I couldn’t write this myself. Can someone help…author or otherwise.
Thanks…
261 prosenjit
September 12th, 2008 at 4:41 am
thanks for this Gide line
262 Danh ba web 2.0 http://www.danhbaweb20.com/
September 19th, 2008 at 8:32 am
Great tutorial ! Nice to meet you.
Good blog Design for me
263 Imran Salahuddin
September 21st, 2008 at 5:07 am
great tutorial man.. thanks for yout help
264 Morten http://www.m-nn.net
September 25th, 2008 at 2:02 am
helo
Really nice tutorial, I simply love you’re site.
Regarding this css menu, how can I use the a:active on it? is it possible? anyone? :S
265 webdesign http://www.microdesign.nl/
September 25th, 2008 at 4:47 am
Nice tutorial!
266 nimkintz
September 28th, 2008 at 5:57 pm
I just wrote all this out. Not sure if I understand it all yet but yeah, way cool. Man have I got a lot to learn. Thanks.
267 SAM
October 2nd, 2008 at 2:26 pm
This is a very elegent effect, but it falls flat without the MIE6 java fix. Anybody have any ideas as to where I can get this javascript fix?…Author perhaps??
268 Jacob
October 4th, 2008 at 10:51 am
Hey i like your style.
I use a similar technique but i don’t have any IE6 problems. What i do is put the nav word (Home/About/Span etc..) in the span tag and set display to none. Then to get the hit value for the link i just set the tag to width: 100%; height: 100%; display: block;
So then the fills up the tag and by setting display to block the whole cell becomes a hit area.
After that it’s just a simple task of moving the background image on :hover
I hope that makes sense
Jake
269 Jacob
October 4th, 2008 at 10:57 am
Sorry better post this twice because the html items didn’t show.
Hey i like your style.
I use a similar technique but i don’t have any IE6 problems. What i do is put the nav word (Home/About/Span etc..) in the span tag and set display to none. Then to get the hit value for the link i just set the <a> to width: 100%; height: 100%; display: block;
So then the <a> fills up the<li> tag and by setting display to block the whole cell becomes a hit area.
After that it’s just a simple task of moving the background image on :hover
I hope that makes sense
Jake
270 SAM
October 4th, 2008 at 4:47 pm
Jake: so you are saying that these effects display as they should in MIE6 without resorting to hacks or javascript ?
So if hacks and javascript can be avoided by pure CSS then that would be fantastic. Would it be too much to ask of you to do a cut/paste of the actual CSS by way of example so I (and possibly others) can follow along ?
If so, that’s great but being a newbie to both XHTML and CSS I’m tying to get my head around it all. I have done a search for the java script but most all tutorials assume guru status to begin with and so do not cater for newbies. And it seems that people are reluctant to give examples of the javascript on this blog. I am starting to believe that the javascript required to make these effects function correctly in MIE is some closely held secret
Any assistance would be most welcome.
Sam.
271 Animals World http://www.animals-blog.com/
October 5th, 2008 at 10:45 am
thanks for this
272 World of Flowers http://www.flowersall.net/
October 5th, 2008 at 10:46 am
Good blog Design
273 Jacob
October 6th, 2008 at 8:39 am
Hey Sam
I haven’t got IE6 running on my comps at home but i’m pretty sure the code works fine in it. If you check the navigation on some quick site i made a while ago and let me now if it works then i’ll put the code up or you can take it through firebug or something.
The site is: http://www.kathrynmarylee.com
If the navigation works in IE6 then that is done using a similar technique to the one in this tutorial but works in IE6 without javascript.
274 SAM
October 6th, 2008 at 2:01 pm
Jacob,
Thanks a heap.
I tried the site and it works in MIE 5.5, 7 and beta8 but 6 makes a mess of it.
Back to the drawing board I guess
275 Jacob
October 7th, 2008 at 4:23 am
Hey Sam
Are you sure about that? I just checked the site on a comp with IE6 on and it worked fine… hmm weird! Are you checking it in that IE tester or an actual version of IE6?
Cheers Jake
276 Simon http://www.swelldesigns.co.uk
October 7th, 2008 at 4:38 am
Just like to say, what a well written tutorial! Well done.
So good in fact, I’ve just subscribed to your RSS.
277 SAM
October 10th, 2008 at 3:38 pm
Jake,
I have been doing the testing using “IETester” (http://www.my-debugbar.com/wiki/IETester/HomePage) I will test in MIE6 next week via a friend, but you say that it is OK in MIE6 ! ….now that’s good news. I will experiment and get back to you…..BTW….your input is appreciated
278 kat http://strawberry-fields.fr
October 12th, 2008 at 1:29 pm
I used this CSS tutorial to create my new navigation bar in my new layout, thanks, this really helped! ^^
279 Designer http://www.redesignyourbiz.com
October 20th, 2008 at 10:17 am
WOW…… thanks
280 dfs design www http://www.tanieprojektowanie.com
October 22nd, 2008 at 4:06 pm
how ever, also you can make one image ex. for rss, and using background-position.
CSS:
a.rss {background:url(’rss.gif’) 0 0 no-repeat; display:block;width:30px;height:30px}
a:hover.rss {background:url(’rss.gif’) 0 -15px no-repeat; display:block;width:30px;height:30px}
HTML:
(remove the spacing)
with this U economically using the transfer, and images doesnt ‘jump’ on hover.
281 SAM
October 25th, 2008 at 3:12 am
Jake,
Thanks. Yes!….works OK in MIE6. The “tester” must be a bit buggy. I’ll study the code and use. Thanks a lot.
282 jono
October 25th, 2008 at 3:46 pm
can this only be used for the three navigation menus? I mean can i add more links, like contact, films etc?
283 Jacob
October 26th, 2008 at 7:03 am
Hey Sam
No worries. If you have trouble working out how i did it drop me an email and i’ll send you the code or somthing:
jake {at} routeb.com
Sorry had to write it like that cos of spiders.
Jake
284 RT http://ronantully.com
October 30th, 2008 at 7:14 am
This is great,
Any idea how it could be implemented for wordpress & K2? can’t seem to work out how to get separate tags for each navigation link.
thanks
285 Piotr http://www.lodzianin.eu
November 4th, 2008 at 5:23 pm
great tutorial
reegarding from Łódź
286 projektowanie stron łódź http://www.positivebusiness.eu
November 4th, 2008 at 5:24 pm
great
287 MQ Hidayat http://desain.toserblog.net
November 4th, 2008 at 5:44 pm
A nice tutorial.
I’m ready to try.
Thks
288 Icon http://erik-son.net/
November 4th, 2008 at 7:46 pm
Great tutorial. Should be implemented soon to my site.
Thanks.
289 webtechnepal http://www.webtechnepal.com/
November 6th, 2008 at 4:26 am
Thank you so much for the great tutorial.
290 web design nepal http://www.meroblog.net
November 16th, 2008 at 12:12 am
Its good tutorial. thank you for such …….
291 Andy
November 25th, 2008 at 6:19 pm
I tried making a larger menu with this technique but once i add more than three buttons, they automatically skip to the bottom-left of the menu in plain text
292 Markus http://www.visiongraphix.de
December 4th, 2008 at 3:23 pm
I think it would be better not to use the span element. I always try to avoid additional markup for design purposes only. I reccomend using a single image file containing all the relevant information.
293 Carlos Hermoso http://carloshermoso.com/
December 18th, 2008 at 8:39 am
You might want to visit my site to find out how I use my advanced CSS menu:
http://carloshermoso.com/
294 GagiaveBiarve
December 26th, 2008 at 3:25 pm
cvnjakglhapehwmswell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
295 josh
December 30th, 2008 at 1:57 pm
Great tutorial! thanks!
296 奋斗 http://www.fendou163.cn
January 3rd, 2009 at 2:27 am
不错 我用了 http://www.fendou163.cn
297 btpig http://www.djpig.com
January 5th, 2009 at 3:22 am
thanks~~ nice~~
298 arvee
January 7th, 2009 at 12:09 pm
i finally got it! thanx!
299 monze
January 12th, 2009 at 5:30 pm
it`s good tutorial.!! thanks for you help.!
thanks for sharing your knowledge
thanks. =)
300 ganesh
January 13th, 2009 at 7:45 am
Good
301 Ganesh Badgujar
January 13th, 2009 at 7:47 am
very nice
302 Nico
January 16th, 2009 at 4:54 am
Really nice menu, it helped me with mine xD
Keep up the good work
303 Steve Tchorzewski http://www.plattdaddy.com
January 22nd, 2009 at 5:48 pm
I have been using this simple sliding menu solution on my sites for a while now. It’s really a great solution. But I also like the son of sucker fish menus, I use have used them on my portfolio website, and a bunch of others.
304 Rudy http://reyescreative.com
January 29th, 2009 at 7:23 am
Awesome tutorial! Thanks for sharing.
305 grennouno http://www.albertobonetti.it
February 4th, 2009 at 6:04 am
tks for sharing it
306 Nate
February 6th, 2009 at 11:10 am
Thanks, man keep ‘em coming.
307 izmir web tasarım http://www.creative.biz.tr
February 7th, 2009 at 1:37 pm
greate menu thanks
good post
308 Joshua Rapp http://www.rappsodystudios.co.cc
February 8th, 2009 at 5:57 pm
I’m using the Avanced CSS Menu method for the nav-menu on my site. I got the images to finally show up the only problem is that the menu itself is shifting to the left. I’ve racked my brain over a solution. and cannot figure it out. I’m sure it’s something very simple. I am using a tabled design:
Home
Portfolio
Contact Us
.
Is there something fundamentaly flawed with the design?
309 ilithya
February 9th, 2009 at 6:12 pm
sweet!!
thanks a bunch for this tutorial, really helpful!!
everything worked out perfectly, but I wanted to also add the same effect as when in hover, to when the user is reading a page, thus I tried the following code:
}
#menu a:active {
background-position: left bottom;
}
and also tried this:
}
#menu a:hover, #menu a:active {
background-position: left bottom;
}
and it didn’t work
— still once I’ve clicked on a page, it goes back to the regular button, without staying in the effect.
ANY SUGGESTIONS ANYONE??? something I might have missed?
310 Sudeep Tamrakar http://www.sudeep.net.np
February 12th, 2009 at 5:53 am
Thanks for the useful menu sample.
311 sivas http://www.sivascity.com
February 14th, 2009 at 3:57 pm
very good, thanks
312 Mana
February 17th, 2009 at 2:51 pm
It works! thank you!
313 Lasitha Silva http://www.lasithasilva.wordpress.com
February 20th, 2009 at 1:00 am
I was looking for ideas where I found this masterpiece full of ideas for my new student website. Ideal for students and new web developer to bloom their potential. Keep it up and share.
314 Liam
February 23rd, 2009 at 5:24 am
Are you gay my fiend liam dixon thinks that your mums fanny smells like the sawers.
315 Lynette
February 25th, 2009 at 7:45 am
It worked perfectly! I’m just a little concerned about the IE6 bug. I can’t seem to find the javascript fix anywhere and I’m pretty clueless when it comes to that. Any help would be much appreciated. If someone could point me in the right direction (or provide me with the code) I’d be very appreciative! Thanks in advance for your kindness!
barterboutique(at)gmail(dot)com
316 James Mann http://www.crearedesign.co.uk/
February 27th, 2009 at 3:50 am
Hey guys, looking at this nav menu you have going on here, and also looking at the code, my general impression was that ‘wouldnt it have been far more easier to have build that nav in flash so the circles around the tabs animates around’. Then you could have linked up each tab to its respective page. Im not sure what Google’s situation is at the moment about reading swf files for key words, but you can type in a description of the tabs so it may be read and optimised by Google. Also, if you are not happy with that, you can add the nav to the sitemap in the footer of your site and get Google to read it that way, that way you have not compromised on the search engine optimisation of your web site.
Just a thought.
Regards,
James
317 Carlos A.
March 3rd, 2009 at 10:30 am
Great Tutorial!!! Thanks. I do have one question. After saving my css to my site folder, my images linked to my css did not display onto other html files. Shouldn’t each page with the linked CSS display my nav setup properly?
318 ＨＵＢＥＹＯＮＤ http://NONE
March 4th, 2009 at 3:07 am
厉害啊，我想请教一下，怎么引用外部定义
319 Luciana Morin http://starguides.com.br/blog
March 4th, 2009 at 3:57 pm
thank you so much for the tutorial!
i’m using the menu here: http://starguides.com.br
and i credit it, don’t worry
your site is AMAZING, REALLY, THE PRETTIEST I HAD EVER SEEN!
320 ortak miras http://www.tarihonline.com
March 5th, 2009 at 4:51 am
Thank you. Great…
321 Ranga
March 6th, 2009 at 8:08 am
i want know more
322 Fahad Ahmed http://blog.fahdi.net
March 6th, 2009 at 4:34 pm
Can you tell me what the font you are using for this. I really like this font.
Regards,
Fahad Ahmed / Fahdi
323 phoebe
March 9th, 2009 at 3:11 am
Wow, it’s so wonderful! Thank you!
324 Soraa http://higure-ni.com/touch
March 9th, 2009 at 7:57 am
Thanks for the tutorial! I´ll try it in my next layout! =)
325 shawn
March 15th, 2009 at 11:39 pm
stumbled across your site. Glanced through this tutorial. Jaw dropped. Hit floor. Great work! Love the creative way you are doing things. I have bookmarked and shall return. Thanks for inspiring us!!
326 myang
March 18th, 2009 at 1:47 am
thank you,it’s very useful
327 Selcuq http://www.sinnek.net
March 18th, 2009 at 12:01 pm
Great tutorial.
Selected method used?
328 alberjito (:
March 18th, 2009 at 6:32 pm
i’m from perú, this tutorial is cool, and so better is your site, i’d like to do things like this in the future, i’m only a programmer, but i’ll learn anyways ^^
You’re great (:
329 sandy
March 23rd, 2009 at 7:15 am
Awsome Dude…
330 Martin Miranda http://www.alphadigital.cl
March 23rd, 2009 at 8:27 am
Great!
thanks for this CSS Sprites tip
331 YNa https://www.kerlipbintang.com
March 24th, 2009 at 4:12 am
really helpful and thanks for the sharing
332 Retroshift
March 26th, 2009 at 1:54 pm
Don’t understand the coding (block,menu span, lists,…), I think I’m gonna do it in actionscript..
333 dj
April 1st, 2009 at 11:07 pm
Good job man !!!
Creative and simple !!
dj.
334 paul http://www.paulher.com
April 2nd, 2009 at 12:01 pm
nice tut man … very useful!
335 burak
April 7th, 2009 at 4:12 pm
thanks mate. you are legend. I looked all over the net for an example like this and finally - this is so easy as well as creative and free! great job. thanks a lot from Istanbul!
336 vale
April 10th, 2009 at 10:31 am
hi! I write from italy and my English is not good …your tutorials are the best, I am learning by reading these. I’m building a WordPress theme, and now I read this post but I have a problem. I installed WordPress Locally. In preview (by dreamweaver) my page is perfect, but if I move the mouse over the text the span effect display in another part, not on the text. after clicking with the mouse the effect is perfect…why?
337 vale
April 12th, 2009 at 12:25 pm
sorry…I solved the problem of the previous post!
effect in the WordPress Locally preview is ok…but I still have not found the right code for the menu, I tried with but the effect does not appear…can you help me?
338 Steve
April 16th, 2009 at 8:56 pm
Why do you need the span?
I’ve only glanced at the code but it looks unnecessarily complex and the spans seem useless. You can use a:hover to get the effect and the extra images are useless too. You could just create a single image for the entire menu and clip it with css. Okay so you the the little text as a separate image why? you can just put it on the hover image. All seems stupidly complex and wasteful
339 Gareth
April 19th, 2009 at 2:50 pm
Thanks very much for this. I’m just beginning to get to grips with CSS as layout and this has been invaluable for my latest project. Kudos to you.
340 Suchmaschinenoptimierung http://www.suchmaschinen-optimierung-nord.de
April 19th, 2009 at 3:55 pm
It’s a very nice tutorial- very useful Thanx!
341 Dramaplot http://www.dramaplot.com
April 22nd, 2009 at 4:15 am
thank you!, thank you, thank you! just like the one i’ve looking for.
342 CgBaran Tuts http://tuts.cgbaran.com
April 25th, 2009 at 12:15 pm
Nice tutorial thanks
343 Marsha
April 30th, 2009 at 6:42 am
I tried using this in a vertical arrangement (as opposed to your horizontal). It works flawlessly in Firefox, but in IE when you mouse-over a link, the links below it all jump (or shift upward) slightly. The link on the very bottom of the vertical column of links is fine because there is nothing under it to “jump”
Is there a way to prevent this from happening in IE?
Thanks for your help and thanks for the wonderful tutorial you have provided.
344 alex
April 30th, 2009 at 6:57 pm
very nice site.. ilike so much
345 Ze PWNAGE
May 12th, 2009 at 5:37 pm
Dudez KICK butt job nice. Lik the site for the lines of the blue. I wet in italy.
346 lenno http://www.lhardware.nl/okuni
May 19th, 2009 at 6:28 am
man, this tutorial rocks!! only I have one problem
I did everyting what I should do, but when I open the site in IE the rolover doesn’t works! :’( in chrome firefox etc. it all works perfect, but not in IE!
can annyone please help me???
347 web design leeds http://www.nextgen-design.co.uk
May 20th, 2009 at 3:11 am
very nice tutorial! thanks alot, cheers.
348 flashfs http://souleaterwallpaper.co.cc
May 25th, 2009 at 3:06 pm
Thanks. I’d like to see more explanation about some things on CSS (like why display:block on span). But that’s fine.
349 gt
May 26th, 2009 at 1:47 pm
great tutorial!! Thanks
350 Tammy http://twillydesignz.com
May 29th, 2009 at 11:56 am
Thank you so much for this tut! I was able to customize and create a fantastic menu of my own.
351 WOW.
May 30th, 2009 at 12:50 am
This is such a great tutorial! Now I practically use it whenever I need to hover a picture. However, there’s one little thing: how would you CSS the active tag?
Thanks for any help.
352 Juice http://www.happyjuice.org
May 30th, 2009 at 5:12 am
Very beautiful style, I very like it,Whether you can share this the themes?
353 VIJAY
June 3rd, 2009 at 1:52 pm
This is AWESOME. I have been looking for this Tutorial for a very long time.
354 sdsd http://www.fdfd.com
June 4th, 2009 at 6:42 am
yb rt rt rtreterte trt tretrtertertertr
rtutrutyuu
gjugfhjfhf
355 siymat http://cyber-biology.blogspot.com
June 15th, 2009 at 8:36 am
thank….i really need it….
356 burlesque performer http://www.avamayhemme.co.uk
June 17th, 2009 at 5:25 am
Top Post!.. wonderful tips there.. love the whole site!
357 epc london http://www.homecert-direct.com
June 17th, 2009 at 5:30 am
this tutorial is perfect
358 Robin
June 17th, 2009 at 3:22 pm
Hello, great menu, I can’t get this to work
If anyone is intrested in helping me, please send me an email.
My problem is: I can only see the three links in Home About Rss
And then: #menu { list-style: none; padding: 0; margin: 0; width: 774px; height: 210px; background…
This is just a very small part of whats failed.
Please help me and tell what I am doing wrong.
359 Robin
June 17th, 2009 at 3:24 pm
btw my email is splasher@live.se
360 AdWords Optimierung http://www.web-netz.de/
June 18th, 2009 at 4:09 pm
This is AWESOME. I have been looking for this Tutorial for a very long time.
361 bryanregencia.com - freelance designer http://www.bryanregencia.com
June 22nd, 2009 at 9:54 pm
very useful for designers, thanks for sharing.
362 day
June 24th, 2009 at 11:59 am
thank you for this article! it really helped me in doing my project! hope you continue to post more techniques regarding css:) Godbless!
363 facundo
June 27th, 2009 at 5:34 pm
Thank you for this tutorial, awesome website.
364 Edy Pang
July 1st, 2009 at 9:08 am
Thanks, It’s really nice tut
365 jpkids
July 16th, 2009 at 3:20 pm
Hi, this is really a great menu!
A point I don’t understand at all, why empty would work? Please advise. Thanks!
366 Jeff
July 16th, 2009 at 8:21 pm
For some reason, I can only get this method to work for up to 4 links…anyone else having this issue?
367 Website Designer Katy TX http://www.digitalsqft.net
July 16th, 2009 at 11:40 pm
Thanks for this. I really like the idea. I believe it is important to see what other designers can come up with. Gets your design mind going. =D
368 anirudha http://www.astrobix.com
July 18th, 2009 at 11:19 pm
nice menu for web devlopment
369 Igo Medeiros
July 22nd, 2009 at 4:10 pm
Bonito menu que construiste.
Mas ele foi testado em quais tipos de navegadores ?
370 Igo Medeiros
July 22nd, 2009 at 4:12 pm
Só ajeitando o meu e-mail
enviei de novo ele
obrigado
371 exeo
July 22nd, 2009 at 5:46 pm
Hi, thank you, very well this menu!
372 HelenaG http://helenacg.blogspot.com/
July 25th, 2009 at 1:30 pm
Hey.
This tutorial is so great, eventhouh I don´t get all of it.
It is the photoshop-part I don´t get (Main background & Button graphics).
Is it possible for you to explain it a little bit more, if not here then, please, contact me??
373 rifqi
July 28th, 2009 at 8:29 am
nice trick !!!
thanks !
374 myrtille
July 30th, 2009 at 3:24 pm
many thanks for your menu! Loving it.
375 myrtille
August 3rd, 2009 at 3:43 pm
Okay, just a little question: is it possible with your menu to include a submenu and if so, how is that done? Hope that you can help me!
376 成都租车 http://www.chengduzuche.com
August 12th, 2009 at 1:57 am
Thanks for this. I really like the idea. I believe it is important to see what other designers can come up with. Gets your design mind going. =D
377 TeraJL
August 29th, 2009 at 1:21 pm
i can’t find the photoshop file inside the zip
378 alt
September 2nd, 2009 at 7:07 am
this is great. Thank you. Just a question. Is a drop down menu possible from this? how?
thanks man.
379 Aoobi http://fashionow.net
September 4th, 2009 at 9:40 pm
This make me think of my site navigator. I just forgot this method. Thanks
380 Jayadev G.
September 7th, 2009 at 5:25 am
Very good menu style…….
381 Simon
September 7th, 2009 at 7:20 pm
Great stuff works nicely. More tutorials like this please!
382 bagsin http://handbagsurf.com
September 10th, 2009 at 7:36 pm
nice trick !!!
thanks
383 zwd321081
September 10th, 2009 at 10:46 pm
so cool!!!!!!
384 Mahmend
September 13th, 2009 at 9:51 pm
Cool………..
385 t4-trix http://t4-trix.blogspot.com
September 20th, 2009 at 1:17 am
best of the navigation menus i have seen
386 Elver Lego
September 20th, 2009 at 8:55 pm
Nice post! It really help a lot… Keep it up! =D
387 Cyrus
September 21st, 2009 at 9:59 am
Great , Advanced CSS Menu
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
388 cla
September 26th, 2009 at 5:24 am
Why can’t I do Edit > Copy Merged (Cmd + Shift + C) with About Home etc??
389 Rishi http://creative.monazu.com
October 3rd, 2009 at 6:55 pm
Awesome tutorial, thanks!
390 Sharlene http://abstracity.net/
October 4th, 2009 at 4:26 pm
Hi, I used this tutorial to create my CSS rollover [minus the span], but it won’t work on wordpress…please help, anyone!! :((
391 Sharlene http://abstracity.net/
October 4th, 2009 at 4:52 pm
Nevermind. I was able to fix this, thank you so much
392 clippingimagesc http://www.clippingimages.com
October 7th, 2009 at 4:56 pm
Great tutorial, Well explained and nice finishing. Thanks for sharing this nice tutorial.
393 Luis Alejandro González Miranda http://www.lgm.cl/
October 9th, 2009 at 9:14 am
I don’t remember ever having visited a website with such a cute design. It’s so beautiful.
I’ve known this one since quite a while, but I have never had the time to exploit it. If anything, your tutorial and this site has given me motivation to putting my hands back to work.
394 Mars http://marslau.com
October 14th, 2009 at 1:24 am
so cool!
395 rizmraz http://rizblog.wordpress.com
October 18th, 2009 at 11:12 am
so great……………
I love css
396 shadowli http://www.shadowli.com/blog
October 20th, 2009 at 10:37 pm
cooool, learning, Thanks a lot!
397 swfit
October 26th, 2009 at 9:02 am
so cool! Learning···
Thanks~
398 deepchand
October 28th, 2009 at 12:22 pm
excellent tutorial…….bravo
399 Mike http://www.comastore.com
October 31st, 2009 at 4:26 am
Cute effect. I like it
400 walkities
November 2nd, 2009 at 1:44 pm
Still having problems with this in IE6, has anyone found a solution for it? Im not entirely sure where to find this javascript fix.
401 Emad Navy http://www.tiptopland.com
November 3rd, 2009 at 2:26 am
Like usual, WebDesignerWall provide the best and “right to the point” articles. Thnx.
402 Thisara De Silva http://www.hikkaduwanet.com
November 4th, 2009 at 6:19 am
hi there, its really creative…. i want to thanx who add this tutorial
see http://www.hikkaduwanet.com/surf
to see what i made
thanx again!
403 Dan http://www.lankaseo.com
November 9th, 2009 at 9:59 am
Really nice tutorial!!!
404 الامبراطور http://www.em4nt.net
November 11th, 2009 at 4:42 pm
يعطيكم العافية حتى لو مافهمتوا لغتي ..
اطيب تحية ..
405 Nancy http://www.cssmenusamples.com/
November 13th, 2009 at 6:54 am
Nice Article. Thanks!!
406 Zav http://blog.axlay.com
November 19th, 2009 at 7:02 pm
Love it! Thanks for sharing
407 haha
November 21st, 2009 at 7:08 am
very cool ,I like it .
thanks!!!
408 feihu http://www.asp188.cn
November 24th, 2009 at 1:14 am
This’s very good!
I like it
409 Demi
November 25th, 2009 at 9:27 pm
Cool idea! I like it,thanks for share.
410 Louis http://www.oryes.cn
November 27th, 2009 at 2:06 am
really very nice@@@
411 RustyDesign
December 2nd, 2009 at 6:28 am
Quite elaborated and informative tutorial.
But i must say that http://www.xhtmlmania.com has done a superb job for me. Since I did not have time to convert the design my self I outsourced it to them and what they delivered was just mind blowing. Great code quality and that too in just 8 hours.
I would recommend to try them at least once. You will be amazed with the code quality.
412 Werbeagentur Siegen http://www.ytdesign.de
December 2nd, 2009 at 7:40 am
I love it - thank you for sharing.
413 Werbeagentur Siegen http://www.ytdesign.de
December 2nd, 2009 at 7:41 am
Nice Article. Thanks for sharing.
414 Karen http://www.littledesigns.info
December 11th, 2009 at 10:23 am
Thanks a lot! Really useful technique that I can use in lots of other situations as well.
415 dennis
December 11th, 2009 at 6:07 pm
Has anyone got this to work in explorer 6?
The hover state and transparency doesn’t work…
416 Franco http://www.saveoninsurance.co.za/
December 14th, 2009 at 12:57 pm
Jeez, this stuff hurts my head! Will have to learn a lot to make my site look good. Thanks for sharing!
417 EFW http://easyfitnesswebsites.com
December 21st, 2009 at 5:27 pm
Wow I just found this when searching for some great wordpress design tips. Will be checking often, great info.
418 Arisu
January 4th, 2010 at 9:07 pm
Would it be alright to do this in Gimp 2.6 instead of Photoshop? Would I get the same result?
Thanks
Arisu
419 Jessica
January 4th, 2010 at 11:43 pm
Is there a way to convert this into a drop down menu? I used this tutorial to create a menu but a few of my items need dropdowns to go along and I cannot figure out how to make that work.
420 vincentdresses http://www.hibridal.com
January 5th, 2010 at 11:29 pm
The designs showed here show what simple and tasteful design is all about. Another one to consider
421 内衣 http://www.piaoya.net
January 12th, 2010 at 4:24 am
Nice Article. Thanks for sharing.Quite elaborated and informative tutorial.
But i must say that http://www.piaoya.net has done a superb job for me. Since I did not have time to convert the design my self I outsourced it to them and what they delivered was just mind blowing. Great code quality and that too in just 8 hours.
I would recommend to try them at least once. You will be amazed with the code quality.
422 Bindi http://bunty.me
January 12th, 2010 at 7:26 am
Very helpful one…thank you for sharing!
423 Avangelist http://www.avangelistdesign.com
January 13th, 2010 at 9:48 am
I just wondered why have the descriptions as a separate image and not part of the roll over state? if you reversed the order in which you position the graphics you could achieve the same thing?
424 vincent http://www.webvincent.com
January 17th, 2010 at 11:14 am
wow.. i like this
425 Asterius@hk
January 20th, 2010 at 3:01 am
it’s great!
426 turismo china http:www.vacacionchina.com
January 29th, 2010 at 1:37 am
Very helpful to me,thank you for sharing!
427 Tom Koel http://www.tomkoel.com
January 31st, 2010 at 7:36 pm
I used your advanced CSS menu for a footer as well. I’m a super novice. Seems to work great until I try to control the position of the header. If I make the header absolute (say at 1100), my footer pics wind up another 1100 px below. I don’t mind a relative footer, but I’ve got a self-made background that I must use and I can’t get it to trim up to the relative bottom of the page. Maybe that would be easier. Whatever you could offer for help would be great. Thanks.
428 liuyanbinll
February 17th, 2010 at 9:47 pm
beutiful,Thanks for your tutorial
429 seo ceylon http://seoceylonb.blogspot.com
February 20th, 2010 at 9:46 am
I like learn seo,and u like learn seo come my site ads learn more
430 john http://www.liliadayspa.com
February 22nd, 2010 at 2:46 pm
thanks for the tips. I trying to make my site with wordpress. thanks, john
431 mühendis http://www.ofismuhendis.com
March 3rd, 2010 at 2:45 pm
some sentences, but in general did not exactly turn a nice and helpful article. Thank you and good work.
432 NK http://www.nickkwast.com
March 5th, 2010 at 6:18 am
I have a major problem with the menu. It doesn’t show the menu at all ? who can help me out ?
http://www.nickkwast.com/stage
433 nike free 3.0 http://www.buytimberlandshop.com
March 10th, 2010 at 10:44 am
nike free 3.0 sale
434 Jose Diaz http://marina.comaid.net
March 10th, 2010 at 9:04 pm
I’m trying to use your tutorial and code as guide lines for my website but i can’t make it work properly, i would really apreciate it if you could help me out, i think i have most of the code right but then again you’re the teacher here so if you want i could even send you my css and html for you to check. please let me know and send me and email if you are willing to help me. THANKS
435 Muh
March 12th, 2010 at 9:23 am
Muh this is how i work test
436 muhendisturkiye http://muhendisturkiye.wordpress.com/
March 17th, 2010 at 2:19 pm
helpful article. Thank you and good work.
437 JC
March 24th, 2010 at 8:10 am
I wonder if anyone could tell me how to do that effect when you press the “View Demo Css Menu” the background fades out and the demo sits on top until it closes. Is it done only with CSS as well or is there some other language involved? If someone would tell me how this effect is called it would be very helpfull. I have seen this before and I think could be very good for a picture gallery I am thinking of building.
Thx
438 Chopper http://www.paul.chlopas.co.uk
March 24th, 2010 at 8:57 am
Jose Diaz, whats your email address? You can then send me your files to look at.
chopper
439 Chopper http://www.paul.chlopas.co.uk
March 24th, 2010 at 8:58 am
Attn: JC
It is done by using thickbox.js (javascript) with a subsequent class=”thickbox”
chopper
440 Rsq
March 27th, 2010 at 12:30 am
犀利
441 JC
April 9th, 2010 at 10:19 am
Thanks Chopper, I really appreciate it
JC
442 échantillon gratuit http://www.bonclic.com
April 13th, 2010 at 2:57 pm
thank’s
443 Garrad
April 14th, 2010 at 6:09 pm
I just want to say thanks for this tutorial. I have tried soo many different CSS scripts to get this mouseover menu effect to work for my Wordpress-ran Web site and none of them have worked thus far. Yours worked like a charm! Thanks so much!
444 Emilio Jéldrez http://www.soloparachicas.cl
April 17th, 2010 at 2:10 am
dude, you’re great!
really helpfull!
cheers from Chile!
445 Web Design Maidstone http://www.squiders.com
April 19th, 2010 at 7:04 pm
Cool menu!
446 Ashok dausa http://www.deramandawa.com
April 21st, 2010 at 6:01 am
I wonder if anyone could tell me how to do that effect when you press the “View Demo Css Menu” the background fades out and the demo sits on top until it closes. Is it done only with CSS as well or is there some other language involved?It is done by using thickbox.js (javascript) with a subsequent class=”thickbox”
447 xHTML CSS Web Design Course by Learnpact http://www.learnpact.com
April 22nd, 2010 at 9:46 am
Css menu design never so fun! i loved it
448 Master
April 27th, 2010 at 3:43 am
thanks for this tutorial.
See below link for more professional top page rank tutorials(HTML/CSS, Jquery, Photoshop,Flash,PHP etc)
http://www.tutorials99.com
449 Web Design http://exmmedia.com
April 28th, 2010 at 8:31 pm
very helpful.thanks bro!!!
450 Brandy
May 1st, 2010 at 6:42 am
How do you get this to work on the Blogger (google) platform? Where do you put the code? I tried copying and pasting all the code you posted in the widges (html) section, and when I tried it out, all I saw was the html code on my blog.
Can you tell me exactly where to put all of this html code? I would love to use this, but as of right now, I have no idea how! Please help.
451 toti http://n/a
May 1st, 2010 at 9:35 am
hi this is great tutorial, do you also have a tutorial how to implement this to wordpress with active state?
452 sue
May 3rd, 2010 at 11:29 pm
awesome!!!!!!!!! ^0^
453 ngassmann http://twitter.com/ngassmann
May 11th, 2010 at 2:38 pm
Why wouldn’t you just create a navigation sprite and move everything with background positioning? This seems like a lot of work for a simple navigation.
454 FaiK http://www.faikshare.com/
May 25th, 2010 at 12:49 pm
awasome…
this is great for me,….
455 Tim
May 29th, 2010 at 7:24 pm
Hi there. You mentioned I can use Javascript to fix the IE bug. Can anyone tell me how I would go about that?
456 CHECKA
June 13th, 2010 at 7:51 pm
HAHAHA DSL 16.000 3sec LADEZEIT fürs
background-image: #haha url(”wie-geil-oder.net”) no-repeat;
alterschwede stellt euch mal vor das müssten png’s sein weil die quali von gif’s nicht klar geht ;D
In diesem sinne “VERBIETET Modem/ISDN und Bauern-DSL”
457 Mark http://www.flinth-design.nl
June 14th, 2010 at 5:17 pm
I have copied the css code in my website.
Then I copied the code into my website.
Nothing happens when I look, I seen you’re background but not the buttons. What happened?
458 php programming http://www.phptechie.com/
June 19th, 2010 at 5:46 am
hi this is great tutorial.great work
459 Andreas Lüneburg http://www.webdesign-luene.de
June 23rd, 2010 at 2:13 am
nice post and very interessting informations
460 carrie s http://workingonit!
June 25th, 2010 at 12:32 am
great tutorial … It’s always good to know how and why something works instead of just copying codes. thank you!
461 John D. http://pacs-css.blogspot.com/
June 25th, 2010 at 9:25 pm
I used this tutorial at my user group to demonstrate the elements of navigation styling. Thanks for an interesting approach. The meeting went very well.
462 Lthm
June 28th, 2010 at 4:45 am
nice one! thx for the tutorial!
463 Vinaykumar
July 8th, 2010 at 12:41 pm
Nice tuorial. Thanks for posting.
464 li
July 9th, 2010 at 8:58 am
thank you ,
I download you program.
465 vanni linux http://www.vannilinux.com
July 10th, 2010 at 4:46 am
Thanks for sharing this .. i book marked it .. keep it up.
TR
466 seolki
July 16th, 2010 at 11:55 am
Hi, i like your tutorial. But i have problem doing it. Because it look complicated. I am using Sharepoint designer 2007, and i am not sure how do i apply…Can anyone help? ^^
467 SEO Sri lanka http://myesolution.com/search_engine_optimization_sri_lanka.php
July 21st, 2010 at 2:40 am
Love it! Thanks for sharing
468 Kanyakumari Budget Accommodation http://www.sangamgrouphotels.com
July 22nd, 2010 at 12:45 am
Thanks for sharing………………….It is useful tutorial. Can you provide tutorial for develop a testing tool in Php? I am waiting for your reply.
Thanks in advance!!!!!!!!!!!!!!!
469 Cheap Hotels Kanyakumari http://www.sangamgrouphotels.com
July 22nd, 2010 at 2:16 am
Its very useful tutorial and i download this link.
470 cho http://melyanao06.student.ipb.ac.id
July 23rd, 2010 at 9:22 am
great article. Thanks for sharing.
471 Amy http://amyopoly.com
July 23rd, 2010 at 11:33 am
Thank you so much for this tutorial. I’ve spruced up my site with a slightly more complicated version than the example on my site. Thanks so much for your help! I love this site.
472 星星魔术博客 http://magic.uucuo.com
July 24th, 2010 at 9:02 pm
very good tutrial and so nice blog。
473 Web free fonts http://www.webfreefonts.com
July 28th, 2010 at 12:03 am
Cool tuorial. Thanks for Sharing
474 computer programming tutorials http://pickatutorial.com
August 7th, 2010 at 6:58 am
Thanks for sharing such useful information.
475 computer eBooks http://flazw.cz.cc
August 7th, 2010 at 6:59 am
This one is really awsome.
476 diden http://www.seniaku.com
August 9th, 2010 at 12:31 am
the most coolest and awesome website i ever found on the net!!!!! everything here is simple, clean and alot functional!!
477 Lorem Ipsum http://www.miscdownload.com/
August 21st, 2010 at 2:10 am
Hmmm, no doubt, really a nice tutorial. It will helpful for web designer. One great information is got from the bottom of this tutorial to fix IE6 bug using js. I spoiled a lot of time to solve css hover problem, but did not from none of where. Thanks for providing important article for us.
478 web tasarım fiyatları http://www.logobilisim.com/
August 22nd, 2010 at 4:59 am
Very nice indeed.. I love the whole freestyle feel to it. It doesn’t feel so, bland. Cool idea.
479 yuanzhen
September 1st, 2010 at 12:47 am
cool idea! it is great