PDA

View Full Version : How do I make meny buttons that shows in which catagory the viewer is?


emilk
11-12-2009, 07:16 PM
Howdy:wink:

Does anyone know how to make meny buttons that shows in which catagory the viewer is like apple does in their site www.apple.com (http://www.apple.com).

If you know it in codes and how to do it in dreamweaver without typing i will be grateful.

/Emil :mrgreen:

gentleone
11-13-2009, 06:03 PM
Can you perhaps be a bit more specific, because I don't know what your talking about. I guess I'm not the only one otherwise you would have already an answer.

And if someone could develop websites without typing he/she would be the Master developer. :)

emilk
11-14-2009, 11:51 AM
Okey lets take this example.:lol:
If you scroll up when you read this you will se that the "forum buttom" on the menu have another image the the other buttons ex home templates and som on.

But i figured it out by myself cause its really simple.
You only have to change the image to another for all "linkstauses" (rollover, onmousedown and onclick) on wathever page you want to have that function.
Then its easy for the wiever to see which cathegory he's on:smile:

gentleone
11-14-2009, 12:10 PM
Aha... so I assume you took the rollover in-build option in Dreamweaver. There is also a nice CSS way to do this which is called the CSS sprites technique. Shortly, you have one image with all your buttons (link, hover and active states) and you position them with the CSS property, background-position.
So no preloading images (no flickering) and 1 http request instead of 21 if you have 7 buttons with the 3 states.

The menu from apple is also done this way.

More info can be found here:
CSS Sprites Tut Smashing Magazine (http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/)

Corrosive
11-14-2009, 12:24 PM
Aha... so I assume you took the rollover in-build option in Dreamweaver. There is also a nice CSS way to do this which is called the CSS sprites technique. Shortly, you have one image with all your buttons (link, hover and active states) and you position them with the CSS property, background-position.
So no preloading images (no flickering) and 1 http request instead of 21 if you have 7 buttons with the 3 states.

The menu from apple is also done this way.

More info can be found here:
CSS Sprites Tut Smashing Magazine (http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/)

That's a good article and interesting technique. If you have Chrome or Safari handy then I did a CSS3 'Apple Style' menu a while back...

http://corrosiveonline.co.uk/tutorials_css3_apple_menu.php

No images at all. Maybe one day we can actually use CSS3!

gentleone
11-14-2009, 12:49 PM
No images at all. Maybe one day we can actually use CSS3!

That is really nice what you put together with CSS3, Corrosive. I really can't wait to use all this new and cool properties. But like you said, maybe one day :)

Corrosive
11-14-2009, 01:17 PM
I'm 33 now and reckon I'll be having a mid-life crisis by the time we can use CSS3 for client sites! Oh well, it is fun to experiment with ;)

domedia
11-14-2009, 07:27 PM
I would start playing with it now. 'Progressive enhancement' seems to be the new thing now. You'll add some cool stuff for people with cutting edge browsers, and the rest wil see the page normal.

gentleone
11-14-2009, 07:42 PM
That's what also slipped into my mind. So if you would use for example the border-radius property for a div then in the other browsers it will just render as a rectangle without the curvy corners. Am I right?

domedia
11-14-2009, 09:20 PM
That's what also slipped into my mind. So if you would use for example the border-radius property for a div then in the other browsers it will just render as a rectangle without the curvy corners. Am I right?
Exactly 8)

Corrosive
11-15-2009, 08:27 AM
Yes it does degrade nicely but you have to be so careful with clients. They won't understand why their site has nice rounded corners when I show them in Chrome but it is all square in their IE at home. They say 'but I want rounded corners in every browser'. It can be making a rod for your own back. I use some CSS3 on my site because I couldn't give a sh*t how it looks in IE ;)