-1

ドロップダウンメニューで次のコードが正常に機能していますが、css と jquery を変更する必要があります。

メイン ボックスを増やし、1 番目のアイコン行を減らす必要があります

しかし、i tryそれdecrease the widthはいつですかdecrease whole box width

ガイドしてください。フィドルリンク http://fiddle.jshell.net/6pLPn/

ここに画像の説明を入力 コード：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

    </head>
    <body>
        <div class="header">
            <div class="logo">
            JQUERY DEMO
            </div>
            <ul class="nav">
                <li class="nav-link">

                </li>
            </ul>
        </div>

        <!-- Clickable Nav -->
        <div class="click-nav">
            <ul class="no-js">
                <li>
                    <a class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
                    <ul>
                        <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
                        <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
                        <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
                        <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
                        <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /Clickable Nav -->

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
        $(function() {
            // Clickable Dropdown
            $('.click-nav > ul').toggleClass('no-js js');
            $('.click-nav .js ul').hide();
            $('.click-nav .js').click(function(e) {
                $('.click-nav .js ul').slideToggle(200);
                $('.clicker').toggleClass('active');
                e.stopPropagation();
            });
            $(document).click(function() {
                if ($('.click-nav .js ul').is(':visible')) {
                    $('.click-nav .js ul', this).slideUp();
                    $('.clicker').removeClass('active');
                }
            });
        });
        </script>




    </body>
</html>
4

1 に答える 1

1

ここにあるすべての幅は、コンテナー div で設定され<div class="click-nav">ます。CSS で定義されている幅は 200px です。

アイテム内の<a>タグは、その親コン​​テナーの幅を埋めるように設定されています。<li>display: block

.clicker「最初のアイコン行」を小さくするには、クラスでそれをターゲットにできます。

.clicker {
    width: 100px; /* or use a percentage like 50% */
}

.click-nav ul li ulまた、「メイン ボックス」を大きくするには、CSS で既にターゲットにされている200px より大きい幅を追加できます。例えば

.click-nav ul li ul {
    width: 250px; /* or use a percentage like 125% */
}

ここでフィドルを更新しました。

そうですか？問題が何であるかを正確に理解するのは困難でした。

于 2013-10-15T05:54:00.890 に答える