JQuery Mobileを使用したGoogleのスタイルGoogleのスタイル

Question

GoogleのトップナビゲーションメニューのようなCSSでスタイルを設定したいJQuery Mobile Navbarがあります。

誰かがスタイルを助けてくれますか？

少なくとも、どのスタイルを上書きする必要があり、どのようにするのか教えてください。

ありがとうございました！

Answer 1

あなたが使用できるものを作成しました。完璧ではありませんが、Googleとよく似ています。 （ライブ例：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; 
}