如何创建侧边导航下拉菜单

2024-07-12 06:39| 来源: 网络整理| 查看: 265

/* 固定侧导航，全高 */ .sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px;}

/* 设置 sidenav 链接和下拉按钮的样式 */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width:100%; text-align: left; cursor: pointer; outline: none;}

/* 鼠标悬停 */ .sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1;}

/* 主要内容 */ .main { margin-left: 200px; /* 与 sidenav 的宽度相同 */ font-size: 20px; /* Increased text to enable scrolling */ padding: 0px 10px;}

/* 添加一个活动类到活动下拉按钮 */ .active { background-color: green; color: white;}

/* 下拉容器（默认隐藏）。可选:添加较浅的背景颜色和一些左侧填充以更改下拉内容的设计 */ .dropdown-container { display: none; background-color: #262626; padding-left: 8px;}

/* 可选:设置插入符号图标的样式 */ .fa-caret-down { float: right; padding-right: 8px;}

【本文地址】

公司简介

联系我们