0

我正在为网站使用魔术线导航，但不希望有主菜单按钮，因为徽标会这样做。在不更改当前布局的情况下将徽标集成到此菜单中的最佳方法是什么？ps logo应该出现在左侧菜单旁边，不想添加所有的css。

附加js小提琴链接。 http://jsfiddle.net/LjxmG/

// DOM 就绪

$(function() {

var $el, leftPos, newWidth;
    $mainNav2 = $("#example-two");

/*
    EXAMPLE ONE
*/

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");

/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

/*
    EXAMPLE TWO
*/

$mainNav2.append("<li id='magic-line-two'></li>");

var $magicLineTwo = $("#magic-line-two");

$magicLineTwo
    .width($(".current_page_item_two").width())
    .height($mainNav2.height())
    .css("left", $(".current_page_item_two a").position().left)
    .data("origLeft", $(".current_page_item_two a").position().left)
    .data("origWidth", $magicLineTwo.width())
    .data("origColor", $(".current_page_item_two a").attr("rel"));

$("#example-two a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLineTwo.stop().animate({
        left: leftPos,
        width: newWidth,
        backgroundColor: $el.attr("rel")
    })
}, function() {
    $magicLineTwo.stop().animate({
        left: $magicLineTwo.data("origLeft"),
        width: $magicLineTwo.data("origWidth"),
        backgroundColor: $magicLineTwo.data("origColor")
    });    
});

/* Kick IE into gear */
$(".current_page_item_two a").mouseenter();

});
4

2 回答 2

1

我添加了浮动：左；到标志和菜单，我没有改变html，只改变了css http://jsfiddle.net/LjxmG/4/

#logo {
    width: 300px;
    float: left;
}

.nav-wrap {
    float: left;
}

我还更改了#example-one 上的填充，这破坏了菜单。

于 2013-06-17T10:27:54.940 回答
1

将此添加到您的CSS

#logo{
      display: inline-block;}
.nav-wrap{
          display:inline-block;}
于 2013-06-17T10:17:39.337 回答