一个简单的二级菜单

最新推荐文章于 2021-06-03 02:04:42 发布

临渊仙

最新推荐文章于 2021-06-03 02:04:42 发布

阅读量964

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript jquery css

本文链接：https://blog.youkuaiyun.com/lcf201314/article/details/11518779

本文介绍了一个使用 HTML、CSS 和 JavaScript 实现的下拉菜单栏效果，包括菜单栏的基本结构、样式设置及交互逻辑。通过 jQuery 库简化了 JavaScript 的编写，并实现了鼠标悬停时显示二级菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码部分：

<ul id="menubox">
	<li  class="menu_btn"> 
        <a href="/index.asp" class="lr_abtn">首页</a>
    </li>
	<li  class="menu_btn"> 
        <a href="/page/html/company.asp" class="lr_abtn">公司简介</a>
       
          <ul  class="sub_menu" >
             <li class="sub_mitem"><a href="/page/html/company.asp" target="_blank">公司简介</a>
              <ul class="sub_">
            		 <li><a href="/page/html/culture.asp"  >aaaaaaa</a></li>
            		 <li><a href="/page/html/technology.asp"  >bbbbb</a></li>
            		 <li><a href="/page/html/honor.asp" >ccccc</a></li>
            		 <li><a href="/page/html/display.asp"  >ddddd</a></li>
           		  <li><a href="/page/html/sales.asp"  >eeeee</a></li>
         		 </ul>
             </li>
             <li class="sub_mitem"><a href="/page/html/culture.asp" target="_blank">企业文化</a></li>
             <li class="sub_mitem"><a href="/page/html/technology.asp" target="_blank">技术力量</a></li>
             <li class="sub_mitem"><a href="/page/html/honor.asp" target="_blank">企业荣誉</a></li>
             <li class="sub_mitem"><a href="/page/html/display.asp" target="_blank">厂房设备</a></li>
             <li class="sub_mitem"><a href="/page/html/sales.asp" target="_blank">营销网络</a></li>
          </ul>
    </li>
</ul>

js部分：


// JavaScript Document
function stopPropagation(e) {
	
    e = e || window.event;
    if(e.stopPropagation) { //W3C阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}
$(document).ready(function(){
	//改变二级菜单列表的布局：距离左边为一级菜单列表项的宽度+1
	var li_width=$(".sub_menu li").width();
	$(".sub_").css("left",li_width);
	//以及菜单鼠标焦点响应
	var lr_systembtn = $(".menu_btn");
	lr_systembtn.mouseenter(function(event){
		
		stopPropagation(event);
	
		var e=$(this);
		e.children(".sub_menu").fadeIn("fast");
		
	});
	lr_systembtn.mouseleave(function(event){
		stopPropagation(event);
		var e=$(this);
		e.children(".sub_menu").fadeOut("slow");
	});
	// 二级菜单鼠标焦点响应
	var sub_mitem = $(".sub_mitem");
	sub_mitem.mouseenter(function(){
		//设置二级菜单项的位置
	
		var e=$(this);
		
		
		e.children(".sub_").fadeIn("fast");
		
	});
	sub_mitem.mouseleave(function(){
		var e=$(this);
		e.children(".sub_").fadeOut("fast");
	});

});

css部分：


#menubox{position:relative; list-style:none; width:852px;height:29px;top:90px;left:180px; padding:0px; margin:0px; }
.menu_btn{ position:relative;float:left; display:block; width:70px; height:35px; margin-left:15px;z-index:100;}
.menu_btn .lr_abtn{ width:100%; height:35px; display:block; font-size:15px; font-weight:bold;color:white;}
.menu_btn .lr_abtn:hover{color:#333333;}

.sub_menu{ position:absolute;top:29px;width:auto; height:auto;padding:0;margin:0; z-index:100; border-left:#ACACAC solid 2px;position:absolute;display:none; border-right:#ACACAC solid 2px; border-bottom:#ACACAC solid 2px;
 background-color:white;}


.sub_menu li{ position:relative; padding:0px auto; display:block; margin-left:0px; margin:0px;border-bottom:#ACACAC dashed 1px; text-align:center; width:100px; height:35px;}
.sub_menu a{ text-decoration:none; text-align:center; display:block; width:auto; white-space:normal; height:35px; color:#666666;line-height:30px; font-size:14px;
}
.sub_menu a:hover{background-color:#E2E2E2; color:#333333; text-decoration:none;}

.sub_{position:absolute;left:0; margin:0;padding:0; top:0; display:none;  border-bottom:#ACACAC solid 2px; border-top:#ACACAC solid 2px;
 border-right:#ACACAC solid 2px;}
.sub_ li{background-color:white; margin:0px; width:auto; height:35px; display:block;}
.sub_ a {text-decoration:none; text-align:center; width:auto;display:block; color:#666666;height:30px; line-height:30px; font-size:14px;}
.sub_ a:hover{background-color:#E2E2E2; color:#333333; text-decoration:none;}

注意：需要引用jquery库！