-1

我有以下代码适用于下拉菜单，但我需要修改 css 和 jquery。

需要增加主框并减少第一个图标行

但是什么时候i try到decrease the widthdecrease 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% */
}

为了使“主框”更大，您可以添加大于 200 像素的宽度，该宽度.click-nav ul li ul已在 CSS 中定位。例如

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

在这里更新了你的小提琴。

这是你的意思吗？很难理解到底是什么问题。

于 2013-10-15T05:54:00.890 回答