Navbar google style avec JQuery Mobile

Question

J'ai un JQuery Mobile Navbar que je voudrais styler avec CSS comme le menu de navigation très haut sur google.

Quelqu'un peut-il m'aider s'il vous plaît avec les styles? Ou au moins, dites-moi quels sont les styles que je dois remplacer et comment le faire?

Merci!

Answer 1

Juste créé quelque chose que vous pourriez utiliser. Ce n'est pas parfait, mais ça ressemble beaucoup à Google. (Un exemple concret: http://jsfiddle.net/dAUbu/)

HTML:

<div data-role="page"> 
    <div data-role="header" class="header-google"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#">Search</a></li> 
       <li><a href="#" class="ui-btn-active">Images</a></li> 
       <li><a href="#">Maps</a></li> 
       <li><a href="#">Play</a></li> 
       <li><a href="#">YouTube</a></li> 
      </ul> 
     </div> 
    </div> 

    <div data-role="content"> 
     <p>Yay!</p> 
    </div> 
</div>​ 

CSS:

.header-google { 
    border: none; 
    border-bottom: 1px solid #000; 
    background: #2D2D2D; 
} 

.header-google a.ui-btn { 
    border: none; 
    background: inherit; 
    text-shadow: none; 
    color: #BBB; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
} 

.header-google .ui-btn-inner { 
    padding: 0 !important; 
    height: 29px; 
    line-height: 29px; 
} 

.header-google a.ui-btn.ui-btn-active, 
.header-google a.ui-btn:hover{ 
    color: #FFF; 
}