1

このフラッシュ サイトのようなメニューを作成しようとしています。

http://elevensix.de/

「ポートフォリオ」をクリックすると、サブナビゲーションへのリンクが表示されます。今のところ、典型的な垂直方向の「ホバーメニューでサブナビゲーションを表示」を機能させることしかできませんでした。

必要なのは、適切なメニュー項目をクリックすると、そのサブメニューが表示されることです。このサブメニューは、サブメニュー項目にカーソルを合わせて選択すると表示されたままになります。サブメニュー項目が選択されると、コンテンツが表示され、メニューとサブメニューの両方が表示されたままになります (選択されたメニューとサブメニュー項目には、ナビゲーション パスを示すために個別の色が与えられます)。うわー。

これが私のhtmlです：

<div id="nav">
<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">testimonials</a>
        <ul>
          <li><a href="#">testimonial1</a></li>
          <li><a href="#">testimonial2</a></li>
          <li><a href="#">testimonial3</a></li>
          <li><a href="#">testimonial4</a></li>
        </ul>
    </li> 
     <li><a href="#">Services</a>
        <ul>
           <li><a href="#">services1</a></li>
           <li><a href="#">services2</a></li>
           <li><a href="#">services3</a></li>
           <li><a href="#">services4</a></li>
       </ul>
    </li> 
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div><!--end #nav-->

ここに私のcssがあります：

  #nav {
  width:160px;
  position: relative;
  top: 250px;
  left: 20px;
  }

 #nav ul {
 margin:0px; 
 padding:0px; 
 }

#nav ul li {
line-height:24px; 
list-style:none; 
}

#nav a {
text-decoration: none;
color: #9d9fa2;
}

#nav ul li a:hover {
position:relative;
color: #00aeef;
}

#nav ul ul {
display:none; 
position:absolute; 
left:160px; 
top:4px; 
}

#nav ul li:hover ul {
display:block;
color: #00aeef;
}

#nav ul ul li { 
width:160px; 
float:left; 
display:inline; 
line-height:16px; 
}

.selected {
color: #00aeef !important;
}

サブメニューを非表示にしてから表示できるように、サブメニューにクラスを与える必要がありますか? そして、クラスはどこに適用されますか? ULに？両方のサブメニューに同じクラスを使用できますか? この目的で display:none 値を適用する方法が間違っていますか?

ここにいるすべての賢明な人々に感謝します。

4

1 に答える 1

1

JQueryを使用してメインメニューの項目をクリックしてサブメニューを表示/非表示にしますか？その場合は、jquery.jsファイルを含めて、次のようなスクリプトを作成する必要があります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
        }
</script>

次に、メニューのクリックリンクで関数Revealを呼び出す必要があります。

<li><a href="#" onclick="Reveal(this);">testimonials</a>

ホバーされたliのcssから非表示を解除するルールを除外する必要があります。

#nav ul li:hover ul {
/*display:block;*/
color: #00aeef;
}

また、リンクにはアウトラインのルールを使用することをお勧めします。

#nav ul a{outline:none;}

これで、メインメニューの項目をクリックすると、サブメニューがゆっくりと表示および非表示になります。JQueryでアニメーション化するための多くの関数があります。あなたはここで彼らを学ぶことができます

于 2010-06-02T19:57:26.577 に答える