How to create a menu bar like www.zappos.com

focurious

05-08-2011, 08:23 AM

My CSS code is as follows:

body {background-color: #F2F2F2;}

.buttonmenu1 ul{
padding: 2px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 22px "Palatino Linotype", "Book Antiqua", Palatino, serif;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.buttonmenu1 li{
display: inline;
margin: 1;
margin-bottom:20;
}

.buttonmenu1 li a{
height: 1%;
text-decoration: none;
padding: 5px 7px;
margin-right: 0px;
color: WHITE;
background: #006;
border-radius: 5px; /*w3c border radius*/
box-shadow: 1px 1px 1px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 5px; /* mozilla border radius */
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #357cbd 50%, #006 50%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 5px; /* webkit border radius */
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #357cbd), color-stop(50%, #006), to(#72a6d4)); /* webkit gradient background */

filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#72a6d4', endColorstr='#006'); /* IE6 & IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#72a6d4', endColorstr='#006)"; /* IE8 */
}

.buttonmenu1 li a:hover{
height: 1%;
color: #EBEBEB;
-moz-border-radius: 5px; /* mozilla border radius */
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #255684 50%, #000059 50%, #507594); /* mozilla gradient background */
-webkit-border-radius: 5px; /* webkit border radius */
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #255684), color-stop(50%, #000059), to(#507594)); /* webkit gradient background */
}

.buttonmenu1 li a:active{
height: 1%;
color: #EBEBEB;
-moz-border-radius: 5px; /* mozilla border radius */
-moz-box-shadow: inset 3px 3px 3px black; /* mozilla box shadow */
background: -moz-linear-gradient(center top, #255684 50%, #000059 50%, #507594); /* mozilla gradient background */
-webkit-border-radius: 5px; /* webkit border radius */
-webkit-box-shadow: inset 3px 3px 3px black; /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #255684), color-stop(50%, #000059), to(#507594)); /* webkit gradient background */
}

My HTML code is as follows:
<html>

<link href="CSS.css" rel="stylesheet" type="text/css">
<div class="buttonmenu1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Where to buy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<br />

</html>
What it looks like:
http://img853.imageshack.us/img853/6442/mymenubar.jpg

When mouse hover over 'Media' button:
http://img196.imageshack.us/img196/29/mymenubarhover.jpg

How do I modify my current menu bar in terms of structure to something like zappos.com?
I want all the buttons to be together in 1 bar instead of individually separated. And there will be a line separator between the buttons.

Any constructive suggestion is most welcome!
Thanks in advance!

cyprusholidays

05-09-2011, 12:59 PM

Try Google...

DanInMa

05-09-2011, 02:39 PM

Try Google...

if that's all the advice you can offer someone, you shouldn't bother responding. This site is here so all level of users can learn from newbies to pro's

teedoff

05-09-2011, 02:47 PM

First, when posting code, please use the # button to wrap your code in code tags.

Now, the menu on zappos.com is more than a single level nav menu. If you want a single level navigation menu, there is a free tool you can download called CSS tab Designer 2 that makes it easy for someone to create nice looking menus even with no coding experience.

If you're looking to create dropdown menus like on zappos, then google son of suckerfish drop down menu. Its CSS based and the tutorial is really easy to follow.

AndrewGSW

05-09-2011, 02:53 PM

The first step would be to give your 'buttonmenu1' ul a background-color.

DanInMa

05-09-2011, 03:05 PM

@focurious Sorry I'm more of a developer than a designer as I am a very unartistic person. I took a look a zappos .com. What you have alread is very similar but you will need to do a few things to get the same look.

1. give the art left and right menu items their own special classes or id's and assign them only corners on the left and right respectively

2. remove the corners completely from the other menu items and remove whatever margins or padding are seperating them

3. this is the harder part. ( for me at least) you will have to create the graphic that separates the menu items and give that graphic a specific background-position so you can apply it to the far right of each menu item ( except for the very last one of course)

I tried googling a tutorial for you but I had a problem finding one as I am unsure what the "industry" buzzword is for using menu separators in this fashion. If nothing else this gives you a direction to go in.

AndrewGSW

05-09-2011, 04:42 PM

1. give the art left and right menu items their own special classes or id's and assign them only corners on the left and right respectively

2. remove the corners completely from the other menu items and remove whatever margins or padding are seperating them

3. this is the harder part. ( for me at least) you will have to create the graphic that separates the menu items and give that graphic a specific background-position so you can apply it to the far right of each menu item ( except for the very last one of course)
For part three, here are two approaches:

A. For the li's, apart from the first and (possibly) last one, remove the left and right margin and add some right padding instead. Add a background image for these li,to the right (no-repeat), so it sits inside the right-padding.

B. Use the right-border of these li instead, giving them a suitable colour, and perhaps also making use of the left-border as well - so that the two together give the impression of an image separator.

focurious

05-10-2011, 05:13 PM

Thanks all for helping out! esp to AndrewGSW and DanInMa.
cyprusholidays: Your post is unbelievable btw.

Thanks to all the help rendered. i am almost there.

What the menubar look like now:
http://img862.imageshack.us/img862/852/menubarfinal.jpg

When mouse clicked the 'Media' button:
http://img27.imageshack.us/img27/3002/menubaractive.jpg

The 'clicked' effect is not ideal yet. I would prefer the inset to take effect and yet the shadow of the button remains.

The css for that part:
.menuBar a.menuButtonMid:active{
height: 1%;
color: #EBEBEB;
border-radius: 0px; /*w3c border radius*/
box-shadow: inset 1px 1px 2px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 0px; /* mozilla border radius */
-moz-box-shadow: inset 1px 1px 2px black; /* mozilla box shadow */
background: -moz-linear-gradient(center top, #255684 50%, #000059 50%, #507594); /* mozilla gradient background */
-webkit-border-radius: 0px; /* webkit border radius */
-webkit-box-shadow: inset 1px 1px 2px black; /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #255684), color-stop(50%, #000059), to(#507594)); /* webkit gradient background */
}

DanInMa

05-10-2011, 05:26 PM

Outstanding! Looks great!

focurious

05-10-2011, 05:36 PM

wouldnt have made it without u ;)

focurious

05-11-2011, 01:38 PM

anyone can help me on post #8?

Apostropartheid

05-12-2011, 01:21 AM

focurious

05-12-2011, 04:28 PM

Both WebKit and Mozilla now support box-shadow without a vendor-specific prefix. You can safely remove those lines from your code.

The box-shadow (http://www.w3.org/TR/css3-background/#the-box-shadow) property is capable of multiple shadows. Use a reference (http://www.css3.info/preview/box-shadow/) and see if you can splice it together yourself.

Hey! Thx alot! I managed to get the shadow i wanted with your advice.

But i dont get what you mean by 'Both WebKit and Mozilla now support box-shadow without a vendor-specific prefix.'

What if the users running older version of FF and Chrome? Would the vendor-specific prefix make a difference?

focurious

05-12-2011, 04:53 PM

Now I faced this problem:
http://img109.imageshack.us/img109/1127/menubarline2.jpg

This happens when webpage is viewed on mobile platform or low resolution screen..

How to fix this?

raptorjgzus

05-12-2011, 05:11 PM

step #1 create subdomain for mobile viewing for example www.mobile.yoursite.com

step#2 here is a php code you need to insert into your landing page html template. im not a php expert so someone else will have to take it from here. But you will want to have a redirect to your mobile subdomain. and else would be staying on site.<?php

$mobile_browser = '0';

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}

if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');

if (in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
$mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
$mobile_browser = 0;
}

if ($mobile_browser > 0) {
// do something
}
else {
// do something else
}

?>

step#3 you need to build a new css template for mobile plateforms, its 960x480 if i remember correctly. I believe some cms have plugins for doing all this. I know joomla does but im not sure about wordpress. good luck

focurious

05-13-2011, 06:31 PM

im thinking of using main website for highest compatibility for all kind of views. subdomain for mobile perhaps later when the site becomes comprehensive.

any suggestion to ensure the width dont have cut and divide into Line 2?

Apostropartheid

05-13-2011, 08:29 PM

Hey! Thx alot! I managed to get the shadow i wanted with your advice.

But i dont get what you mean by 'Both WebKit and Mozilla now support box-shadow without a vendor-specific prefix.'

What if the users running older version of FF and Chrome? Would the vendor-specific prefix make a difference?

Fantastic!

Because Chrome and Firefox update without your knowledge, almost all users have the latest version. The prefixes are designed to be dropped when they have finished completely implementing the spec. Due to their designated experimental nature, these proprietary extensions may be unstable and not produce the results intended.