0

http://css-tricks.com/convert-menu-to-dropdownから次のコードを取得しました。これは、標準のナビゲーションを選択メニューに変換するのに最適です。ただし、サブメニューを操作するための条件を追加する方法を考えています。たとえば、WordPress ナビゲーションが作成するデフォルトの html は次のとおりです...

<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 Fiddle - http://jsfiddle.net/eaDLX/

私がしたいのは、サブメニューのクラスを持つ各 ul の先頭に「-」を追加して、リストが次のようになるようにすることです...

選択を選択...

エディトリアル (これが親になります)

-- 1920 年代コレクション (これは子になります)

広告

-- バウルマー コレクション

等...

これは非常に簡単に実行できると確信していますが、論理的な飛躍はできません。誰か助けてくれませんか？ありがとう

        // 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();
4

2 に答える 2

0 
<!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-01T10:55:19.533 に答える
0 
<!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-01T10:44:27.560 に答える