魔线导航

Question

我正在为网站使用魔术线导航但不想拥有主菜单按钮，因为徽标会执行此操作。在不更改当前布局的情况下，将徽标集成到此菜单中的最佳方法是什么？附：徽标应出现在左侧菜单旁边，不想添加所有的CSS。

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

// DOM Ready

$(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();

});

Answer 1

将此添加到您的css

#logo{
      display: inline-block;}
.nav-wrap{
          display:inline-block;}

Answer 2

我添加了float：left;对于徽标和菜单，我没有更改html，只更改了css http://jsfiddle.net/LjxmG/4/

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

.nav-wrap {
    float: left;
}

我也更改了＃example-one上的填充，这打破了菜单。