0

Web サイトでマジック ライン ナビゲーションを使用していますが、ホーム メニュー ボタンを配置したくありません。これはロゴが行うためです。現在のレイアウトを変更せずにロゴをこのメニューに統合するための最良の方法は何ですか? PSロゴは左側のメニューの横に表示されるはずですが、すべての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

これをcssに追加します

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

float:left; を追加しました。ロゴとメニューは、htmlは変えず、cssだけ変えましたhttp://jsfiddle.net/LjxmG/4/

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

.nav-wrap {
    float: left;
}

#example-one のパディングも変更しましたが、これはメニューを壊していました。

于 2013-06-17T10:27:54.940 に答える