-1

私はこのHTMLを持っています:

 <nav>
        <div id="nav-show">
            <a class="m-btn rnd black mobile-hide" href="">Home</a>
            <a class="m-btn rnd black mobile-hide" href="">About</a>
            <a class="m-btn rnd black mobile-hide" href="">Projects</a>
            <a class="m-btn rnd black mobile-hide" href="">Quality</a>
            <a class="m-btn rnd black mobile-hide" href="">Products</a>
            <a class="m-btn rnd black mobile-hide" href="">Contact Us</a>
            <a class="m-btn rnd black mobile-hide" href="">Links</a>
        </div>

どうすればこのようなものを実装できますか? (私は JS 初心者です)

記事が言うように：

アイデア

アイデアは、ナビゲーションのさまざまなリンクにマウスを合わせると、何らかのハイライト (背景または下線) が表示されるようにすることです。これは、jQuery とそのアニメーション機能で発生します。そのため、「マジック ライン」は JavaScript を介してのみ追加されます。リストに追加してスタイルを設定すると、さまざまなリンクにマウスを合わせると、左の位置と幅が計算され、一致するようにアニメーション化されます

さまざまな要因により、HTML を変更したくありません。

私はjQueryなどを持っていますが、IE8以降と互換性がある必要があります。

私はこれを試しました：コードはこちら

ハーレー

4

2 に答える 2

1

あなたがする必要があるのは、少し微調整するだけです。

あなたが実装していたコードの問題は、主に些細なエラーでした。

マークアップにはid="nav-show"がありますが、js は を使用して$(".nav-show")いました。

変数を宣言する方法に伴う構文エラー、ベスト プラクティス (小さな js の場合)、新しい変数をそれぞれ別の行に定義する、

var $el;
var leftPos;
var newWidth;
var $mainNav = $("#nav-show");

の幅の計算方法に論理エラーがあった#magic-lineため、

これ

newWidth = $el.parent().width();

に置き換えられます

newWidth = $el.width();

リンクのテスト

于 2013-06-17T10:58:43.280 に答える
0

cssの助けを借りてこれを行うこともできます

    .menu {
        position:fixed;
        top:142px;
        right:36px;
        float:right;
        height:50px;
        border-radius:10px;
        box-shadow:0px 0px 3px 0px #FFFFFF;
        background-image:url(../img/m3nuta8.png);
        }        
    .menu ul {
            margin:0px;
            padding:1px 1px 0px 1px;
            }
        .menu ul li {
            float: left;
            display:inline;
            padding:0px;
            border-right:thick #FFF;
            margin:0px;
            height:48px;
            }
        .menu ul li:hover {
            background-color:#3F3;
            box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
            }
        .menu ul li:first-child:hover {
            border-bottom-left-radius:10px;
            border-top-left-radius:10px;
            }
        .menu ul li:last-child:hover {
            border-bottom-right-radius:10px;
            border-top-right-radius:10px;
            }
        .menu ul li a {
            margin:inherit;
            alignment-adjust:central;
            float:right;
            font-family:Kreon, sans-serif;
            font-size:20px;
            color:#FFFFFF;
            text-decoration:none;
            padding:12px 15px 10px 15px;
            text-shadow:2px 2px 3px #000000;
            height:40px;
            }

これはhtmlコードです：

<div id="menu" class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>
于 2013-06-17T10:25:01.443 に答える