Beispielcode zum Erstellen eines Admin-Dashboard-Layouts mit CSS und JavaScript

Was Sie erstellen werden

In diesem neuen Tutorial verwenden wir CSS und JavaScript, um ein ansprechendes Admin-Dashboard-Layout zu erstellen. Um es zu erstellen, übernehmen wir einige Ideen aus dem WordPress-Dashboard, beispielsweise das einklappbare Seitenleistenmenü.

Während des gesamten Tutorials werden wir mit vielen Herausforderungen konfrontiert, aber diese Herausforderungen werden uns gute Praxistipps zur Verbesserung unserer Front-End-Kenntnisse liefern.

Lassen Sie uns ohne weitere Umschweife einen Blick auf die endgültige Demo des Admin-Dashboards werfen (klicken Sie unten in der Seitenleiste auf die Schaltfläche „ Reduzieren“ , um die Funktion zum Reduzieren der Navigation anzuzeigen, und zeigen Sie die Vollbildversion an, um ihre Reaktionsfähigkeit auszuprobieren):

1. Beginnen Sie mit der Seitenmarkierung

Um mit unserem Markup zu beginnen, benötigen wir ein SVG, einen Titel und einen Abschnitt:

<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<Abschnitt Klasse="Seiteninhalt">...</Abschnitt>

SVG-Sprites

Wie Sie sich vorstellen können, benötigen wir in jeder Verwaltungskonsole eine Reihe von Symbolen. Glücklicherweise bietet Envato Elements eine wachsende Sammlung nützlicher Vektorsymbole. Nutzen wir also diese Bibliothek und laden wir diese Handels- und Dashboard-Symbole herunter.

Anstatt sie über img oder svg -Tags direkt in die Seite einzubinden, gehen wir einen Schritt weiter und erstellen SVG-Sprites. Dazu packen wir alle Icons in einen SVG-Container. Dieser Container sollte ausgeblendet werden, daher wenden wir display: none darauf an. Wenn wir es nicht ausblenden, bleibt oben auf der Seite ein großer leerer Bereich.

Jedes Symbol wird in einem symbol mit einer eindeutigen ID und viewBox -Attribut platziert, das von der Größe des Symbols abhängt. Wir können das Zielsymbol dann bei Bedarf rendern, indem wir das use -Element aufrufen (das ich Ihnen gleich zeigen werde).

Machen wir uns nun mit dem für ein SVG-Sprite erforderlichen Markup vertraut:

<svg style="Anzeige: keine;">
  <symbol id="nach unten" 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="Benutzer" 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>
  
  <!-- weitere Symbole hier -->
</svg>

Tatsächlich ist dies alles, was wir zum Erstellen eines integrierten SVG-Sprites benötigen.

Kopfbereich

Fahren wir mit dem Layout unseres Admin-Dashboards fort und werfen wir einen Blick auf die Seitenkopfzeile.

Darin definieren wir ein nav , das als Wrapper für die folgenden Elemente fungiert:

• Logo
• Schaltfläche „Minimieren“ : schaltet das Menü auf mobilen Bildschirmen um
• Das Menü selbst enthält den Menülink, zwei Überschriften und die Schaltflächen zum Reduzieren/Erweitern. Semantisch gesehen ist es wahrscheinlich korrekter, zwei separate Menüs zu haben und den Titel außerhalb davon zu platzieren, Sie können es aber auch anders machen, wenn Sie möchten.

So sieht es auf einem Breitbildschirm (>767px) aus:

Header-Struktur:

<header class="Seitenheader">
  <Navigation>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr-Logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="Menü öffnen">
      <svg Breite="20" Höhe="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul Klasse="Administrator-Menü">
      <li class="Menüüberschrift">
        <h3>Administrator</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <use xlink:href="#pages"></use>
          </svg>
          <span>Seiten</span>
        </a>
      </li>
      
      <!-- weitere Listenelemente hier -->
      
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="Menü reduzieren">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span>Zusammenklappen</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

Beachten Sie im obigen Code zwei Dinge:

• Wie verweisen wir mithilfe des use -Elements auf das Zielsymbol?
• Die ARIA-Attribute ( aria-expanded , aria-label , aria-hidden ), die wir dem Umschaltknopf hinzugefügt haben. Diese Eigenschaften helfen uns dabei, unsere Komponenten zugänglicher zu machen. Später besprechen wir, wie der Wert einer Schaltfläche basierend auf ihrem Status aktualisiert wird.

Teil

Dieser Abschnitt enthält zwei verschachtelte Abschnitte.

Abschnitt 1

Im ersten Abschnitt platzieren wir das Suchformular und einige Informationen zum aktuell angemeldeten Benutzer (Name, Avatar und Benachrichtigungen).

So sieht es auf einem Breitbildschirm (> 767 Pixel) aus:

Teilstruktur:

<Abschnitt Klasse="Suche-und-Benutzer">
  <form>
    <input type="search" placeholder="Seiten durchsuchen...">
    <button type="senden" aria-label="Formular senden">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </form>
  <div Klasse="Administrator-Profil">
    <span class="greeting">…</span>
    <div class="Benachrichtigungen">
      <span class="badge">…</span>
      <svg>
        <use xlink:href="#Benutzer"></use>
      </svg>
    </div>
  </div>
</Abschnitt>

Beachten Sie erneut, dass wir der Schaltfläche „Senden“ einige ARIA-Attribute hinzugefügt haben.

Abschnitt 2

Im zweiten Teil werden wir eine Reihe von Artikelplatzhaltern einfügen, um die Demo mit etwas Dummy-Inhalt zu füllen. Diese können normalerweise tabellarische Daten, Diagramme oder eine Art Feed enthalten.

„Verwenden Sie maximal 5–7 verschiedene Widgets, um eine Ansicht zu erstellen. Andernfalls wird es für Benutzer schwierig, sich zu konzentrieren und einen klaren Überblick zu erhalten.“ – Taras Bakusevych

So sieht es auf einem Breitbildschirm (> 767 Pixel) aus:

Basierend auf den Best Practices der UX benötigen Sie möglicherweise nicht so viele Abschnitte

Teilstruktur:

<Abschnitt Klasse="Seiteninhalt">
  <Abschnitt Klasse="Raster">
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
    <Artikel></Artikel>
  </Abschnitt>
</Abschnitt>

2. Definieren Sie einige grundlegende Stile

Nachdem unser Markup für die Admin-Konsole fertig ist, fahren wir mit dem CSS fort. Wie immer besteht der erste Schritt darin, einige CSS-Variablen und allgemeine Reset-Stile anzugeben:

:Wurzel {
  --page-header-bgColor: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txtColor: #dde9f8;
  --page-header-headingColor: #7889a4;
  --Seitenkopfzeilenbreite: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txtFarbe: #171616;
  --page-content-blockColor: #fff;
  --weiß: #fff;
  --schwarz: #333;
  --blau: #00b9eb;
  --rot: #ec1848;
  --Randradius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0,075);
}
 
* {
  Polsterung: 0;
  Rand: 0;
  Box-Größe: Rahmenbox;
}
 
ul {
  Listenstil: keiner;
}
 
A,
Taste {
  Farbe: erben;
}
 
A {
  Textdekoration: keine;
}
 
Taste {
  Hintergrund: keiner;
  Cursor: Zeiger;
}
 
Eingabe {
  -webkit-auftritt: keines;
}
 
Taste,
Eingabe {
  Rand: keiner;
}
 
svg {
  Anzeige: Block;
}
 
Körper {
  Schriftart: 16px/1,5 „Lato“, serifenlos;
}

HINWEIS : Der Einfachheit halber werde ich in diesem Tutorial nicht alle CSS-Regeln durchgehen. Hier gibt es fast 400 Zeilen CSS. Wenn Sie möchten, können Sie sie alle auswählen, indem Sie auf die CSS- Registerkarte des Demoprojekts klicken.

3. Definieren Sie den Haupt-Dashboard-Stil

An diesem Punkt können wir uns auf die Seitengestaltung konzentrieren.

Titel festlegen

Die Kopfzeile wird ein Element mit fester Position sein. Seine Breite beträgt 220 Pixel und seine Höhe entspricht der Ansichtsfensterhöhe. Wenn der Inhalt die Höhe des Ansichtsfensters überschreitet, wird eine vertikale Bildlaufleiste angezeigt.

Das nav verhält sich wie ein Flex-Container mit einer Höhe von mindestens 100 %. Denken Sie daran, dass es drei direkte Kinder gibt:

Logo, Umschalttaste und Menü für mobiles Menü.

Der Umschaltknopf ist nur auf kleinen Bildschirmen (<768 Pixel) sichtbar. Dies ist der Stil, den wir brauchen:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.Seitenkopfzeile {
  Position: fest;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Überlauf: automatisch;
  Polsterung oben: 20px;
  Breite: var(--page-header-width);
  Farbe: var(--page-header-txtColor);
  Hintergrund: var(--page-header-bgColor);
}
 
.page-header nav {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Mindesthöhe: 100 %;
}
 
.Seitenkopfzeile .Mob-Menü umschalten {
  Anzeige: keine;
}

Tipp: Wenn Sie eine absolut positionierte Kopfzeile wünschen, die die gesamte Seitenhöhe einnimmt, fügen Sie den folgenden Stil hinzu:

Körper {
  Position: relativ;
}
 
.Seitenkopfzeile {
  Position: absolut;
  oben: 0;
  links: 0;
  Höhe: 100%;
  
  /*Kommentieren Sie diese Stile*/
  /*Position: fest;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Überlauf: auto;*/
}

Menüstil

Das Menü fungiert als Flex-Container und wir weisen ihm flex: 1 zu, damit es erweitert wird und die gesamte Höhe des übergeordneten Elements abdeckt.

Das letzte Menüelement wird auf margin-top: auto gesetzt, da es ganz unten im Menü stehen sollte. Dieses Verhalten wird deutlicher, wenn die Bildlaufleiste in der Kopfzeile nicht angezeigt wird. Versuchen Sie zum Testen, einige Menüelemente zu entfernen, oder sehen Sie sich die Demo auf einem großen Bildschirm an.

Die Links und Schaltflächen im Menü fungieren auch als Flex-Container und ihre Inhalte (Text und Symbole) sollten vertikal ausgerichtet sein.

Menütitel sind im Vergleich zu anderen Menüelementen kleiner. Außerdem werden wir den Abstand zwischen den Zeichen vergrößern.

Dies ist Teil des Menüstils:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.Seitenkopfzeile .Admin-Menü {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Flex-Wachstum: 1;
  Rand oben: 35px;
}
 
.Seitenkopfzeile .Admin-Menü li:letztes-Kind {
  Rand oben: automatisch;
  Rand unten: 20px;
}
 
.Seitenkopfzeile .Admin-Menü li > * {
  Breite: 100 %;
  Polsterung: 12px 15px;
}
 
.Seitenkopfzeile .Admin-Menü a,
.Seitenkopfzeile .Admin-Menü-Schaltfläche {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Schriftgröße: 0,9rem;
  Übergang: Hintergrund 0,2 s, Farbe 0,2 s;
}
 
.Seitenkopfzeile .Admin-Menü .Menüüberschrift h3 {
  Texttransformation: Großbuchstaben;
  Buchstabenabstand: 0,15em;
  Schriftgröße: 12px;
  Rand oben: 12px;
  Farbe: var(--page-header-headingColor);
}

Seiteninhaltsstil

Denken Sie daran, dass .page-content zwei Unterabschnitte enthält.

Dieser Abschnitt wird 220 Pixel von der linken Seite des Ansichtsfensters entfernt platziert. Zusätzlich legen wir seine width: calc(100% - 220px) . Beachten Sie, dass der left Attributwert der Titelbreite entspricht.

Sein Stil:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.Seiteninhalt {
  Position: relativ;
  links: var(--page-header-width);
  Breite: berechnet (100 % – var (--Seitenkopfbreite));
  Mindesthöhe: 100vh;
  Polsterung: 30px;
  Farbe: var(--page-content-txtColor);
  Hintergrund: var(--page-content-bgColor);
}

Such- und Benutzerstile

Denken Sie auch daran, dass .search-and-user zwei Elemente enthält: das Suchformular und .admin-profile .

Für das Layout verwenden wir CSS Grid. Das Suchformular nimmt den gesamten verfügbaren Platz ein und weist einen Rand von 50 Pixeln zwischen sich und seinen Geschwistern auf. Die beiden Brüder werden vertikal ausgerichtet.

Der Absenden-Button wird innerhalb des Formulars absolut positioniert. Es enthält nur ein dekoratives Symbol, daher benötigen wir ein ARIA-Attribut, damit Bildschirmleseprogramme es interpretieren und zugänglich machen können.

.admin-profile das beide Elemente enthält, fungiert als Flex-Container mit vertikal zentriertem Inhalt. Das Badge-Element (Zähler) wird absolut innerhalb seines übergeordneten Elements positioniert, wobei der Inhalt horizontal und vertikal zentriert ist.

Hier ist ein Teil des für diesen Abschnitt benötigten Stils:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.Suche-und-Benutzer {
  Anzeige: Raster;
  Rastervorlagenspalten: 1fr auto;
  Rasterspaltenabstand: 50px;
  Elemente ausrichten: zentrieren;
  Hintergrund: var(--page-content-bgColor);
  Rand unten: 30px;
}
 
.Such- und Benutzerformular {
  Position: relativ;
}
 
.Such- und Benutzerformular-Schaltfläche {
  Position: absolut;
  oben: 50 %;
  rechts: 15px;
  transformieren: verschiebeY(-50%);
}
 
.Suche-und-Benutzer .Admin-Profil {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
 
.Suche und Benutzer .Admin-Profil .Benachrichtigungen {
  Position: relativ;
}
 
.Suche und Benutzer .Admin-Profil .Badge {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Position: absolut;
  oben: -10px;
  rechts: -3px;
  Breite: 18px;
  Höhe: 18px;
  Randradius: 50 %;
  Schriftgröße: 10px;
  Farbe: var(--weiß);
  Hintergrund: var(--red);
}

Rasterstil

Um die Artikel auf unserem Admin-Dashboard anzuordnen, verwenden wir CSS Grid. Wir geben allen Artikeln eine feste Höhe von 300 Pixeln. Mit Ausnahme des ersten und letzten Artikels, die sich über die gesamte übergeordnete Breite erstrecken, sind alle anderen Artikel Teil des zweispaltigen Layouts.

Zugehörige Stile:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.Seiteninhalt .Raster {
  Anzeige: Raster;
  Raster-Vorlagen-Spalten: Wiederholung (2, 1fr);
  Rasterabstand: 30px;
}
 
.Seiteninhalt .grid > Artikel {
  Anzeige: Flex;
  Höhe: 300px;
  Hintergrund: var(--page-content-blockColor);
  Rahmenradius: var(--border-radius);
  Kastenschatten: var(--box-shadow);
}
 
.Seiteninhalt .Grid > Artikel:erstes-Kind,
.Seiteninhalt .Grid > Artikel:letztes-Kind {
  Gitterspalte: 1 / -1;
}

4. Titel wechseln

Jedes Mal, wenn wir auf die Schaltfläche zum Reduzieren/Erweitern klicken, ändert sich der Header-Status. Wenn es erweitert wird, wird es reduziert (wobei nur die Symbolvariante des Menüelements übrig bleibt) und umgekehrt.

Beachten Sie, dass diese Funktion nur auf Bildschirmen mit mehr als 767 Pixeln verfügbar ist. Bei kleineren Bildschirmen hat die Kopfzeile ein anderes Layout, auf das wir später eingehen.

Wenn sich der Header im reduzierten Zustand befindet, erhält der Hauptteil collapsed Klasse. Bis dahin war Folgendes passiert:

• Der Titel schrumpft. Seine Breite ändert sich von 220px auf 40px.
• Als Reaktion darauf wächst .page-content . Insbesondere ändert sich seine Breite von width: calc(100% - 220px) zu width: calc(100% - 40px) . Darüber hinaus beträgt der left Attributwert 40 Pixel statt 220 Pixel.
• Das Logo, der Menütitel, der Menülinktext und der Menüschaltflächentext verschwinden.
• aria-expanded und aria-label des Umschaltknopfs werden aktualisiert. Außerdem ist das Symbol um 180 Grad gedreht, sodass es wie ein Erweiterungssymbol aussieht.

Hier ist der JavaScript-Code, der diese Funktionalität implementiert:

const body = Dokument.body;
const collapseBtn = document.querySelector(".admin-menu button");
const collapsedClass = "kollabiert";
 
collapseBtn.addEventListener("klicken", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "Menü reduzieren"
    ? this.setAttribute("aria-label", "Menü erweitern")
    : this.setAttribute("aria-label", "Menü reduzieren");
  body.classList.toggle(zusammengeklappte Klasse);
});

Und alle verwandten Stile:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
@media screen und (min-width: 768px) {
  .kollabiert .page-header {
    Breite: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    Polsterung: 10px;
  }
 
  .zusammengeklappt .Seitenkopf .Logo,
  .collapsed .Seitenkopfzeile .Admin-Menü span,
  .collapsed .page-header .admin-menu .menu-heading {
    Anzeige: keine;
  }
 
  .collapsed .page-header .admin-menu svg {
    Rand rechts: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    transformieren: drehen (180 Grad);
  }
 
  .kollabiert .Seiteninhalt {
    links: 40px;
    Breite: berechnet (100 % – 40 Pixel);
  }
}

5. Tooltips für Admin-Menüelemente anzeigen

Gehen wir nun einen Schritt weiter und fügen der einklappbaren Kopfzeile eine weitere neue Funktion hinzu.

Wie im vorherigen Abschnitt erwähnt, verschwindet der Text des Menülinks, wenn die Kopfzeile ausgeblendet wird. Das bedeutet, dass an diesem Punkt nur das SVG-Symbol sichtbar ist. Lassen Sie uns daher einen Tooltip anzeigen, der den Benutzern eine bessere Vorstellung davon gibt, was die einzelnen Links bewirken.

Zu diesem Zweck fügen wir jedes Mal, wenn der Mauszeiger über den Menülink (das Symbol) bewegt wird, title Titelattribut mit einem einfachen Textwert hinzu. Dies sollte jedoch wiederum nur passieren, wenn die Kopfzeile ausgeblendet ist und die Fensterbreite mindestens 768 Pixel beträgt.

Hier ist das entsprechende JavaScript:

const body = Dokument.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const collapsedClass = "kollabiert";
 
für (const link of menuLinks) {
  link.addEventListener("mouseenter", function() {
    body.classList.contains(zusammengeklappteKlasse) &&
    window.matchMedia("(Mindestbreite: 768px)").matches
      ? this.setAttribute("Titel", this.textContent)
      : this.removeAttribute("Titel");
  });
}

6. Seien Sie reaktionsschnell

Auf einem Bildschirm mit einer Breite von 767 Pixeln sieht unsere Seite folgendermaßen aus:

Dies unterscheidet sich erheblich von der Anordnung unserer Seitenleiste, nicht wahr? Lassen Sie uns die wichtigsten Unterschiede zur Desktop-Version hervorheben:

• Sowohl die Kopfzeile als auch .page-content haben position: static , width: 100% .
• nav ändert sich von column zu row .
• Der Umschaltknopf für das mobile Menü wird sichtbar.
• Das Menü wird absolut unterhalb der Kopfzeile positioniert und ist zunächst ausgeblendet. Jedes Mal, wenn wir auf den Umschaltknopf klicken, wird er sichtbar.
• Die Schaltflächen zum Reduzieren/Erweitern und das Element .greeting sind ausgeblendet.
• .search-and-user befindet sich direkt neben der Umschaltfläche für das mobile Menü.

Unten sehen Sie einen Teil des responsiven Stils:

@media screen und (max-width: 767px) {
  .Seitenkopfzeile,
  .Seiteninhalt {
    Position: statisch;
    Breite: 100 %;
  }
 
  .page-header nav {
    Flex-Richtung: Reihe;
  }
 
  .Seitenkopfzeile .Mob-Menü umschalten {
    Anzeige: Block;
  }
 
  .Seitenkopfzeile .Admin-Menü {
    Position: absolut;
    links: 98px;
    oben: 57px;
    Rand oben: 0;
    Z-Index: 2;
    Rahmenradius: var(--border-radius);
    Hintergrund: var(--page-header-bgColor);
    Sichtbarkeit: versteckt;
    Deckkraft: 0;
    transformieren: Skalierung (0,95);
    Übergang: alle 0,2 s;
  }
  
  .Seitenkopfzeile .Admin-Menü li:letztes-Kind,
  .Suche und Benutzer .Admin-Profil .Gruß {
    Anzeige: keine;
  }
 
  .Suche-und-Benutzer {
    Position: absolut;
    links: 131px;
    oben: 10px;
    Polsterung: 0;
    Rasterspaltenabstand: 5px;
    Breite: berechnet (100 % – 141 Pixel);
    Rahmenradius: var(--border-radius);
    Hintergrund: transparent;
  }
}

7. Zum mobilen Menü wechseln

Jedes Mal, wenn Sie auf die Umschaltfläche klicken, ändert sich der Menüstatus. Wenn es sich ausdehnt, kollabiert es und umgekehrt.

Im erweiterten Zustand des Menüs erhält der Hauptteil mob-menu-opened . Bis dahin war Folgendes passiert:

• Ein Menü wird angezeigt.
• aria-expanded und aria-label des Umschaltknopfs werden aktualisiert. Außerdem ist das Symbol um 180 Grad gedreht, sodass es wie ein Erweiterungssymbol aussieht.

Dies ist der erforderliche JavaScript-Code:

const body = Dokument.body;
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
 
toggleMobileMenu.addEventListener("klicken", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "Menü öffnen"
    ? this.setAttribute("aria-label", "Menü schließen")
    : this.setAttribute("aria-label", "Menü öffnen");
  body.classList.toggle("Mob-Menü geöffnet");
});

Und das relevante CSS:

.page-header .toggle-mob-menu svg {
  Übergang: Transformation 0,2 s;
}
 
.Seitenkopfzeile .Admin-Menü {
  Übergang: alle 0,2 s;
}
 
.mob-menu-geöffnet .toggle-mob-menu svg {
  transformieren: drehen (180 Grad);
}
 
.mob-menu-geöffnet .page-header .admin-menu {
  transformieren: Skalierung(1);
  Sichtbarkeit: sichtbar;
  Deckkraft: 1;
}

abschließend

Das ist es! Wir haben erfolgreich ein voll funktionsfähiges Admin-Dashboard-Layout erstellt. Sie können dies erweitern, um eine Vielzahl von Verwaltungsschnittstellen zu erstellen. Ich hoffe, Ihnen gefällt diese Reise genauso gut wie mir!

Ein letzter Punkt. Ich bin sicherlich kein Experte für Barrierefreiheit, aber ich habe versucht, diese Komponente durch Hinzufügen einiger gängiger ARIA-Attribute zugänglicher zu gestalten. Während dieses Vorgangs habe ich mir die Dashboards von WordPress und Codepen als Referenz angesehen. Der Code kann weitere ARIA-Attribute enthalten. Beispielsweise habe ich das aria-controls -Attribut ausgeschlossen, das für die Identifizierung verwandter Inhalte zuständig ist, aber das liegt daran, dass Aria-Controls Mist ist.

Wenn ich etwas vergessen habe oder Sie meinen, dass etwas anders gemacht werden sollte, lassen Sie es mich unten in den Kommentaren wissen.

Wie immer vielen Dank fürs Lesen!

Erstellen eines Admin-Dashboard-Layouts mit CSS und einem Hauch von JavaScript

Dies ist das Ende dieses Artikels über die Verwendung von CSS und JavaScript zum Erstellen von Beispielcode für das Layout des Management-Dashboards. Weitere relevante CSS-Inhalte zum Layout des Management-Dashboards finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!