Question

您好我有一个响应式菜单系统，效果很好，但现在我想以不同的方式更改网址位置，首先看看我的下拉菜单..

实际上我需要给主菜单1，主菜单2和主菜单3分隔链接，例如www.example1.com的链接，www.example2.com的链接。虽然我只想要右下方的下拉功能向下箭头（nav_sprite.png），你在jsfiddle例子中找不到。您可以在下面的课程中看到

ul#menu li.hasChildren a > span {
  background: url(../images/nav_sprite.png);
  background-position: right 0px !important;
  background-repeat: no-repeat;
  background-size: 30px auto;
}

我尝试添加另一个锚标记，如下所示..并将该标记赋予float：left并尝试将宽度55px添加到第二个锚标记，该标记用于下拉，右边用给定的float：right。但这一切都像地狱一样崩溃.....

<li><a href="http://www.example.com">Main Menu 1</a><a href="#" tabindex="1" accesskey="h">&nbsp;</a>
<ul>
....

你有任何想法解决这个问题吗？

谢谢保罗

Answer 1

我希望我能正确理解你。看看我的jsFiddle：

<强> Fiddddle

诀窍是给＆＃34; li＆＃34; -Element 一个位置：相对属性。然后你可以自由地定位你的dropdown-button-element：

<强> CSS：

ul#menu li a.dropdownBtn {
    background-color: red;
    position: absolute;
    width: 30px;
    right: 0;
    top: 0;
}

<强> HTML：

<ul id="menu" class="overthrow">
    <li><a href="#" tabindex="1" accesskey="h">Main Menu 1</a>
        <a class="dropdownBtn">v</a>
        <!-- etc etc -->
    </li>
</ul>

<强> JS：

// change:
$('ul#menu li.hasChildren a').on('click', function() {
// to:
$('ul#menu li.hasChildren a.dropdownBtn').on('click', function() {

// and change:
if($(this).attr('class')=="hasChildrenActive"){
// to
if($(this).hasClass("hasChildrenActive")){

唯一剩下的就是调整你的js代码，使它使用a.dropdownBtn而不是其他链接标记。

响应式菜单问题

1 个答案: