在網站后臺管理中，分類導航管理面板是一個非常重要的組件。它可以幫助管理員快速地瀏覽和管理各種內容，例如文章、用戶和設置等。在本文中，我們將使用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框架模板，幫助用戶快速瀏覽和管理各種內容。