Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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:
    progidXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#72a6d4', endColorstr='#006'); /* IE6 & IE7 */

    -ms-filter: "progidXImageTransform.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:


    When mouse hover over 'Media' button:


    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!
    Last edited by focurious; 05-08-2011 at 09:24 AM.

  • #2
    New Coder
    Join Date
    Apr 2011
    Location
    Internet
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try Google...
    Environment friendly mosquito nets

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by cyprusholidays View Post
    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

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The first step would be to give your 'buttonmenu1' ul a background-color.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    @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.

  • Users who have thanked DanInMa for this post:

    focurious (05-12-2011)

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by DanInMa View Post
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    focurious (05-12-2011)

  • #8
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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:


    When mouse clicked the 'Media' button:


    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:
    Code:
    .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 */
    }

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Outstanding! Looks great!

  • #10
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    wouldnt have made it without u

  • #11
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    anyone can help me on post #8?

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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 property is capable of multiple shadows. Use a reference and see if you can splice it together yourself.

  • Users who have thanked Apostropartheid for this post:

    focurious (05-12-2011)

  • #13
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    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 property is capable of multiple shadows. Use a reference 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?

  • #14
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Now I faced this problem:


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

    How to fix this?

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •