Menu
Community /Pin to ProfileBookmarkhttp://css.maxdesign.com.au/listamatic/index.htm for many ways to style lists.
This effect is entirely capable with CSS. Never (or, [I]do everything in your power to avoid[/I] the use of javascript in navigation as many people either have javascript turned off, or do not use it altogether and you are denying them your 'navigation').
This (apple.com) is a <ul> you are correct. It uses the pseudo-class for hover to swap the background color and/or image.
Here is a all-css navigation:
ul.buttons li {float:left}
to the STYLEs,
and to get an image with the background-color, this:
Thanks for the help and the excellent example. I appreciate it!
So, are the buttons atwww.apple.com images then? I thought perhaps they were generated by javascript.
It sounds like I really need to concentrate my learning efforts on CSS and use JavaScript only when absolutely necessary given portability reasons, is this right?
Thanks,
Alanhttp://images.apple.com/global/nav/images/globalnavbg.png
They use the one image for all buttons and move it horizontally a different amount for each button, and move it vertically for different rollover states.
The css can be seen here:http://www.apple.com/global/nav/styles/nav.css http://www.dynamicdrive.com/style/ has a lot of navi css styles that you can use. There are a few that you can change the images and styles to make it look like apple's navi bar.
hope this helps..
This can greatly save on bandwidth space because instead of the images being 10 or 20KB each for a 35px x 75px image, the images are 35px x 3px and maybe 2KB each. And, reused elsewhere on the page is also good because once loaded into the visitor's cache, the images are called ever quicker next time they are re-used elsewhere.
http://dev.organixdesign.com/demos/bar_menu/
The HTML
The CSS
For the person who mentioned that you can save bandwidth by using small gradient images, I'm not so sure. Look at apple's image that they use for the nav menu. [B]28.78 KB[/B]. And that's the equivalent to 4 different gradients for four diffrent states, and 14 images for 7 buttons (1 out of 4 states is different, black text). On yes.. the background images on the left side would also have to be different because of the rounded corners, so that's another 4 images.
You can't really select the images, because they're all background, and are extremely responsive (once the single image is downloaded, there is nothing left to download, when when hovering), so they feel just like a flash menu.
F#$ken great menu for a website; in fact, I think I'm gonna look into it in greater detail, because it really looks like one of the most solid menus I've seen.Hi,
Thanks everyone for all the great information and help.
So, here is my question about CSS/XHTML/JS: I've seen that you can use CSS to make a button change when you hover over it. Can you make it open up a second level menu, or will that require JS?
My boss is looking for a top level menu that as soon as you hover over a button, it brings up a second level menu bar underneath the first one and a large main image under that. He wants it to do this without clicking the link. Will this require JS or can it be done XHTML/CSS ?
Thanks,
Alan
http://dev.organixdesign.com/demos/drop_down_menu/
Is that what youre looking for?
As for two or three-state navigation 'rollover' requiring exponential quantities of images, -not necessary. A single image depicting every 'rollover' state can be loaded into cache once on site-entry and re-positioned on pointer-tool activity for hover, active, visited.
There are several methods of acheiving 'rounded corners' too that don't necessarily required more images. There is a 'curvey corner' javascript that uses an image that is some rediculously small size, -like 5 or 6 pixels in size maybe? I know a site (cssplay?) shows how to do something with many non-semantic <b></b> tags for curvy corners but I have not investigated how to do this myself. :rolleyes:
I am actually surprised that the page loads as fast as it does for 56-KBS users what with those 900-px width images.
That is a nice site... I come away from there wanting everything on the page. ?
[upl-file uuid=8c809d98-78c8-4d90-bbf7-4c23b295c7a6 size=14kB]ScreenHunter_1.gif[/upl-file]
[upl-file uuid=00fa3be3-c826-46ef-b7dd-9b00713b0634 size=3kB]ScreenHunter_2.gif[/upl-file]
[upl-file uuid=a7ee8b45-3284-47ca-a673-c826fa5aa590 size=4kB]ScreenHunter_3.gif[/upl-file]
That looks very nice, kind of like that except visually a little different. He wants a top navigation bar, then a second navigation bar below that. They aren't connected, but when you hover over an item on the top bar, it changes the bottom bar to reflect what you are hovering over. If you stop hovering, the second navigation bar stays on what it was last on.
Can this type of thing be done with CSS/XHTML or am I going to need JS to do it?
Also, would .NET be an alternative way to do something like this? Are there pros or cons to using .NET vs JS?
Thanks,
AlanI dont know .NET, so I cant answer that part, but there are ways to do things like that with CSS only, but browser suppot can be a major issue. I would say, using some good DOM based Javascript, you could achieve accessible, and highly functional sub menus.
Ill see if I can make something like that for my demo site, would be a good thing to have.
That would be very helpful!!! I am working my way through a CSS and JS book now...
Thanks,
AlanAnyone care to comment on the sidebars? Looks like pure CSS, based on a quick glance.
[IMG]http://i12.tinypic.com/67cxs29.gif [/IMG]Well, it's not just CSS. There appears to be fair amount of of JavaScript involved too. I'd be very interested to see this get dissected here. I'm not the best candidate for this by a long shot but I'll probably give it a whirl at some point.
There are various examples of things like this:
http://demos.mootools.net/Accordion (using an onclick event)
http://jquery.bassistance.de/accordion/ (onclick again)
How are they doing this?
Hi,
I am tasked with creating a top navigation bar similar to the one at:
[url]www.apple.com
I am now trying to learn JavaScript and CSS.
I can see that they have the top items marked in an unordered list. How are they transforming that list into graphic buttons?
Can you use JavaScript to actually generate graphic buttons instead of using pictures? Is this what they are doing?
Thanks,
Alan
Sign in
to post a comment21 Comments(s) ↴
0
@CentauriAug 01.2007 — #graphic styling of anything is done with css. Have a look at reply?
0
@WebJoelAug 01.2007 — #Hi! (I moved this from the javascript to the css boards). This effect is entirely capable with CSS. Never (or, [I]do everything in your power to avoid[/I] the use of javascript in navigation as many people either have javascript turned off, or do not use it altogether and you are denying them your 'navigation').
This (apple.com) is a <ul> you are correct. It uses the pseudo-class for hover to swap the background color and/or image.
Here is a all-css navigation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"With this, the <li>s could be made to be horizontal by adding:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
ul {list-style-type:none; width:500px;}
ul.buttons li a
{display:block; width:70px; color:#000000; background-color:#fde2bb;
padding:6px; padding-left:4px;border-left: 8px solid #00ad63;
border-right:8px solid #00ad63;font: 13px arial, sans-serif;
font-weight: bold; text-decoration: none;text-align: center; margin-top:2px;}
ul.buttons li a:hover
{list-style-type:none;width:66px;background-color:#ffffff;
border-left: 10px solid blue; border-right: 10px solid blue;
font:13px verdana; font-weight: bold; text-decoration:none;}
ul.buttons li a:active {width:66px;background-color:#ffffff;
border-left: 10px solid red; border-right: 10px solid red;
font:13px verdana; font-weight: bold; text-decoration:none;}
</style>
</head>
<body>
<ul class="buttons">
<li><a href="#nogo" title="HOME">Home</a></li>
<li><a href="#nogo" title="Page 2">Page 2</a></li>
<li><a href="#nogo" title="Page 3">Page 3</a></li>
<li><a href="#nogo" title="Page 4">Page 4</a></li>
<li><a href="#nogo" title="Page 5">Page 5</a></li>
</ul>
</body>
</html>[/QUOTE]
ul.buttons li {float:left}
to the STYLEs,
and to get an image with the background-color, this:
ul.buttons li aMuch room for variations of width, height, margins or borders, etc.
{display:block; width:70px; color:#000000; [B]background:#fde2bb[COLOR="Red"]url(standardImage.jpg)[/COLOR] ;[/B]
padding:6px; padding-left:4px;border-left: 8px solid #00ad63;
border-right:8px solid #00ad63;font: 13px arial, sans-serif;
font-weight: bold; text-decoration: none;text-align: center; margin-top:2px;}
ul.buttons li a:hover
{list-style-type:none;width:66px;[B]background:#ffffff[COLOR="Red"]url(hoverImage.jpg)[/COLOR] ;[/B]
border-left: 10px solid blue; border-right: 10px solid blue;
font:13px verdana; font-weight: bold; text-decoration:none;}[/QUOTE]
reply?
0
@alank2authorAug 01.2007 — #Hi,Thanks for the help and the excellent example. I appreciate it!
So, are the buttons at
It sounds like I really need to concentrate my learning efforts on CSS and use JavaScript only when absolutely necessary given portability reasons, is this right?
Thanks,
Alan
reply?
0
@CentauriAug 01.2007 — #The buttons are images - one image actually : 
They use the one image for all buttons and move it horizontally a different amount for each button, and move it vertically for different rollover states.
The css can be seen here:
reply?
0
@glitchgirlAug 01.2007 — #Dynamic Drive -- hope this helps..
reply?
0
@WebJoelAug 01.2007 — #And the neat thing is that the 'images' for the two states of "link at rest" and "hover" do not have to be the exact size as the <li>! ? For a gradient effect (like apple-dot-com), a vertical gradient that is maybe 2 or 3 pixels wide and 25 or 30 pixels tall is all you need. The browser will 'tile' the images correctly and smoothly (so long as the images are 'seamless').This can greatly save on bandwidth space because instead of the images being 10 or 20KB each for a 35px x 75px image, the images are 35px x 3px and maybe 2KB each. And, reused elsewhere on the page is also good because once loaded into the visitor's cache, the images are called ever quicker next time they are re-used elsewhere.
reply?
0
@blis102Aug 02.2007 — #I have a bar menu demo on my site that you can check out. It is using semantic XHTML and CSS. It uses a simple UL for structure.The HTML
[CODE]<ul id="menu">
<li><a href="#" title="Go To The Front Page" class="on">Home</a></li>
<li><a href="#" title="Read All About Us">About</a></li>
<li><a href="#" title="View Our Portfolio">Porftolio</a></li>
<li><a href="#" title="Check Out Our Services">Services</a></li>
<li><a href="#" title="Contact Us Here">Contact</a></li>
</ul>[/CODE]The CSS
[CODE]/* Menu
------------------------------------------------------------------- */
#menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: #f7f7f7 url(../images/bg_menu.gif) repeat-x left bottom;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
#menu li {
float: left;
margin: 0;
padding: 0;
font-size: 100%;
}
#menu li a {
float: left;
display: block;
margin: 0;
padding: 6px 20px;
color: #666666;
text-decoration: none;
font-weight: bold;
border-right: 1px solid #DFDFDF;
border-left: 1px solid #F2F2F2;
}
#menu li a:hover {
background: url(../images/bg_menu_hover.gif) repeat-x left bottom;
color: #000000;
}
/* Clearfix */
#menu:after {
content: " ";
display: block;
clear: both;
height: 0;
visibility: hidden;
}[/CODE]reply?
0
@snakeyeAug 02.2007 — #First of all, this CAN be done in Javascript in a way that it does not cause problems for people that have it disable. Is it the best way? Meh.. maybe not, but still, JS is not evil and if you want to code something like this in JS, you're not evil neither.For the person who mentioned that you can save bandwidth by using small gradient images, I'm not so sure. Look at apple's image that they use for the nav menu. [B]28.78 KB[/B]. And that's the equivalent to 4 different gradients for four diffrent states, and 14 images for 7 buttons (1 out of 4 states is different, black text). On yes.. the background images on the left side would also have to be different because of the rounded corners, so that's another 4 images.
You can't really select the images, because they're all background, and are extremely responsive (once the single image is downloaded, there is nothing left to download, when when hovering), so they feel just like a flash menu.
F#$ken great menu for a website; in fact, I think I'm gonna look into it in greater detail, because it really looks like one of the most solid menus I've seen.
reply?
0
@alank2authorAug 02.2007 — #Thanks everyone for all the great information and help.
So, here is my question about CSS/XHTML/JS: I've seen that you can use CSS to make a button change when you hover over it. Can you make it open up a second level menu, or will that require JS?
My boss is looking for a top level menu that as soon as you hover over a button, it brings up a second level menu bar underneath the first one and a large main image under that. He wants it to do this without clicking the link. Will this require JS or can it be done XHTML/CSS ?
Thanks,
Alan
reply?
0
@blis102Aug 02.2007 — #Here is a demo of a drop down menu I made:Is that what youre looking for?
reply?
0
@WebJoelAug 02.2007 — #....For the person who mentioned that you can save bandwidth by using small gradient images, I'm not so sure. Look at apple's image that they use for the nav menu. [B]28.78 KB[/B]. And that's the equivalent to 4 different gradients for four diffrent states, and 14 images for 7 buttons (1 out of 4 states is different, black text). ...[/QUOTE]According to websiteoptimization, that apple-dot-com site uses 8 images. The navigation bar images because [I]the text[/I] itself appear to be beveled, are most likely actual button images, not 'gradient slices'. That page is image-heavy (see screenshot). Mostly to show their (very kewl!) products, so understandable and the images are probably highly optimized.
As for two or three-state navigation 'rollover' requiring exponential quantities of images, -not necessary. A single image depicting every 'rollover' state can be loaded into cache once on site-entry and re-positioned on pointer-tool activity for hover, active, visited.
There are several methods of acheiving 'rounded corners' too that don't necessarily required more images. There is a 'curvey corner' javascript that uses an image that is some rediculously small size, -like 5 or 6 pixels in size maybe? I know a site (cssplay?) shows how to do something with many non-semantic <b></b> tags for curvy corners but I have not investigated how to do this myself. :rolleyes:
I am actually surprised that the page loads as fast as it does for 56-KBS users what with those 900-px width images.
That is a nice site... I come away from there wanting everything on the page. ?
reply?
0
@alank2authorAug 02.2007 — #Hi,Here is a demo of a drop down menu I made:
http://dev.organixdesign.com/demos/drop_down_menu/
Is that what youre looking for?[/QUOTE]
That looks very nice, kind of like that except visually a little different. He wants a top navigation bar, then a second navigation bar below that. They aren't connected, but when you hover over an item on the top bar, it changes the bottom bar to reflect what you are hovering over. If you stop hovering, the second navigation bar stays on what it was last on.
Can this type of thing be done with CSS/XHTML or am I going to need JS to do it?
Also, would .NET be an alternative way to do something like this? Are there pros or cons to using .NET vs JS?
Thanks,
Alan
reply?
0
@blis102Aug 02.2007 — #Ill see if I can make something like that for my demo site, would be a good thing to have.
reply?
0
@alank2authorAug 02.2007 — #Hi blis102,I dont know .NET, so I cant answer that part, but there are ways to do things like that with CSS only, but browser suppot can be a major issue. I would say, using some good DOM based Javascript, you could achieve accessible, and highly functional sub menus.
Ill see if I can make something like that for my demo site, would be a good thing to have.[/QUOTE]
That would be very helpful!!! I am working my way through a CSS and JS book now...
Thanks,
Alan
reply?
0
@siluriusAug 17.2007 — #reply?
0
@siluriusAug 17.2007 — #Sorry, I guess technically those are not sidebars.[IMG]reply?
0
@siluriusAug 17.2007 — #reply?
0
@blis102Aug 17.2007 — #Its an unordered list with a h3 for the title of the menu and a div for the contents of that item. It uses javascript to show the tab on hover, and hide the other tabs. It uses a smooth scroll effect similar to those in most Javascript libraries (jQuery, Mootools, script.aculo.us, etc...).There are various examples of things like this:
reply?