在网站后台管理中,分类导航管理面板是一个非常重要的组件。它可以帮助管理员快速地浏览和管理各种内容,例如文章、用户和设置等。在本文中,我们将使用CSS3来制作一个黑色实用的左侧分类导航管理面板,带有图标文字竖直导航菜单UI布局。

HTML结构

我们需要定义HTML结构。我们需要一个包含所有导航项的ul列表。每个导航项都有一个图标和一个描述文本。我们还需要一个标题区域,显示面板名称或品牌logo。

<div class="sidebar">
  <div class="sidebar-header">
    <!-- 品牌logo或面板名称 -->
  </div>
  <ul class="sidebar-menu">
    <li>
      <a href="#">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-user"></i>
        <span>用户管理</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-cog"></i>
        <span>系统设置</span>
      </a>
    </li>
    <!-- 其他导航项 -->
  </ul>
</div>

CSS样式

我们需要为这些元素添加CSS样式。我们将使用Flexbox布局来创建一个响应式的导航面板,使它适用于各种不同大小的设备。

整体样式

让我们先定义一些整体样式。我们将为面板添加一个深色背景,并设置文本颜色和字体样式。

.sidebar {
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
}

标题样式

我们需要定义标题区域的样式。我们将在此处添加品牌logo或面板名称。我们还将使用Flexbox布局使其水平和垂直居中。

.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  /* 添加品牌logo或面板名称的样式 */
}

导航项样式

我们需要定义导航项的样式。每个导航项都包括一个图标和一个描述文本。我们将使用Flexbox布局使其水平排列。我们还将为文本添加一些间距和字体大小。

.sidebar-menu li {
  display: flex;
  align-items: center;
  padding: 10px;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  margin-left: 10px;
}

.sidebar-menu li a:hover {
  color: #f1c40f; /* 鼠标悬停时更改文本颜色 */
}

.sidebar-menu li a i {
  font-size: 20px;
  padding-right: 10px;
}

响应式样式

我们需要添加一些响应式样式,以便在不同大小的设备上正确显示面板。我们将使用媒体查询来更改导航项的排列方式,并隐藏品牌logo或面板名称。

@media screen and (max-width: 768px) {
  .sidebar {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    /* 移动设备上默认隐藏面板 */
  }
  
  .sidebar-header {
    display: none;
  }
  
  .sidebar-menu {
	flex-direction: column;
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	background-color: #2c3e50;
  }

JavaScript交互

我们可以添加一些JavaScript代码,以使导航面板在移动设备上显示和隐藏。我们将为菜单按钮添加一个事件监听器,并在按钮被点击时显示或隐藏面板。

<button class="menu-toggle">
  <i class="fa fa-bars"></i>
</button>
.menu-toggle {
  display: none;
  /* 移动设备上默认隐藏菜单按钮 */
}

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99999;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

menuToggle.addEventListener('click', function() {
  sidebar.classList.toggle('active');
});

当用户单击菜单按钮时,导航面板将显示或隐藏,使其更适用于移动设备。

结论

在本文中,我们使用CSS3创建了一个黑色实用的左侧分类导航管理面板,并添加了图标文字竖直导航菜单UI布局。我们还使用JavaScript添加了一些交互效果,使面板能够在移动设备上显示和隐藏。此面板可用于网站后台管理UI框架模板,帮助用户快速浏览和管理各种内容。