jQuery 实现水平菜单下拉功能

jQuery 实现水平菜单下拉功能_第1张图片
横向菜单栏下拉菜单.gif

实现思路

  • 写一个横向导航条
  • 在导航条的每个块里面添加下拉文本
  • 下拉内容display:none;
  • slideDown/slideUp实现下拉功能

直接上源代码:

 
 
 
    
    dropdown menu
    
 
 
    
    
    
 
 

需要注意的几点:

  1. 下拉菜单和导航条之间有间隔。dropdown绝对定位。
  2. 因为导航条和下拉菜单之间有空隙。当鼠标移动去下拉菜单,下拉菜单已经消失。解决办法,中间加个盒子,实现过度。

你可能感兴趣的:(jQuery 实现水平菜单下拉功能)