0

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

http://jsfiddle.net/Et2HB/

实际上，我需要提供主菜单 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>
....

你有什么想法来解决这个问题吗？

谢谢保罗

4

1 回答 1

0

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

小提琴

诀窍是给“li”元素一个位置：相对属性。然后你可以自由地放置你的下拉按钮元素：

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 而不是其他链接标记。

于 2012-11-19T22:27:21.707 回答