jquery实现对菜单下边框显示的控制

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取随机色</title> <script type="text/javascript" src=&qu

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>获取随机色</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<style>
		*{margin: 0;padding: 0}
		.top{width: 100%;height: 60px;background: black;}
		.logo{width: 140px;float: left;margin-right: 20px;}
		.logo img{width: 140px;height: 60px;}
		a{text-decoration:none; color:#D3D3D3;display: block;}
		li{list-style: none;}
		.nav_left{float: left;}
		.nav_left li{float: left;width: 96px;
		            margin:0 10px 0 10px;line-height: 55px;
		            font-size: 14px; 
		            font-family: Microsoft YaHei;
		            font-weight: 400;
		            text-align: center;border-bottom: 5px solid black;}
		.nav_left li:hover{

		    border-bottom: 5px solid #CDCDB4;
		}

		.circle{position: absolute;top: 15px;}
		.notice,.userbox{float:right;height: 60px;color:#D3D3D3;width: 60px;}
		.userbox{margin-right: 10px;}
		.userbox img{display:block;width: 28px;height: 28px;margin:16px 16px;border-radius:50%;}
		.notice{font-size: 20px;line-height: 60px;text-align: center;}
	</style>
</head>
<body>
    <div class="top">
        <div class="logo"><a href="index"><img src="images/logo.png" alt=""></a></div>
        <ul class="nav_left">
            <li style="width: 68px;background:rgba(255,255,255,0.2);border-bottom: 5px solid #CDCDB4;"><a href="">首页</a></li>
            <li><a href="">视频教程</a></li>
            <li><a href="">社区问答</a></li>
            <li><a href="">技术文章&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">编程词典&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">工具下载&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">特色课程&nbsp<i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></li>
            <li><a href="">菜鸟学堂</a></li>
        </ul>
        <div class="userbox">
            <a href=""><img src="images/avatar.jpg" alt=""></a>
        </div>
        <div class="notice"><a href=""><i class="fa fa-volume-up"></i><i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></div>
    </div>

</body>
<script>
	$('li').hover(
		function(){$('li:first').css('border-bottom-color','black');$(this).css('border-bottom-color','#CDCDB4');}
		,function(){$(this).css('border-bottom-color','black');$('li:first').css('border-bottom-color','#CDCDB4');}
		)
	
	
</script>
</html>

-----效果图-----

QQ截图20190414155059.png

思路：

1、与老师的布局不同，考虑到可调整性，采用了下边框的方式。

2、下边框的显示用了jquery的hover事件，当鼠标移上li时，先把第一个li(也即首页)的下边框设为黑色，把当前li的下边框颜色设为米白；当鼠标移出li时，先把当前li下边框变黑，再把首页下边框变米白。

Correcting teacher：天蓬老师Correction time：2019-04-14 21:44:30
Teacher's summary：布局只要遵循一定的原则即可, 细节之处, 每个人的处理方式都是不同的, 实现效果, 做对是第一位的, 然后再求优

jquery实现对菜单下边框显示的控制

Popular Entries