您的位置：首页 > Web前端 > JQuery

JQuery网页下拉菜单效果

2010-11-03 14:41 127 查看

效果如下：

（图一）

（图二）

主要代码：

<mce:script src="jquery-1.4.3.js" mce_src="jquery-1.4.3.js"></mce:script>
<mce:script language="javascript"><!--
  $(document).ready(function(){ 
	  var i;
	  //($("div").children("ul").length/2)
	  for(i=1;i<=5;i++)//------加载样式
	  { 
	     var main='#list';
	     var secand='#m'
		 var tem;
	     main=main+i;
		 secand=secand+i;
		 tem=secand;
		 secand=secand+' > li';
		 $(main).addClass('list');
		 $(tem).addClass('ul-view');
	     $(secand).addClass('list-contnet');	
	  }	  
		  
	$('.list').hover(function(event){ //--------------------最上层列表事件
		    var temp=this.id;
			temp='#'+temp+' > ul';
			$(this).addClass('butea');
		  // $(temp).removeClass('ul-view').addClass('ul-open')//没有任何效果的
		   $(temp).show('fast')
		   },//function(){$('.ul-open').removeClass('ul-open').addClass('ul-view')});//没有任何效果的 
		   function(event){var temp=this.id;
			temp='#'+temp+' > ul';
			$(this).removeClass('butea');
			$(temp).hide('fast')}); 
		  	 //-----------------------展开列表事件 
		   $('.list-contnet').hover(function(){
		   $(this).addClass('list-over')
		   },function(){$('li').removeClass('list-over')});
	 });
// --></mce:script>
</head>

<body>
<div id="menu">
   <ul >
      <li id="list1">menu1
        <ul id="m1">
           <li ><span>1.0</span></li>
           <li><span>1.1</span></li>
           <li><span>1.2</span></li>           
        </ul>     
      </li>
   </ul>
   <ul >
      <li id="list2">menu2
        <ul id="m2">
           <li><span><a href="#" mce_href="#">2.0</a></span></li>
           <li><span>2.1</span></li>
           <li><span>2.2</span></li> 
           <li><span>2.3</span></li>           
        </ul>     
      </li>
   </ul>
   <ul >
      <li id="list3">menu3
        <ul id="m3">
           <li><span>3.0</span></li>
           <li><span>3.1</span></li>
           <li><span>3.2</span></li> 
           <li><span>3.3</span></li>
           <li><span>3.4</span></li>            
        </ul>     
      </li>
   </ul>
   <ul >
      <li id="list4">menu4
        <ul id="m4">
           <li><span>4.0</span></li>
           <li><span>4.1</span></li>
           <li><span>4.2</span></li>           
        </ul>     
      </li>
   </ul>
   <ul >
      <li id="list5">menu5
        <ul id="m5">
           <li><span>5.0</span></li>
           <li><span>5.1</span></li>
           <li><span>5.2</span></li>           
        </ul>     
      </li>
   </ul>
</div><br><br><div>
<strong>This is a test example!</strong></div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航