0

上部にナビゲーションがあり、その後に画像が続くこのレイアウトがあります。ナビゲーションの透明性を確保するために、ヒーロー画像には負の上部余白があります。

+----------------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4 Cat5   |
+----------------------------------------+
|                                        |
| Huge hero image here                   |
|                                        |
+----------------------------------------+

a.logoサイトのブランディングであり、その中に画像があります。homeからまでの項目cat5(実際にはもっと多くのカテゴリがありますが、お分かりいただけると思います) は<ul>with inline-blockedにあり<li>ます。問題は、画面のサイズが変更されると、クリップされ<li>たアイテムが単に排水溝に流れてしまうことです (図 2 のように)。

図2:

+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4  |
|                  Cat5            |
+----------------------------------+
|                                  |
| Huge hero image here             |
|                                  |
+----------------------------------+

図 3:

+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4  |
+----------------------------------+
|                                  |
| Huge hero image here             |
|                                  |
+----------------------------------+

半実際のコードは次のとおりです (実際の内容は差し控えます)。

<div id="nameplate" class="container">
    <div class="row">
        <div id="nav" class="twelvecol last">
            <a href="" class="logo"><img src="logo.png" alt="The Logo"></a></a>
            <ul id="nav_ul">
                <li><a href="">Cat 1</a></li>
                <li><a href="">Cat 2</a></li>
                <li><a href="">Cat 3</a></li>
                <li><a href="">Cat 4</a></li>
                <li>
                    <a href="">Cat 5</a>
                    <ul class="social-dropdown">
                        <li><a href="">Facebook</a></li>
                        <li><a href="">Twitter</a></li>
                        <li><a href="">YouTube</a></li>
                        <li><a href="">RSS Feed</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS スタイリングの要素:

.container#nameplate { margin: 0 auto; padding: 20px 0; position: relative; text-align: center; z-index: 3; }
.container#nameplate #nav .logo, .container#nameplate #nav > ul { display: inline; vertical-align: middle; }
.container#nameplate #nav .logo { display: inline-block; }
.container#nameplate #nav > ul { height: 32px; overflow: hidden; }
.container#nameplate #nav li { font: 300 1.25em 'Oswald', Helvetica, Arial, sans-serif; display: inline-block; line-height: 2.1em; list-style: none; margin-right: 5px; text-transform: uppercase; vertical-align: middle }
.container#nameplate #nav li a { color: #ccc; padding: 3px; }
.container#nameplate #nav li a:hover { color: #fbfbfb; text-decoration: none; }
.container#nameplate #nav ul.social-dropdown { position: absolute; }
.container#nameplate #nav ul.social-dropdown li { display: block; font-size: 80%; text-align: left; }

私はそれを試してみoverflow: hiddenましたが、 に固定の高さを加えましたdiv#nameplateが、最後の項目に表示されると予想されるドロップダウン メニューが途切れてしまい<li>ます。

そのドロップダウンが途切れることなく、このレスポンシブなことを実行する方法についてのアイデアはありますか?

4

1 に答える 1

0

Edit2: jsfiddleに関する以下のアイデアの例を次に示します。

編集: の幅を定義し、 (つまり、ナビゲーション リストの親) に.logo設定#navします。に設定し、「XX」がロゴの幅と、ロゴとナビゲーションの間に配置したい余分なスペースに等しい場所に配置します。position: relativedivposition: absolute#nav ulleft: XXpx; right: 0;

display: blockul では、オーバーフローを非表示にできます。これはレイアウトに影響を与えますが、それを支配する幅を定義するだけで済みます.

于 2013-03-13T16:23:45.350 に答える