A_Fann 2021-03-27 14:40 采纳率: 90.9%
浏览 81
已采纳

请问一下，怎么做到dnf官网导航栏的效果？

请问一下，dnf官网的导航栏的效果怎么实现

 上图是鼠标没有移到导航栏的状态

上图是鼠标移进去后会显示所有的二级导航菜单，当移到二级导航菜单后，对应的主导航就会改变样式，这个怎么实现啊，谢谢各位了

  • 写回答

3条回答 默认 最新

  • Kyle_Ping 2021-03-27 17:00
    关注

    使用css伪元素“:hover”、“:before”和js事件可以实现你想要的效果。

    粗略帮你写了一个

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单</title>
		<style type="text/css">
			body {
				/* backgrounsd-image: url("//ossweb-img.qq.com/upload/adw/image/23/20210324/7b72078494d82925ea4cdf57bb93fddb.jpeg"); */
				background-position: center 0;
				background-color: #000000;
			}

			ul {
				list-style: none;
				padding-left: 0;
			}

			li {
				color: #ffffff;
				cursor: pointer;
			}

			li:hover {
				color: #ec4828;
			}

			div.menu-head {
				margin-left: 263px;
			}

			ul.menu {
				display: flex;
			}

			ul.menu li {
				display: inline-block;
				width: 137px;
				height: 50px;
				padding-top: 30px;
				text-align: center;
				position: relative;
				overflow: hidden;
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				font-size: 17px;
			}

			ul.menu li::before {
				content: "";
				position: absolute;
				z-index: 1;
				left: 51%;
				right: 51%;
				bottom: 2px;
				background: #ec4828;
				height: 4px;
				-webkit-transition-property: left, right;
				transition-property: left, right;
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}
			
			ul.menu li:hover::before,
			ul.menu li.cur:before {
				left: 10px;
				right: 10px;
			}

			.menu-drom-items {
				position: absolute;
				left: 0;
				top: 75px;
				/* height: 185px; */
				width: 100%;
				z-index: 1;
				display: none;
			}

			.menu-drom-items .inner {
				width: 1000px;
				padding-top: 15px;
				/* height: 225px; */
				margin-left: 270px;
				position: relative;
			}

			.menu-drom-items .inner>ul {
				width: 137px;
				float: left;
				text-align: center
			}

			.menu-drom-items li {
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="menu-head">
			<ul class="menu">
				<li>
					首页
				</li>
				<li>
					活动
				</li>
			</ul>
		</div>
		<div class="menu-drom-items">
			<div class="inner">
				<ul>
					<li>新闻公告</li>
					<li>版本专题</li>
				</ul>
				<ul>
					<li>官方活动</li>
					<li>合作活动</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="./jquery.min.js"></script>
	<script type="text/javascript">
		$("ul.menu li").on('mouseenter', function(index) {
			$(".menu-drom-items").show();
		});
		$("ul.menu li").on('mouseleave', function(index) {
			$(".menu-drom-items").hide();
		});
		$(".menu-drom-items").on('mouseenter', function(index) {
			$(".menu-drom-items").show();
		});
		$(".menu-drom-items").on('mouseleave', function(index) {
			$(".menu-drom-items").hide();
		});
		$(".menu-drom-items ul").on('mouseenter',function(index) {
			var index = $(this).index();
			removeCur();
			$($("ul.menu li")[index]).addClass("cur");
		});
		$(".menu-drom-items").on('mouseleave', function(index) {
			removeCur();
		});
		
		function removeCur() {
			$("ul.menu li").each(function (){
				if($(this).hasClass("cur")) {
					$(this).removeClass("cur");
				}
			});
		}
	</script>
</html>

    下面是效果

    仿dnf菜单效果

     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 远程桌面文档内容复制粘贴，格式会变化
  • ¥15 关于#java#的问题：找一份能快速看完mooc视频的代码
  • ¥15 这种微信登录授权 谁可以做啊
  • ¥15 请问我该如何添加自己的数据去运行蚁群算法代码
  • ¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”
  • ¥15 网络设备配置与管理这个该怎么弄
  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题