CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

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

<svg スタイル="display:none;">
  <シンボル id="下" ビューボックス="0 0 16 16">
    <ポリゴンポイント="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" />
  </シンボル>
  <シンボル id="ユーザー" ビューボックス="0 0 16 16">
    <PATH D = "M8,0A8,8,0,1,0,8,8,8,0,0,0,8,0zm8,15a7,7,0,1-5.19-2.32,2.71,2.71,0,0,0,1,1.7-133.11,1111111111111日.94-.34,17,1.17,0,0,0-.27-.7H0A3.61,3.61,0,0,5.15,7.49,3.18,3 1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,0,0,0,0,0,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,0,1,15Z " /> 
  </シンボル>
  
  <!-- ここにさらに記号 -->
</svg>

<ヘッダークラ​​ス="ページヘッダー">
  <ナビ>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="予測ロゴ">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="メニューを開く">
      <svg 幅="20" 高さ="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </ボタン>
    <ul class="admin-menu">
      <li class="メニュー見出し">
        <h3>管理者</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <xlink:href="#pages" を使用>
          </svg>
          <span>ページ</span>
        </a>
      </li>
      
      <!-- ここにリスト項目がさらにあります -->
      
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="メニューを折りたたむ">
          <svg aria-hidden="true">
            <xlink:href="#collapse" を使用>
          </svg>
          <span>折りたたむ</span>
        </ボタン>
      </li>
    </ul>
  </nav>
</ヘッダー>

<section class="検索とユーザー">
  <フォーム>
    <input type="search" placeholder="ページを検索...">
    <button type="submit" aria-label="フォームを送信">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </ボタン>
  </フォーム>
  <div class="管理者プロフィール">
    <span class="greeting">...</span>
    <div class="通知">
      <span class="badge">...</span>
      <svg>
        <xlink:href="#users" を使用></use>
      </svg>
    </div>
  </div>
</セクション>

<セクションクラス="ページコンテンツ">
  <セクションクラス="グリッド">
    <記事></記事>
    <記事></記事>
    <記事></記事>
    <記事></記事>
    <記事></記事>
    <記事></記事>
    <記事></記事>
    <記事></記事>
  </セクション>
</セクション>

：根 {
  --ページヘッダーの背景色: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txt色: #dde9f8;
  --ページヘッダーの見出し色: #7889a4;
  --ページヘッダー幅: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txt色: #171616;
  --page-content-blockColor: #fff;
  --白: #fff;
  --黒: #333;
  --青: #00b9eb;
  --赤: #ec1848;
  --border-radius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}
 
* {
  パディング: 0;
  マージン: 0;
  ボックスのサイズ: 境界線ボックス;
}
 
ul {
  リストスタイル: なし;
}
 
、
ボタン {
  色: 継承;
}
 
{
  テキスト装飾: なし;
}
 
ボタン {
  背景: なし;
  カーソル: ポインタ;
}
 
入力{
  -webkit-appearance: なし;
}
 
ボタン、
入力{
  境界線: なし;
}
 
svg {
  表示: ブロック;
}
 
体 {
  フォント: 16px/1.5 "Lato"、サンセリフ体;
}

/*カスタム変数はここに*/
 
.ページヘッダー{
  位置: 固定;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  オーバーフロー:自動;
  パディング上部: 20px;
  幅: var(--page-header-width);
  色: var(--page-header-txtColor);
  背景: var(--page-header-bgColor);
}
 
.ページヘッダーナビゲーション{
  ディスプレイ: フレックス;
  flex-direction: 列;
  最小高さ: 100%;
}
 
.page-header .toggle-mob-menu {
  表示: なし;
}

体 {
  位置: 相対的;
}
 
.ページヘッダー{
  位置: 絶対;
  上: 0;
  左: 0;
  高さ: 100%;
  
  /*これらのスタイルをコメント化します*/
  /*位置: 固定;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  オーバーフロー: 自動;*/
}

/*カスタム変数はここに*/
 
.ページヘッダー .管理者メニュー {
  ディスプレイ: フレックス;
  flex-direction: 列;
  フレックス成長: 1;
  上マージン: 35px;
}
 
.page-header .admin-menu li:last-child {
  上マージン: 自動;
  下マージン: 20px;
}
 
.page-header .admin-menu li > * {
  幅: 100%;
  パディング: 12px 15px;
}
 
.page-header .admin-menu a,
.page-header .admin-menu ボタン {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 0.9rem;
  遷移: 背景 0.2 秒、カラー 0.2 秒。
}
 
.ページヘッダー .管理者メニュー .メニュー見出し h3 {
  テキスト変換:大文字;
  文字間隔: 0.15em;
  フォントサイズ: 12px;
  上マージン: 12px;
  色: var(--page-header-headingColor);
}

/*カスタム変数はここに*/
 
.ページコンテンツ{
  位置: 相対的;
  左: var(--page-header-width);
  幅: calc(100% - var(--page-header-width));
  最小高さ: 100vh;
  パディング: 30px;
  色: var(--page-content-txtColor);
  背景: var(--page-content-bgColor);
}

/*カスタム変数はここに*/
 
.検索とユーザー{
  表示: グリッド;
  グリッドテンプレート列: 1fr 自動;
  グリッド列の間隔: 50px;
  アイテムの位置を中央揃えにします。
  背景: var(--page-content-bgColor);
  下部マージン: 30px;
}
 
.検索とユーザーフォーム {
  位置: 相対的;
}
 
.search-and-user フォーム ボタン {
  位置: 絶対;
  上位: 50%;
  右: 15px;
  変換: translateY(-50%);
}
 
.検索とユーザー .管理者プロファイル {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
 
.検索とユーザー .管理者プロファイル .通知 {
  位置: 相対的;
}
 
.検索とユーザー .管理者プロファイル .バッジ {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  位置: 絶対;
  上: -10px;
  右: -3px;
  幅: 18px;
  高さ: 18px;
  境界線の半径: 50%;
  フォントサイズ: 10px;
  色: var(--white);
  背景: var(--red);
}

/*カスタム変数はここに*/
 
.ページコンテンツ.グリッド{
  表示: グリッド;
  グリッドテンプレート列: repeat(2, 1fr);
  グリッドギャップ: 30px;
}
 
.page-content .grid > 記事 {
  ディスプレイ: フレックス;
  高さ: 300px;
  背景: var(--page-content-blockColor);
  境界線の半径: var(--border-radius);
  ボックスシャドウ: var(--box-shadow);
}
 
.page-content .grid > article:first-child,
.page-content .grid > article:last-child {
  グリッド列: 1 / -1;
}

定数 body = document.body;
const collapseBtn = document.querySelector(".admin-menu ボタン");
const 折りたたみクラス = "折りたたみ";
 
折り畳みボタン.addEventListener("クリック", 関数() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "メニューを折りたたむ"
    ? this.setAttribute("aria-label", "メニューを展開")
    : this.setAttribute("aria-label", "メニューを折りたたむ");
  body.classList.toggle(折りたたまれたクラス);
});

/*カスタム変数はここに*/
 
@media スクリーンと (最小幅: 768px) {
  .collapsed .page-header {
    幅: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    パディング: 10px;
  }
 
  .collapsed .page-header .logo,
  .collapsed .page-header .admin-menu span、
  .collapsed .page-header .admin-menu .menu-heading {
    表示: なし;
  }
 
  .collapsed .page-header .admin-menu svg {
    右マージン: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    変換: 回転(180度);
  }
 
  .collapsed .page-content {
    左: 40px;
    幅: calc(100% - 40px);
  }
}

定数 body = document.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const 折りたたみクラス = "折りたたみ";
 
for (const link of menuLinks) {
  link.addEventListener("mouseenter", 関数() {
    body.classList.contains(collapsedClass) &&
    window.matchMedia("(最小幅: 768px)").matches
      ? this.setAttribute("タイトル", this.textContent)
      : this.removeAttribute("タイトル");
  });
}

@media スクリーンと (最大幅: 767px) {
  .ページヘッダー、
  .ページコンテンツ{
    位置: 静的;
    幅: 100%;
  }
 
  .ページヘッダーナビゲーション{
    flex-direction: 行;
  }
 
  .page-header .toggle-mob-menu {
    表示: ブロック;
  }
 
  .ページヘッダー .管理者メニュー {
    位置: 絶対;
    左: 98px;
    上: 57px;
    上マージン: 0;
    zインデックス: 2;
    境界線の半径: var(--border-radius);
    背景: var(--page-header-bgColor);
    可視性: 非表示;
    不透明度: 0;
    変換: スケール(0.95);
    遷移: すべて 0.2 秒;
  }
  
  .page-header .admin-menu li:last-child,
  .検索とユーザー .管理者プロファイル .挨拶 {
    表示: なし;
  }
 
  .検索とユーザー{
    位置: 絶対;
    左: 131ピクセル;
    上: 10px;
    パディング: 0;
    グリッド列の間隔: 5px;
    幅: calc(100% - 141px);
    境界線の半径: var(--border-radius);
    背景: 透明;
  }
}

定数 body = document.body;
const トグルモバイルメニュー = document.querySelector(".toggle-mob-menu");
 
トグルモバイルメニュー.addEventListener("クリック", 関数() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "メニューを開く"
    ? this.setAttribute("aria-label", "メニューを閉じる")
    : this.setAttribute("aria-label", "メニューを開く");
  body.classList.toggle("mob-menu-opened");
});

.page-header .toggle-mob-menu svg {
  遷移: 変換 0.2 秒;
}
 
.ページヘッダー .管理者メニュー {
  遷移: すべて 0.2 秒;
}
 
.mob-menu-opened .toggle-mob-menu svg {
  変換: 回転(180度);
}
 
.mob-menu-opened .page-header .admin-menu {
  変換: スケール(1);
  可視性: 可視;
  不透明度: 1;
}