侧边栏菜单是用于垂直导航的组件。它可以通过使用简单的 HTML 和 CSS 进行定制和响应。要制作可折叠的侧边栏,您需要具备 HTML 和 CSS 知识来创建它。
示例:在本示例中,首先我们将使用 HTML 创建一个结构,然后我们将使用 CSS 装饰该结构。
-
HTML 文件:在这个文件中,我们将设计现代侧边导航栏的结构,这里我们不会使用任何一行 CSS。我们将在结构准备好后执行此操作。
HTML
CSS
/* Sidebar Div */ div { color: #fff; width: 250px; padding-left: 20px; height: 100vh; background-image: linear-gradient(30deg, #11cf4d, #055e21); border-top-right-radius: 90px; } /* Div header */ div h2 { padding: 40px 0 0 0; cursor: pointer; } /* Div links */ div a { font-size: 14px; color: #fff; display: block; padding: 12px; padding-left: 30px; text-decoration: none; outline: none; } /* Div link on hover */ div a:hover { color: #56ff38; background: #fff; position: relative; background-color: #fff; border-top-left-radius: 22px; border-bottom-left-radius: 22px; }
HTML
-
CSS 文件:此文件包含用于创建自定义动画侧边栏的所有 CSS 样式规则。该文件用于上述 HTML 代码。
CSS
/* Sidebar Div */ div { color: #fff; width: 250px; padding-left: 20px; height: 100vh; background-image: linear-gradient(30deg, #11cf4d, #055e21); border-top-right-radius: 90px; } /* Div header */ div h2 { padding: 40px 0 0 0; cursor: pointer; } /* Div links */ div a { font-size: 14px; color: #fff; display: block; padding: 12px; padding-left: 30px; text-decoration: none; outline: none; } /* Div link on hover */ div a:hover { color: #56ff38; background: #fff; position: relative; background-color: #fff; border-top-left-radius: 22px; border-bottom-left-radius: 22px; }
完整的解决方案:在这里我们将结合以上部分的 HTML 和 CSS 来创建一个完美的现代侧边栏菜单。
HTML
输出: