怎么使用CSS和Java來構(gòu)建管理儀表盤布局

這篇文章主要介紹了怎么使用CSS和Java來構(gòu)建管理儀表盤布局，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

您將要?jiǎng)?chuàng)造的

在這個(gè)新教程中，我們將使用CSS和JavaScript來創(chuàng)建響應(yīng)式管理儀表板布局。 要構(gòu)建它，我們將從WordPress儀表板中借鑒一些想法，例如其可折疊的側(cè)邊欄菜單。

在整個(gè)教程中，我們將面臨許多挑戰(zhàn)，但是這些挑戰(zhàn)將為我們提供良好的實(shí)踐技巧，以提高我們的前端技能。

事不宜遲，讓我們看一下最終的管理儀表板演示（單擊側(cè)邊欄底部的“ 折疊”按鈕以查看可折疊的導(dǎo)航功能，并查看全屏版本以發(fā)揮其響應(yīng)能力）：

1.從頁面標(biāo)記開始

要開始標(biāo)記，我們需要一個(gè)SVG，一個(gè)標(biāo)題和一個(gè)部分：

<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<section class="page-content">...</section>

SVG精靈

您可能會(huì)想到，在任何管理控制臺(tái)中，我們都需要一堆圖標(biāo)。 值得慶幸的是， Envato Elements提供了越來越多的有用矢量圖標(biāo)集合，因此，讓我們利用該庫并下載這些Trade和Dashboard Icons 。

Envato元素上的貿(mào)易和儀表板圖標(biāo)

與其通過img或svg標(biāo)簽將它們直接包含在頁面中，不如讓我們更進(jìn)一步以創(chuàng)建SVG精靈。 為此，我們將所有圖標(biāo)包裝在SVG容器中。 該容器應(yīng)該是隱藏的，因此我們將對(duì)其應(yīng)用display: none 。 如果我們不隱藏它，則頁面頂部會(huì)出現(xiàn)一個(gè)很大的空白區(qū)域。

每個(gè)圖標(biāo)將放置在具有唯一ID和viewBox屬性的symbol元素內(nèi)，該屬性取決于圖標(biāo)的大小。 然后，只要需要，我們就可以通過調(diào)用use元素來呈現(xiàn)目標(biāo)圖標(biāo)（我將在稍后展示給您看）。

現(xiàn)在，讓我們熟悉SVG Sprite所需的標(biāo)記：

<svg style="display:none;">
  <symbol id="down" viewBox="0 0 16 16">
    <polygon points="3.81 4.38 8 8.57 12.19 4.38 13.71 5.91 8 11.62 2.29 5.91 3.81 4.38" />
  </symbol>
  <symbol id="users" viewBox="0 0 16 16">
    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,15a7,7,0,0,1-5.19-2.32,2.71,2.71,0,0,1,1.7-1,13.11,13.11,0,0,0,1.29-.28,2.32,2.32,0,0,0,.94-.34,1.17,1.17,0,0,0-.27-.7h0A3.61,3.61,0,0,1,5.15,7.49,3.18,3.18,0,0,1,8,4.07a3.18,3.18,0,0,1,2.86,3.42,3.6,3.6,0,0,1-1.32,2.88h0a1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,.93.31,10.81,10.81,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,1,8,15Z" /> 
  </symbol>
  
  <!-- more symbols here -->
</svg>

實(shí)際上，這就是我們創(chuàng)建內(nèi)置SVG Sprite所需的全部。

標(biāo)頭

繼續(xù)我們的管理儀表板布局，讓我們看一下頁面標(biāo)題。

在其中，我們將定義一個(gè)nav元素，它將用作以下元素的包裝：

• 徽標(biāo)

• 折疊按鈕，將在移動(dòng)屏幕上切換菜單

• 菜單本身將包含菜單鏈接，兩個(gè)標(biāo)題以及折疊/展開按鈕。 從語義上來說，擁有兩個(gè)單獨(dú)的菜單并將標(biāo)題放在它們外面可能更正確，但是如果您愿意，可以采用不同的方法。

這是寬屏（> 767px）上的樣子：

標(biāo)頭結(jié)構(gòu)：

<header class="page-header">
  <nav>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="open menu">
      <svg width="20" height="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h4>Admin</h4>
      </li>
      <li>
        <a href="#0">
          <svg>
            <use xlink:href="#pages"></use>
          </svg>
          <span>Pages</span>
        </a>
      </li>
      
      <!-- more list items here -->
      
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="collapse menu">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span>Collapse</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

注意上面的代碼中的兩件事：

• 我們?nèi)绾问褂?code class="inline">use元素引用目標(biāo)圖標(biāo)。

• 我們添加到切換按鈕的ARIA屬性（ aria-expanded ， aria-label ， aria-hidden ）。 這些屬性將幫助我們使組件更易于訪問。 稍后，我們將討論如何根據(jù)按鈕的狀態(tài)更新其值。

部分

該部分將包含兩個(gè)嵌套部分。

第1節(jié)

在第一部分的內(nèi)部，我們將放置搜索表單和一些有關(guān)當(dāng)前登錄用戶的信息（名稱，頭像和通知）。

這是它在寬屏（> 767px）上的外觀：

部分結(jié)構(gòu)：

<section class="search-and-user">
  <form>
    <input type="search" placeholder="Search Pages...">
    <button type="submit" aria-label="submit form">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </form>
  <div class="admin-profile">
    <span class="greeting">...</span>
    <div class="notifications">
      <span class="badge">...</span>
      <svg>
        <use xlink:href="#users"></use>
      </svg>
    </div>
  </div>
</section>

同樣，請(qǐng)注意，我們向提交按鈕添加了一些ARIA屬性。

第2節(jié)

在第二部分中，僅是為了使演示中充實(shí)一些虛擬內(nèi)容，我們將放置一堆文章占位符。 這些通?？赡馨砀駭?shù)據(jù)，圖表或某種形式的提要。

“最多使用5–7個(gè)不同的小部件來創(chuàng)建視圖。 否則，用戶將很難集中精力并獲得清晰的概覽?！?– 塔拉斯Bakusevych

這是它在寬屏（> 767px）上的外觀：

根據(jù)UX最佳實(shí)踐，您可能不需要這么多部分

部分結(jié)構(gòu)：

<section class="page-content">
  <section class="grid">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</section>

2.定義一些基本樣式

準(zhǔn)備好我們的管理控制臺(tái)標(biāo)記后，我們將繼續(xù)使用CSS。 與往常一樣，第一步是指定一些CSS變量和常見的重置樣式：
 

:root {
  --page-header-bgColor: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txtColor: #dde9f8;
  --page-header-headingColor: #7889a4;
  --page-header-width: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txtColor: #171616;
  --page-content-blockColor: #fff;
  --white: #fff;
  --black: #333;
  --blue: #00b9eb;
  --red: #ec1848;
  --border-radius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
ul {
  list-style: none;
}
 
a,
button {
  color: inherit;
}
 
a {
  text-decoration: none;
}
 
button {
  background: none;
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
}
 
svg {
  display: block;
}
 
body {
  font: 16px/1.5 "Lato", sans-serif;
}

注意 ：為簡(jiǎn)單起見，我不會(huì)逐步學(xué)習(xí)本教程中的所有 CSS規(guī)則。 這里有將近400行CSS。 如果需要，可以通過單擊演示項(xiàng)目的CSS選項(xiàng)卡將其全部選中。

3.定義主儀表板樣式

至此，我們準(zhǔn)備專注于頁面樣式。

設(shè)置標(biāo)題

標(biāo)頭將是固定位置元素。 其寬度將為220px，其高度等于視口高度。 如果其內(nèi)容超過視口高度，則將顯示一個(gè)垂直滾動(dòng)條。

nav元素的行為將是高度至少為100％的flex容器。 請(qǐng)記住，它的直接子對(duì)象是三個(gè)：

徽標(biāo) 移動(dòng)菜單切換按鈕， 和菜單。

切換按鈕僅在小屏幕（<768px）上可見。 這是我們需要的樣式：

/*CUSTOM VARIABLES HERE*/
 
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-top: 20px;
  width: var(--page-header-width);
  color: var(--page-header-txtColor);
  background: var(--page-header-bgColor);
}
 
.page-header nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
.page-header .toggle-mob-menu {
  display: none;
}

提示：如果您希望覆蓋整個(gè)頁面高度的絕對(duì)定位頁眉，請(qǐng)?zhí)砑右韵聵邮剑?/p>

body {
  position: relative;
}
 
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  
  /*Comment these styles*/
  /*position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;*/
}

菜單樣式

菜單將用作flex容器，我們將為其指定flex: 1 ，以便其展開并覆蓋整個(gè)父級(jí)高度。

最后一個(gè)菜單項(xiàng)將被設(shè)置為margin-top: auto因?yàn)樗鼞?yīng)該位于菜單的最底部。 當(dāng)標(biāo)題滾動(dòng)條不出現(xiàn)時(shí)，此行為將更加清楚。 要對(duì)其進(jìn)行測(cè)試，請(qǐng)嘗試刪除一些菜單項(xiàng)，或在高屏幕上查看演示。

菜單中的鏈接和按鈕也將充當(dāng)彈性容器，其內(nèi)容（文本和圖標(biāo)）應(yīng)垂直對(duì)齊。

與其他菜單元素相比，菜單標(biāo)題要小一些。 此外，我們將增加其字符之間的間距。

這是菜單樣式的一部分：

/*CUSTOM VARIABLES HERE*/
 
.page-header .admin-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 35px;
}
 
.page-header .admin-menu li:last-child {
  margin-top: auto;
  margin-bottom: 20px;
}
 
.page-header .admin-menu li > * {
  width: 100%;
  padding: 12px 15px;
}
 
.page-header .admin-menu a,
.page-header .admin-menu button {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
 
.page-header .admin-menu .menu-heading h4 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  margin-top: 12px;
  color: var(--page-header-headingColor);
}

頁面內(nèi)容樣式

請(qǐng)記住， .page-content部分包含兩個(gè)子部分。

此部分將放置在距視口左側(cè)220px的位置。 另外，我們將其width: calc(100% - 220px) 。 請(qǐng)注意，它的left屬性值等于標(biāo)題寬度。
 

其樣式：

/*CUSTOM VARIABLES HERE*/
 
.page-content {
  position: relative;
  left: var(--page-header-width);
  width: calc(100% - var(--page-header-width));
  min-height: 100vh;
  padding: 30px;
  color: var(--page-content-txtColor);
  background: var(--page-content-bgColor);
}

搜索和用戶樣式

另外，請(qǐng)記住， .search-and-user部分包含兩個(gè)元素：搜索表單和.admin-profile 。
 

為了進(jìn)行布局，我們將使用CSS Grid。 搜索表單將覆蓋全部可用空間，并且與其兄弟姐妹之間會(huì)有50px的間距。 兩個(gè)兄弟將垂直對(duì)齊。

表單內(nèi)的提交按鈕將處于絕對(duì)位置。 它只會(huì)包含一個(gè)裝飾性圖標(biāo)，因此我們需要一個(gè)ARIA屬性，以允許屏幕閱讀器對(duì)其進(jìn)行解釋并使其可訪問。

包含兩個(gè)元素的.admin-profile將充當(dāng)具有垂直居中內(nèi)容的flex容器。 badge（counter）元素將以水平和垂直居中的內(nèi)容絕對(duì)定位在其父對(duì)象內(nèi)部。

這是此部分所需樣式的一部分：

/*CUSTOM VARIABLES HERE*/
 
.search-and-user {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 50px;
  align-items: center;
  background: var(--page-content-bgColor);
  margin-bottom: 30px;
}
 
.search-and-user form {
  position: relative;
}
 
.search-and-user form button {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
 
.search-and-user .admin-profile {
  display: flex;
  align-items: center;
}
 
.search-and-user .admin-profile .notifications {
  position: relative;
}
 
.search-and-user .admin-profile .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--white);
  background: var(--red);
}

網(wǎng)格樣式
 

要在我們的管理儀表板上布置文章，我們將利用CSS網(wǎng)格。 我們將為所有文章提供300px的固定高度。 除了第一篇和最后一篇文章將覆蓋整個(gè)父寬度，其他所有文章都將成為兩列布局的一部分。

關(guān)聯(lián)的樣式：
 

/*CUSTOM VARIABLES HERE*/
 
.page-content .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}
 
.page-content .grid > article {
  display: flex;
  height: 300px;
  background: var(--page-content-blockColor);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
 
.page-content .grid > article:first-child,
.page-content .grid > article:last-child {
  grid-column: 1 / -1;
}

4.切換標(biāo)題

每次我們單擊折疊/展開按鈕時(shí)，標(biāo)題狀態(tài)都會(huì)改變。 如果展開，它將折疊（僅保留菜單項(xiàng)的圖標(biāo)變體），反之亦然。

請(qǐng)記住，此功能僅在大于767px的屏幕上可用。 對(duì)于較小的屏幕，標(biāo)題將具有不同的布局，稍后我們將介紹。

在標(biāo)頭處于折疊狀態(tài)時(shí)，主體接收collapsed類。 到那時(shí)，發(fā)生了以下事情：

• 標(biāo)題縮小。 其寬度從220px變?yōu)?0px。

• 響應(yīng)于此， .page-content節(jié)增大。 具體來說，其寬度從width: calc(100% - 220px)變?yōu)?code class="inline">width: calc(100% - 40px) 。 此外，其left屬性值變?yōu)?0px而不是220px。

• 徽標(biāo)，菜單標(biāo)題，菜單鏈接文本和菜單按鈕文本消失。

• 切換按鈕的aria-expanded和aria-label屬性值已更新。 另外，其圖標(biāo)旋轉(zhuǎn)了180度，因此看起來像是展開圖標(biāo)。

這是實(shí)現(xiàn)此功能JavaScript代碼：

const body = document.body;
const collapseBtn = document.querySelector(".admin-menu button");
const collapsedClass = "collapsed";
 
collapseBtn.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "collapse menu"
    ? this.setAttribute("aria-label", "expand menu")
    : this.setAttribute("aria-label", "collapse menu");
  body.classList.toggle(collapsedClass);
});

以及所有相關(guān)的樣式：

/*CUSTOM VARIABLES HERE*/
 
@media screen and (min-width: 768px) {
  .collapsed .page-header {
    width: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    padding: 10px;
  }
 
  .collapsed .page-header .logo,
  .collapsed .page-header .admin-menu span,
  .collapsed .page-header .admin-menu .menu-heading {
    display: none;
  }
 
  .collapsed .page-header .admin-menu svg {
    margin-right: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    transform: rotate(180deg);
  }
 
  .collapsed .page-content {
    left: 40px;
    width: calc(100% - 40px);
  }
}

5.在管理菜單項(xiàng)上顯示工具提示

現(xiàn)在，讓我們更進(jìn)一步，并向可折疊標(biāo)頭添加另一個(gè)新功能。

如前一節(jié)所述，當(dāng)標(biāo)題折疊時(shí)，菜單鏈接的文本將消失。 這意味著到那時(shí)，僅SVG圖標(biāo)將可見。 因此，讓我們顯示一個(gè)工具提示，使用戶可以更好地了解每個(gè)鏈接的作用。

為此，每次將菜單鏈接（圖標(biāo)）懸停在上方時(shí)，我們都會(huì)向其添加title屬性，其值為純文本。 但是同樣，僅當(dāng)標(biāo)題折疊且窗口寬度至少為768px時(shí)，才應(yīng)該發(fā)生這種情況。

以下是相應(yīng)JavaScript：

const body = document.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const collapsedClass = "collapsed";
 
for (const link of menuLinks) {
  link.addEventListener("mouseenter", function() {
    body.classList.contains(collapsedClass) &&
    window.matchMedia("(min-width: 768px)").matches
      ? this.setAttribute("title", this.textContent)
      : this.removeAttribute("title");
  });
}

6.積極響應(yīng)

在寬達(dá)767像素的屏幕上，我們的頁面如下所示：

這與我們的側(cè)邊欄安排有很大的不同，對(duì)吧？ 讓我們重點(diǎn)介紹與臺(tái)式機(jī)版本相比最重要的區(qū)別：

• 標(biāo)頭和.page-content都具有position: static ， width: 100% 。

• nav元素的伸縮方向從column更改為row 。

• 移動(dòng)菜單切換按鈕變?yōu)榭梢姟?/p>

• 菜單絕對(duì)位于標(biāo)題下方，并且最初是隱藏的。 每次我們點(diǎn)擊切換按鈕時(shí)，它就會(huì)變得可見。

• 折疊/展開按鈕和.greeting元素被隱藏。

• .search-and-user部分絕對(duì)位于移動(dòng)菜單切換按鈕的旁邊。

在下面，您可以看到部分響應(yīng)式樣式：

@media screen and (max-width: 767px) {
  .page-header,
  .page-content {
    position: static;
    width: 100%;
  }
 
  .page-header nav {
    flex-direction: row;
  }
 
  .page-header .toggle-mob-menu {
    display: block;
  }
 
  .page-header .admin-menu {
    position: absolute;
    left: 98px;
    top: 57px;
    margin-top: 0;
    z-index: 2;
    border-radius: var(--border-radius);
    background: var(--page-header-bgColor);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s;
  }
  
  .page-header .admin-menu li:last-child,
  .search-and-user .admin-profile .greeting {
    display: none;
  }
 
  .search-and-user {
    position: absolute;
    left: 131px;
    top: 10px;
    padding: 0;
    grid-column-gap: 5px;
    width: calc(100% - 141px);
    border-radius: var(--border-radius);
    background: transparent;
  }
}

7.切換手機(jī)菜單

每次單擊切換按鈕時(shí)，菜單狀態(tài)都會(huì)改變。 如果擴(kuò)展，它將崩潰，反之亦然。

在菜單的展開狀態(tài)下，主體將接受生物mob-menu-opened類。 到那時(shí)，發(fā)生了以下事情：

• 出現(xiàn)菜單。

• 切換按鈕的aria-expanded和aria-label屬性值已更新。 另外，其圖標(biāo)旋轉(zhuǎn)了180度，因此看起來像是展開圖標(biāo)。

這是必需JavaScript代碼：

const body = document.body;
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
 
toggleMobileMenu.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "open menu"
    ? this.setAttribute("aria-label", "close menu")
    : this.setAttribute("aria-label", "open menu");
  body.classList.toggle("mob-menu-opened");
});

以及相關(guān)CSS：

.page-header .toggle-mob-menu svg {
  transition: transform 0.2s;
}
 
.page-header .admin-menu {
  transition: all 0.2s;
}
 
.mob-menu-opened .toggle-mob-menu svg {
  transform: rotate(180deg);
}
 
.mob-menu-opened .page-header .admin-menu {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用CSS和Java來構(gòu)建管理儀表盤布局”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!