HTML＆CSS戦略ヘッダーナビゲーションに

Question

は、ユーザが、例えば786pxを言うことができますので、ナビゲーションことを1200年からの画面のサイズを変更したときに、それは流体であるように、最高のHTML & CSSでこのナビゲーションを実装する方法の入力が必要ですオプションが詰め込まれない - それはハンバーガーの状況に壊れます。私は、PSDファイルをレイヤーアウトしてすべてを持っています。

私の2つのアイデア：

1. 私はその位置にナビゲーションを配置考え、その後の大きなロゴが小さくなると上に移動して、それを作るのナビゲーションオプション

2. 上のリンク領域を作成していますユーザーが画面を小さくしている間にナビゲーションが内向きに移動します。

状況に役立つアイデアがあります。

Answer 1

最初のアイデアをやる理由を完全に理解していません。しかし、2番目のアイデアは簡単に達成でき、ブラウザーウィンドウの幅が786px以上の場合、メニューを1行に収めるのに役立ちます。

バットを外してください。私は、あなたは、様式化されたボーダーに問題があるかもしれないことがわかります。固定幅グラフィックスと流体応答設計は完全にはうまくいっていません。おそらく、2つのブレークポイント用のメニュー境界線グラフィックスを作成したいと考えています.1つは786px幅とそれ以上の幅、1200px幅は1つのブレークポイントです。おそらくあなたのハンバーガーメニューのためのものでもあります。デザインの一部を犠牲にしても構いませんが、水平方向に繰り返すタイルグラフィックや境界線のCSS3グラデーションを作成することもできます。そうしないと、ブレークポイントごとにグラフィックスを設定した固定幅のメニューが理想的ではありません。しかし、同じ画像セットを使用して、使用したい異なるブレークポイントの境界要素の幅を制限するために、clip-pathを使用するような修正方法を考えることができます。

とにかく、中型メニューのメニュー項目のサイズを調整します。言い換えれば、ロゴのサイズを小さくして上に移動し、その中のリンクリスト内のスペースを削除します真ん中。最後の部分のやり方は、リンクのHTML構造によって異なります。

私は現在のプロジェクトのためにあなたに似たメニューを行うと、以下のマークアップを持っている：私は絶対に使用してロゴを配置

<header id="header"> 
     <div class="container"> 
      <div class="nav-toggle"> 
       <div class="hamburger"> 
        <div class="bar"></div> 
        <div class="bar"></div> 
        <div class="bar"></div> 
       </div> 
      </div> 
      <div id="logo"> 
       <a href="#"><img src="assets/img/logo.png" alt="" class="logo"></a> 
      </div> 
      <nav> 
       <ul class="list-inline"> 
        <li class="current-menu-item"><a href="#">Home</a></li><!-- 
        --><li><a href="#">Restaurant</a></li><!-- 
        --><li><a href="#">Menu</a></li><!-- 
        --><li><a href="#">Gallery</a></li><!-- 
        --><li><a href="#">Catering</a></li><!-- 
        --><li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 

を私の新しい行く-に中心トリック：

#logo { 
    position: absolute; 
    top: 10px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 999; 
} 

私はハンバーガーメニューを行う960px付近に1つのメニューブレークポイントしかありません。ここに私のサス/ SCSSはそのためです：

は

@media only screen and (min-width: $nav-breakpoint) { 
    .list-inline { 
     margin-left: -10px; 

     li { 
      display: inline-block; 

      &:nth-child(3) { 
       margin-right: 180px; 
      } 
     } 

     a { 
      padding-left: 15px; 
      padding-right: 15px; 
     } 
    } 
} 

ロゴが座っている途中でスペースを作成するための私の戦略は、単にロゴ前nth-childからmargin-rightを適用することです。メニュー項目の数が決して変化しないことが予想される場合、これはあなたのためにも機能します。

私の経験では、768pxから1024pxの幅のデバイスでは、メニューリンクのサイズを小さくすることができます。サイズの大きいリンクよりも幅の広い小さなリンクを使用する方が良いでしょう。 「ヒット」領域のサイズを増やすにはliではなくaタグにパディングを適用していることを確認してください。

私が提案した内容についてさらに説明したいと思っている場合は、コメントにご記入ください。