2つの<nav>要素 - デスクトップとモバイル

Question

私が調査したところでは、2つのメニューやサブメニューがあるようなものには2つの<nav>要素を使用することが許容されるように見えます。それは理解できる。

しかし、デスクトップとモバイルの違いについて同じリンクを持つ2つの<nav>要素を使用するとどうなりますか？それは悪い習慣と見なされるか、そうすることに何らかの不都合（罰則）があ​​りますか？私はそれが "乾燥"コーディングに反対するだろうが、他の何かを知っている？

**背景 - 私はモバイルメニュー（ハンバーガーボタンクリックによって起動される）を「フェードイン」して出すことができず、ブラウザのサイズを変更するとすべてが正しく機能するように見えるため、何らかの理由。サイズ変更が起こりそうにないと感じていますが、<nav>要素を複製せずに、「可視性」プロパティや「表示」プロパティ、jQuery「フェード」やJavaScriptのアニメーションを使用しようとするとエラーに遭遇し、もう片方。サイドノートは、1つの「<nav>」と「スライド」エフェクトのいずれかでうまく動作するようにすることができます。これは「フェード」エフェクトを達成しようとしている場合のみです。

Answer 1

、モバイルNAV及び全幅NAVに必要なマークアップは異なる、またはNAVマークアップはオフのため、サードパーティのプラグインを使用して（異なる場所にする必要がある場合画面のナビゲーションは1つのユースケースです）、私はうれしく私のページにマークアップの2つのセットを配置します。これらの2つのケースを除いて、私はほとんど常にマークアップを再利用しようとします。

Answer 2

私の経験から、デスクトップ/モバイルの再配置/視覚的スタイリングのために要素を複製することは、ほとんど必要ありません。

代わりに、navコンテナを1回保存し、2つのバージョンのリンクを使用するか、メディアクエリを使用して要素の位置を変更/再レイアウトします。

純粋なCSSを使用して画面サイズを処理して応答することは、ウィンドウサイズ変更イベントをリッスンする必要がないという利点があります。あなたが動作するようにハンバーガーメニューをしようとして言及している

<nav> 
<ul class="links"> 
    <li> 
    <a href="#">link one</a> 
    </li> 
</ul> 
<ul class="links mobile"> 
    <li> 
    <a href="#">link one</a> 
    </li> 
</ul> 
</nav> 

、私は強く正常に動作しているbootstrap navigationを使用して助言します。 （フェードは、追加のフェードHTMLクラスで簡単に実装できます）

以下に、ブートストラップハンバーガーメニューを表示しますが、フェードで実装されたスニペットを追加します。典型的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse fade in"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="../navbar/">Default</a></li> 
 
      <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li> 
 
      <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav>