css - JQuery Mobile を使用した Navbar 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;
}