0

HTML5 とコーディング全般に関しては、私は完全な初心者です... Zurb Foundation を使用してプロトタイピングを行っており、次のコードをナビゲーションに使用しています。寸法が縮小された場合 (ブラウザの縮小やモバイルでの起動など)、テキストの代わりにボタンが表示されるように機能します。

唯一の問題は、ナビゲーションを左上に配置したロゴと同じ行に並べて、互いに水平にレイアウトしたいということです。現在、ナビゲーション要素は単純なリンク テキストとして互いに積み重なっています。これはスタイルシートの編集可能な特性ですか? どこから始めればよいか、またはカスタマイズ可能なナビゲーションに必要なコードについて何か提案はありますか? モバイル版の ul クラスは基本的に私のコードを台無しにしていますか? （外してもフルサイズ版は変わらない…） ありがとうございます！これまでのところ、検索してもあまり成果が得られませんでした...

<div class="eight columns">
    <div id="navigation">
        <ul class="hide-on-phones">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">For Sale</a></li>
            <li><a href="#">Contact or Visit Us</a></li>
        </ul>
        <ul class="show-on-phones">
            <li><a href="#" class="large black button">Home</a></li>
            <li><a href="#" class="large black button">Services</a></li>
            <li><a href="#" class="large black button">For Sale</a></li>
            <li><a href="#" class="large black button">Contact or Visit Us</a></li>
        </ul>
    </div>
</div>
4

1 に答える 1

0

問題はスタイルの「大きな黒ボタン」。このスタイルは、「モバイル」解像度の場合に全画面幅を拡張することを目的としています。数行の CSS を追加することで、独自のボタンのような要素を作成できます。jsFiddle で、それがどのように機能するかを示すデモをセットアップしました。jsFiddle の仕切りを取り、「モバイル」ブレークポイントに到達するまでディスプレイを縮小します。

リンク: http://jsfiddle.net/fumUp/1/

Code:
    <!-- the inline style below should be moved to your CSS file -->
    <style>
        .mobile-nav a
        {
            border-radius:5px;
            background-color:#000;    
            padding:5px 10px;
        }
        .mobile-nav li
        {
            float:left;
            padding:5px;
        }
    </style>
    <!-- /Inline style -->
    <div class="row"><div class="eight columns">
            <div id="navigation">
                <ul class="hide-on-phones">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">For Sale</a></li>
                 <li><a href="#">Contact or Visit Us</a></li>
                 </ul>
                <ul class="mobile-nav show-on-phones">
                 <li><a href="#" class="simple-radius">Home</a></li>
                 <li><a href="#" class="simple-radius">Services</a></li>
                 <li><a href="#" class="simple-radius">For Sale</a></li>
                 <li><a href="#" class="simple-radius">Contact or Visit Us</a></li>
                </ul>
                </div>
            </div>
    </div>​​​​​
于 2012-05-23T12:54:31.410 に答える