CSS 实现伸缩导航仪表板侧边栏菜单

这篇文章距离上次修改已过285天，其中的内容可能已经有所变动。

以下是一个简化的代码实例，展示了如何使用CSS创建一个伸缩导航仪表板侧边栏菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stretchy Navigation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .navigation {
    background-color: #333;
    overflow: hidden;
    height: 100%;
    width: 200px; /* Set the width of the sidebar */
    position: sticky; /* Stick the sidebar at the top of the user's screen when scrolling */
    top: 0;
    transition: width 0.5s; /* Add a transition effect when menu is toggled */
  }
 
  .navigation .menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
 
  .navigation .menu li {
    padding: 8px 16px;
    text-align: left;
    display: block;
  }
 
  .navigation .menu li:hover {
    background-color: #555;
    color: white;
  }
 
  .navigation .banner {
    color: white;
    padding: 16px;
    background-color: #4CAF50;
    text-align: center;
  }
 
  /* When the screen is less than 600px wide, hide all list items, except for the first one ("Home"). Show the list item that contains the "toggle" button */
  @media screen and (max-width: 600px) {
    .navigation .menu li {
      display: none;
    }
    .navigation .menu li.active {
      display: block;
    }
  }
 
  /* When the list item is clicked, add the "active" class to it and slide the navigation bar */
  .navigation .menu li.active .icon {
    visibility: hidden;
  }
 
  .navigation.toggled {
    width: 80px; /* Set the collapsed width of the sidebar */
  }
 
  .navigation.toggled .menu li {
    display: block;
  }
</style>
</head>
<body>
 
<div class="navigation">
  <div class="banner">Logo</div>
  <ul class="menu">
    <li class="active"><a href="#home" class="icon-home">Home</a></li>
    <li><a href="#news" class="icon-news">News</a></li>
    <li><a href="#contact" class="icon-contact">Contact</a></li>
    <li><a href="#about" class="icon-about">About</a></li>
    <li class="toggle">
      <a href="#" onclick="toggleMenu();">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </li>
  </ul>
</div>
 
<script>
  function toggleMenu() {
    var navigation = document.querySelector('.navigation');
    navigation.classList.toggle('toggled');
  }
</script>
 
</bod

CSS 实现伸缩导航仪表板侧边栏菜单

评论已关闭

推荐阅读