How to make
  • expand with CSS (like Apple.com)

  • Tags: html,css,html-lists,expand

    Problem :

    enter image description here

    Live fiddle:

    http://jsfiddle.net/jMAzr/1/

    Working example at Apple.com: http://www.apple.com/

    <html>
    <head>
    <style>
    body {
     background:#000000;   
    }
    li {
        list-style:none;
        display: list-item;
    }
    ul.menu li {
        float:left;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        text-decoration: none;
        font-weight: 400;
    }
    ul.menu li a {
        text-decoration:none;
    }
    .header-tab-title {
        display: block;
        position: relative;
        height: 46px;
        line-height: 46px;
        cursor: pointer;
        font-size: 16px;
        color: #fff;
        text-align: center;
    }
    .search-field {
        width: 70px;
        border-radius:10px;
        transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -webkit-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -moz-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -o-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        animation-direction:reverse;
        -webkit-animation-direction:reverse; /* Safari and Chrome */
        border: 1px solid #353535;
        height:18px;
        padding: 0px 23px 4px;
        color:#FFF;
    }
    .search-field:focus {
        color:#000;
        width: 140px;
        margin-left:-70px; 
        height:20px;
    }
    </style>
    </head>
    <body>
    <ul class="menu">
    <li><span class="header-tab-title" style="width:124px;">Produtos</span></li>
    <li><span class="header-tab-title" style="width:151px;">Sites Prontos</span></li>
    <li><span class="header-tab-title"style="width:192px;" >Anuncie no Google</span></li>
    <li><span class="header-tab-title" style="width:230px;">Facebook Para Negócios</span></li>
    <li><span class="header-tab-title" style="width:152px;">Hospedagem</span></li>
    <li><span class="header-tab-title" style="width:110px;"><input class="search-field" type="search"></span></li>
    </ul>
    </body>
    </html>
    


    Solution :

    The behaviour you are looking for requires a table layout to change the width of the other "cells" as one grows. I have created a simplified fiddle with this layout:

    http://jsfiddle.net/Hp3JU/

    I've removed a couple of elements to simplify the example but the essence of the solution is to have an outer display: table, then a display:table-row then each "cell" is display:table-cell. Give the "table" a fixed width and remove the negative margin on the :hover psuedo-class to prevent the last cell overlapping its neighbor. You'll also need to remove your hardcoded fixed widths so your cells can collapse as required to make room.

    <div class="table">
        <ul class="menu">
          <li>Produtos</li>
          <li>Sites Prontos</li>
          <li>Anuncie no Google</li>
          <li>Facebook Para Negócios</li>
          <li>Hospedagem</li>
          <li><input class="search-field" type="search" /></li>
        </ul>
    </div>
    

    CSS (Relevant parts only):

    .table {
        display: table;
        width: 100%;
    }
    ul.menu {
        display: table-row;
    }
    ul.menu > li {
        display: table-cell;
    }
    .search-field {
        width: 70px;
        border-radius:10px;
        transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -webkit-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -moz-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        -o-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
        animation-direction:reverse;
        -webkit-animation-direction:reverse; /* Safari and Chrome */
        border: 1px solid #353535;
        height:18px;
        padding: 0px 23px 4px;
        color:#FFF;
    }
    .search-field:focus {
        color:#000;
        width: 140px;
        height:20px;
    }
    

      CSS Howto..

      CSS How to keep bodies of html file and included files from merging?

      Show Item when Hover Over Parent

      how to position icon just after h2 tag using :after pseudo even though 100% width

      How do I change CSS submenu width so it doesn't used the same width as the main menu?

      How to use media queries in an effective way? [closed]

      How to style a video iFrame?

      css: how to surround an image with two other images vertically centered around the first one?

      html-css-how to make opeanable vertical menu [closed]

      How to keep css style for only one element

      How to use jQuery's .css() with variable property name?

      CSS - How to select multiple attribute values?

      How to make flash movie to scale proportunatly to div width?

      How to create a faded background image?

      How to put text in the center of box while using border-box in CSS?

      How to do this with vertically stacked tabs, instead of horizontal?

      How is CSS linked to [closed]

      How do I animate background image size on hover smoothly in css?

      h1:hover is responding on the whole width, unable to link h1 and don't know how to target things individually

      sunken border when background-color css specified - how to avoid?

      How to overwrite css style in a specific page?

      How to style default confirm box with only css?

      How to add new fonts in CSS for local testing

      How do I pick an image from a set of images on my Ajax form?

      How to make jQuery slide open and close with CSS class

      css how to prevent content from drifting underneath fixed position areas?

      How do I get nested divs to be same height and expand to the largest of the heights?

      How can I set different background images for different li with same class

      How to set CSS width so that the element will have the exact window width?

      How would i change the colour dynamically depending on the width

      ASP.NET - how to retrieve CSS styles applied by javascript on page postback?