如何创建可悬停的侧面导航 |
您所在的位置：网站首页 › 侧边栏小窗 › 如何创建可悬停的侧面导航 |
|
/* 为 sidenav 内的链接设置样式 */
#mySidenav a { position: absolute;
/* 相对于浏览器窗口定位它们 */
left: -80px;
/* 将它们放在屏幕之外 */
transition: 0.3s;
/* 在悬停时添加过渡 */
padding: 15px;
/* 15px 内边距 */
width: 100px;
/* 设置特定宽度 */
text-decoration: none;
/* 删除下划线 */
font-size: 20px;
/* 增加字体大小 */
color: white;
/* 白色文本颜色 */
border-radius: 0 5px 5px 0;
/* 右上角和右下角的圆角 */
} #mySidenav a:hover { left: 0; /* 鼠标悬停时，使元素按应有的方式显示 */ } /* about 链接：距离顶部 20 像素，背景为绿色 */ #about { top: 20px; background-color: #4CAF50;} #blog { top: 80px; background-color: #2196F3; /* Blue */ } #projects { top: 140px; background-color: #f44336; /* Red */ } #contact { top: 200px; background-color: #555 /* 浅黑色 */ } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |