Question

我正在尝试创建具有离页效果的滑动导航，但我仍然坚持使用一些CSS。

这是JSFIDDLE：http://jsfiddle.net/jdfmb718/6/

我的第一个问题是+（加号按钮）无法切换 - （减号按钮）我的jQuery正在运行我相信这是一个CSS / HTML问题。
< / LI>

（+）加号按钮未正确放置在链接上。它应该在PORTFOLIO和ABOUT US链接上。虽然我的HTML是对的，但这不会出现。看我的标记：

MENU

            <ul id="toggle">
                <li>
                    <div class="active">
                        <span class=
                        "menu-icons home menu-icons fa fa-home"></span>
                        <a href="#">HOME</a>
                    </div>
                </li>

                <li>
                    <div>
                        <span class="menu-icons about fa fa-user"></span>
                        <a href="#">ABOUT US</a> <span class=
                        "the-btn fa fa-plus"></span>

                        <ul>
                            <li>
                                <a href="#">OUR TEAM</a>
                            </li>

                            <li>
                                <a href="#">OUR SERVICES</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <div>
                        <span class=
                        "menu-icons portfolio fa fa-briefcase"></span>
                        <a href="#">PORTFOLIO</a><span class=
                        "the-btn fa fa-plus"></span>
                    </div>

                    <ul>
                        <li>
                            <a href="#">WEB DESIGN</a>
                        </li>

                        <li>
                            <a href="#">GRAPHIC DESIGN</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <div>
                        <span class=
                        "menu-icons contact fa fa-envelope"></span>
                        <a href="#">CONTACT</a>
                    </div>
                </li>
            </ul>
        </div><a class="toggle-nav fa fa-bars" href="#" id="bars" style=
        "font-style: italic"></a>

        <h1>TESTING Navigation</h1>
    </div><!-- #site-canvas -->
</div><!-- #site-wrapper> -->

我正在努力访问孩子无序列表我想在左边稍微移动它并在其上放置一些列表样式：圈但是由于某种原因我无法定位它

投资组合

    <ul>
        <li>
            <a href="#">WEB DESIGN</a>
        </li>

        <li>
            <a href="#">GRAPHIC DESIGN</a>
        </li>
    </ul>
</li>

我希望它是这样的：

enter image description here

你介意帮我解决JSFIDDLE代码吗？

Answer 1

      <li>
         <a href="#">WEB DESIGN</a>
      </li>
      <li>
        <a href="#">GRAPHIC DESIGN</a>
      </li>

      Change to:
      <li style="margin-left:62px">
        <a href="#">WEB DESIGN</a>
      </li>
      <li style="margin-left:62px">
        <a href="#">GRAPHIC DESIGN</a>
      <li>

Answer 2

所以，快速查看一些问题，我会尝试按顺序指出它们。（只是提到我试图通过修补你所拥有的东西来帮助，从头开始自己，我可能会把它，风格和JS代码完全区别开来）

首先：

对于第1点）

您正在尝试选择

var $currIcon=$(this).find("span.the-btn > i");

您没有使用i标签，请将其更改为：

var $currIcon=$(this).find("span.the-btn");

编辑：也改变其他参考。

$("span.the-btn").not($currIcon).addClass('fa-plus').removeClass('fa-minus');

对于第2点）

span.the-btn的CSS有一个{ - 1}}的上边距，这是将加号按钮向上推到上面的容器中。尝试使用-29px

的margin-top

对于第3点）

使用12px

访问该子列表

因为它是一个ul下切换

对于第4点）

所以使用：

#toggle ul li {}

http://jsfiddle.net/jdfmb718/12/

会给你类似于你所追求的。但是，当您尝试创建悬停状态时，这会导致问题，因为您尝试以这种方式使用本机列表样式项目符号。

更好的方法是做一些事情：

移动#toggle ul { list-style: disc; } #toggle ul li { margin-left: 109px; } #toggle ul li a { margin-left: 0; }标签以与父标题对齐，然后添加一个带有所需子弹图形的前伪元素（img，svg，font-icon，您的选择）。这样你仍然可以设置a的样式，使其具有覆盖整个框的悬停状态。

或

使用li标记填充整个区域，以便在块上的任意位置单击可将它们带到您想要的位置。并使用其他元素，伪元素或两者的混合创建链接文本和项目符号。

一些CSS问题

2 个答案: