0

Nettuts で見つけたソリューションを自分のニーズに合わせようとしています。サブナビゲーションを持つトップレベルのナビゲーション要素にカーソルを合わせると奇妙な動作が発生することを除いて、全体的にはかなりうまく機能しています。その特定の要素の下の影が消えて戻ってこない. Nettuts のリソースはここにあります。

HTML のスニペットを次に示します。

<div class='navbar'>
      <div class='content'>
        <nav id='topNav'>
          <ul>
            <li>
              <a class='nav home' href='/' title='Home'>Home</a>
            </li>
            <li class='parent'>
              <a class='nav about' href='/about' title='About'>About</a>
              <ul>
                <li>
                  <a href='/about' title='History'>History</a>
                </li>
                <li>
                  <a href='/leadership' title='Leadership'>Leadership</a>
                </li>
                <li>
                  <a href='/directors' title='Directors'>Directors</a>
                </li>
                <li>
                  <a href='/science_advisory_board' title='Scientific Advisory Board'>Scientific Advisory Board</a>
                </li>
                <li>
                  <a href='/mission_statement' title='Acetylon Mission'>Acetylon Mission</a>
                </li>
                <li class='last'>
                  <a href='/careers' title='Careers'>Careers</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>

CSSは次のとおりです。

    .no-js nav li:hover ul { display: block; }

div.container { width: 100%; }
div.navbar { background: url("/images/navbar_bg.jpg") repeat-x scroll center top transparent; border: medium none; box-shadow: 0 3px 3px #555555; height: 44px; width: 100%; }

nav { font: 1.4em 'myriad-pro', sans-serif; margin: 0 auto; position: relative; width: 978px; z-index: 1; height: 0; }
nav ul { padding: 0; margin: 0; }
nav li { position: relative; display: inline-block; list-style-type: none; margin-bottom: 0; }
nav li br { display: block; line-height: .4em; }
nav li:first-child a { border-left: none; }
nav li.last a { border-right: none; }
nav li a { display: inline-block; color: #fff; text-decoration: none; font-family: 'myriad-pro', sans-serif; font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; width: 130px; vertical-align: bottom; padding: 0 16px 0 22px; }
nav li a:focus { outline: none; text-decoration: underline; }
nav li a.nav { word-wrap: break-word; line-height: 3.1em; height: 3.1em; }
nav li a.center { line-height: 1em; height: 3.1em; }
nav li a.nav:hover, nav li a.center:hover { background: url("/images/navbar_hover_bg.jpg") top center repeat-x; border: none; }
nav li a.center:hover { background: url("/images/navbar_hover_bg.jpg") top center repeat-x; border: none; }
nav li a.home { width: 64px; text-align: center; }
nav li a.about { width: 121px; }
nav ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
nav a span { display: block; float: right; margin-left: 5px; }
nav ul ul { display: none; width: auto; position: absolute; left: 0; background: #E6F1F8; width: 180px; padding-bottom: 10px; }
nav ul ul li { float: none; display: block; }
nav ul ul a { margin-top: 11px; padding: 0 10px; border-left: none; border-right: none; font-size: .8em; color: #606062; line-height: 1em; }
nav ul ul a:hover { color: #004d9d; }

そして、JS

  $(document).ready(function() {
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {

  if ($(this).find("ul").length > 0) {
    $("<span>").appendTo($(this).children(":first"));
    $("<li><hr style='width: 90%; color: #606062;' /></li>").appendTo($(this).find('li:not(:last-child)'));

    //show subnav on hover
    $(this).hover(
      function() {
        $(this).find("ul").stop(true, true).slideDown();
        $($(this).closest('.parent').children()[0]).css('background', 'url("/images/navbar_hover_bg.jpg") top center repeat-x');
      },
      function() {
        $(this).find("ul").stop(true, true).slideUp();
        $($(this).closest('.parent').children()[0]).css('background', 'url("/images/navbar_bg.jpg") top center repeat-x');
      }
    );
  }
});

});

4

1 に答える 1

0

コードはほとんど問題なかったことがわかりました。かなりクリーンアップしてかなり短くしましたが。本当の問題は、使用されたホバー画像が高さの点で元の画像と一致しなかったため、奇妙な動作を引き起こしたことでした。学んだ教訓：邪悪なイメージに注意してください。

于 2012-05-27T04:59:38.383 に答える