菜单栏隐藏 | CSDN创作打卡_m0_56501706

网络 02-07 5908

1. 菜单栏隐藏页面效果

2. 设计思路

页面效果：默认状态下，菜单栏正常显示；当鼠标移入时，除了鼠标选中的菜单外，其他菜单虚化，达到突出选中菜单显示的效果。

技术实现：HTML 部分选用无序列表标签，并依次写入菜单名。CSS部分，实现这一动画效果，主要是利用文字透明度的变化。当鼠标移入时，由于使用的是无序列表，只要将 <ul> 标签的透明度降低，所有菜单栏文字的透明度都会随着降低，以达到文字虚化的效果；然后哦再使鼠标选中的文字的透明度恢复原先设置，就能实现突出选中文字显示的效果。

HTML 标签选择：

使用无序列表标签，并依次写入菜单名，选择无序列表主要是因为：其自带父子级标签，方便后面实现子标签单独显示。

<ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">案例</a></li> <li><a href="#">用户反馈</a></li> </ul>

CSS 样式设计思路：

首先，初始化窗口页面，去除浏览器自带的边框，并设置渐变背景色。

/* 初始化页面，去除边框 */ *{ margin:0; padding:0; } body{ /* 100%窗口高度 */ height:100vh; /* 渐变背景颜色 */ background:linear-gradient(#dad4ec,#f3e7e9); }

其次，设置列表样式，绝对定位，让元素水平垂直居中，并去除列表自带样式。

ul{ /* 绝对定位，元素水平垂直居中 */ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /* 弹性布局，去除边框 */ display:flex; margin:0; padding:0; } ul li{ /* 去除列表自带样式 */ list-style:none; /* 动画效果 */ transform:0.5s; }

然后，设置列表内的文字样式，加粗的 16px 大小字体。

ul li a { /* 相对定位 */ position: relative; /* 将行内标签转化为块级标签 */ display:block; /* 文字水平居中 */ text-align:center; /* 设置字体样式 */ margin:0 20px; color:#000000; font-size:16px; font-weight:bold; text-decoration:none; }

最后，设置文字虚化的动画效果。

/* 当鼠标移入整个列表时，列表所有子项透明度变成0.2 */ /* 鼠标移入某个子项时，该子项透明度再恢复成1 */ /* 这样就能实现菜单隐藏效果 */ /* 鼠标移入时，文字整体淡化 */ ul:hover li{ opacity:0.2; filter:blur(2px); } /* 鼠标移入单个菜单时，显示该菜单 */ ul li:hover{ opacity:1; filter:blur(0px); } 3. 完整代码

HTML 代码部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>隐藏菜单</title> <link href="1.css" rel="stylesheet" type="text/css"> </head> <body>  <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">案例</a></li> <li><a href="#">用户反馈</a></li> </ul> </body> </html>

CSS 代码部分：?

/* 初始化页面，去除边框 */ *{ margin:0; padding:0; } body{ /* 100%窗口高度 */ height:100vh; /* 渐变背景颜色 */ background:linear-gradient(#dad4ec,#f3e7e9); } ul{ /* 绝对定位，元素水平垂直居中 */ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /* 弹性布局，去除边框 */ display:flex; margin:0; padding:0; } ul li{ /* 去除列表自带样式 */ list-style:none; /* 动画效果 */ transform:0.5s; } ul li a { /* 相对定位 */ position: relative; /* 将行内标签转化为块级标签 */ display:block; /* 文字水平居中 */ text-align:center; /* 设置字体样式 */ margin:0 20px; color:#000000; font-size:16px; font-weight:bold; text-decoration:none; } /* 当鼠标移入整个列表时，列表所有子项透明度变成0.2 */ /* 鼠标移入某个子项时，该子项透明度再恢复成1 */ /* 这样就能实现菜单隐藏效果 */ /* 鼠标移入时，文字整体淡化 */ ul:hover li{ opacity:0.2; filter:blur(2px); } /* 鼠标移入单个菜单时，显示该菜单 */ ul li:hover{ opacity:1; filter:blur(0px); }