オンホバーのドロップダウンリストでナビゲーションバーを作成

Question

ナビゲーションバーのリンク上にマウスを置くと詳細がドロップダウン表示されます。無数のそのようなサイトがあります。 The DellとNvidiaのホームページは2つの例です。

私はそれを調べましたが、あなたはonmouseoverとonmouseoutのリストの可視性を変更しなければならないようです。

このエフェクトをどのように複製できますか？

Answer 1

DynamicDrive.comをご覧ください。彼らは多くのメニューを持っていて、多くはドロップダウンエフェクトを持っています。それらには、それらを実装する方法に関するチュートリアルが含まれています。これを行うためのさまざまな方法の

http://www.dynamicdrive.com/dynamicindex1/index.html

Answer 2

たくさん。 droppy（）のようなjqueryプラグインを使うのが最も簡単です - 私たちはこれを数多くのプロダクションで使っています。 http://onehackoranother.com/projects/jquery/droppy/

あなたがここにコードを取得することができます：http://plugins.jquery.com/project/droppy

それは2008年に作られたが、それは非常に小さいですし、安定したjQueryのを使用しています。本番環境では、jQuery 1.5+と1.6+を使用しています。ネストされたレベルのためにここにもhttp://lvsys.com/、http://noblepigwine.comと：：これらの例をチェックhttp://pacificnwvacations.com/ ----それは、（CSSなし）

例のマークアップの完全な例についてdroppyプラグインのページ

<ul id="top-menu"> 
     <li>Home</li> 
     <li>Product</li> 
     <li>About</li> 
     <li><a href='#'>Services</a> 
      <ul> 
       <li>Sub item 1</li> 
       <li>Sub item 2</li> 
      </ul> 
     </li> 
    <ul> 



<script type='text/javascript'> 
     $(function() { 
     $('#top-menu').droppy(); 
     }); 
</script> 

チェックアウトは柔軟ですCSSを含む。