Sidebar Menu with HTML CSS and JAVASCRIPT

Last Updated on October 1st, 2021 by Codevo

Hello, in this article we are going to build a dashboard sidebar menu with html css and javascript. You can apply the knowledge you are going to gain from this article to real-world dashboard projects.

In my previous article, we created an animated login and registration form using html css and javascript.

Resources:

Ionicons

Setup File

Download setup file here

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- StyleSheet -->
    <link rel="stylesheet" href="./css/styles.css" />
    <title>Sidebar menu</title>
  </head>
  <body>
    <!-- Ionicons -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
    <!-- Script -->
    <script src="./js/index.js"></script>
  </body>
</html>

index.html

css

/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* Basic Reset */
:root {
  --white: #fff;
  --primary: #000033;
  --pink: #ff0066;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  font-size: 1.6rem;
  background-color: var(--white);
  color: var(--primary);
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

styles.css

Video Tutorial

If you couldn't follow along in the video or maybe it was a little confusing then scroll to the bottom of this article where you will find a download button.

Click on the download button and wait for 60s while the download link if been prepared for you. When the link is ready click on it to automatically download the zip file.

Github link

Download Code Files

0 COMMENTS

Congratulations, you have the opportunity to be the first commenter on this article. Have a question or suggestion? Please leave a comment to start the discussion.