ナビゲーションにオプション 'Sub Menu'を追加

http://css-tricks.com/convert-menu-to-dropdownから次のコードを取得しました。これは標準ナビゲーションをSelectメニューに変換するのに最適です。私はどのようにサブメニューで作業するための条件を追加するのだろうかと思います。私がやりたい何http://jsfiddle.net/eaDLX/ナビゲーションにオプション 'Sub Menu'を追加

が先頭に追加された「 - - 」それぞれに例えば、ここでWordPressのナビゲーションは物事を簡単にするために...

<ul id='menu-collections'> 
    <li><a href='http://...'>blah</a> 
    <ul class='sub-menu'> 
     <li><a href='http://...'>blah</a></li> 
    </ul> 
    </li> 
</ul>

そしてJSフィドルを作成し、デフォルトのHTMLがあります私のリストは次のようになります...

は、選択を選択してくださいように、サブメニューのクラスを持つUL ...

編集（これが親になります）

- 1920年代のコレクション（これは子になります）

- Baulmerコレクション

等...

私はこれを行うのは非常に単純なことだろうと確信しているが、私は論理的な飛躍をすることはできません。助けてもらえますか？おかげ

 // Create the dropdown base 

     $("<select />").appendTo("nav#menu-collections"); 

     // Create default option "Go to..." 
     $("<option />", { 
      "selected": "selected", 
      "value" : "", 
      "text" : "Choose a Collection..." 
     }).appendTo("nav#menu-collections select"); 

     // Populate dropdown with menu items 
     $("nav#menu-collections a").each(function() { 
     var el = $(this); 
     $("<option />", { 
      "value" : el.attr("href"), 
      "text" : el.text() 
     }).appendTo("nav#menu-collections select"); 
     }); 

     $("nav#menu-collections select").change(function() { 
     window.location = $(this).find("option:selected").val(); 
     }); 

     /* Hide existing menu */ 
     $('nav#menu-collections ul').hide();

出典

2012-04-30 SparrwHawk

ID = "メニューのコレクションは、" これは別個のものでなければなりません。 – Thulasiram

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // Create the dropdown base 
      $('<select />').appendTo('nav#menu-collections'); 

      // Create default option "Go to..." 
      $('<option />', { 
       'selected': 'selected', 
       'value': '', 
       'text': 'Choose a Collection...', 
       'class': 'select' 
      }).appendTo('nav#menu-collections select'); 


      // Populate dropdown with menu items 
      $('ul.menu > li').each(function() { 
       var obj = $(this); 

       $('<option />', { 
        'value': obj.children('a').attr('href'), 
        'text': obj.children('a').text() 
       }).appendTo('nav#menu-collections select'); 

       if (obj.children('ul.sub-menu').length !== 0) { 
        obj.children('ul.sub-menu').find('a').each(function() { 
         $('<option />', { 
          'value': $(this).attr('href'), 
          'text': '--' + $.trim($(this).text()) 
         }).appendTo('nav#menu-collections select'); 
        }); 
       } 
      }); 

      $('nav#menu-collections select').change(function() { 
       if ($(this).find('option:selected').hasClass('select') == false) { 
        window.location = $(this).find('option:selected').val(); 
       } 
      }); 

      $('nav#menu-collections ul').remove(); 
     }); 
    </script> 
</head> 
<body> 
    <nav id="menu-collections" role="navigation"> 
    <div class="menu-collections-container"> 
     <ul id="menu-collections-ul" class="menu"> 
      <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#HeaderTest">Header Test</a> 
      </li> 
      <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#1920">1920</a> 
       <ul class="sub-menu"> 
        <li id="menu-item-91" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91"> 
         <a href="#1920Test1">Test1</a> <a href="#1920Test5">Test5</a> <a href="#1920test4"> 
          Test4</a> </li> 
       </ul> 
      </li> 
      <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#HeaderTest2">Header Test 2</a> 
      </li> 
      <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#1921">1921</a> 
       <ul class="sub-menu"> 
        <li id="Li2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91"> 
         <a href="#1921test">Test1</a> <a href="#1921test3">Test3</a> </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </nav> 
    <h1> 
     1920 
    </h1> 
</body> 
</html>

出典

2012-05-01 10:55:19 Thulasiram

ライブデモ用：http://jsfiddle.net/HjZ9B/ – Thulasiram

ああありがとう、これは私の日を取っただろう！ – SparrwHawk

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // Create the dropdown base 
      $('<select />').appendTo('nav#menu-collections'); 

      // Create default option "Go to..." 
      $('<option />', { 
       'selected': 'selected', 
       'value': '', 
       'text': 'Choose a Collection...', 
       'class': 'select' 
      }).appendTo('nav#menu-collections select'); 


      // Populate dropdown with menu items 
      $('ul.menu > li').each(function() { 
       var obj = $(this); 
       if (obj.children('ul.sub-menu').length !== 0) { 
        var subMenuListItems = $('<optgroup />', { 'label': obj.children('a').text() }); 

        if (obj.children('a').attr('href') !== undefined) { 
         subMenuListItems.append($('<option />', { 
          'value': obj.children('a').attr('href'), 
          //'text': obj.children('a').text() //Or 
          'text': 'Home' 
         })); 
        } 

        obj.children('ul.sub-menu').find('a').each(function() { 
         subMenuListItems.append($('<option />', { 
          'value': $(this).attr('href'), 
          'text': $(this).text() 
         })); 
        }); 

        $('nav#menu-collections select').append(subMenuListItems); 
       } 
       else { 
        $('<option />', { 
         'value': obj.children('a').attr('href'), 
         'text': obj.children('a').text() 
        }).appendTo('nav#menu-collections select'); 
       } 
      }); 

      $('nav#menu-collections select').change(function() { 
       if ($(this).find('option:selected').hasClass('select') == false) { 
        window.location = $(this).find('option:selected').val(); 
       } 
      }); 

      $('nav#menu-collections ul').remove(); 
     }); 
    </script> 
</head> 
<body> 
    <nav id="menu-collections" role="navigation"> 
    <div class="menu-collections-container"> 
     <ul id="menu-collections-ul" class="menu"> 
      <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#HeaderTest">Header Test</a> 
      </li> 
      <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#1920">1920</a> 
       <ul class="sub-menu"> 
        <li id="menu-item-91" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91"> 
         <a href="#1920Test1">Test1</a> <a href="#1920Test5">Test5</a> <a href="#1920test4"> 
          Test4</a> </li> 
       </ul> 
      </li> 
      <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#HeaderTest2">Header Test 2</a> 
      </li> 
      <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52"> 
       <a href="#1921">1921</a> 
       <ul class="sub-menu"> 
        <li id="Li2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91"> 
         <a href="#1921test">Test1</a> <a href="#1921test3">Test3</a> </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </nav> 
    <h1> 
     1920 
    </h1> 
</body> 
</html>

出典

2012-05-01 10:44:27 Thulasiram

ライブデモのためにこのリンクを参照してください：http://jsfiddle.net/vgtMy/ – Thulasiram

私は$（ 'nav＃menu-collections ul'）を使用しました。あなたは/ * = Jayを使うことができます。既存のメニューを隠す*/ $（ 'nav＃menu-collections ul'）。hide（）; – Thulasiram

ナビゲーションにオプション 'Sub Menu'を追加

答えて

関連する問題