Build a modern dropdown widgets tab using CSS Grid and Flexbox

Donation!

In this web development project you are going to build a menu bar witch will display the date and time using javascript and will also have two icons, one for battery and one for a widget tab with a animated dropdown effect using CSS and JavaScript.

You will build the widgets tab using CSS Flexbox and the Grid system. For the icons you will use Font Awesome.

Project overview

• Build a modern dropdown widget tab using CSS Grid and Flexbox
  • Project overview
  • Useful Links:
  • Project setup
  • Create the menu
  • Show and hide the widgets tab
  • Creating the widgets-tab
  • Create the connectivity widgets
  • Create the night mode widgets
  • Create the keyboard widgets
  • Create the air-play widgets
  • Create the display widgets
  • Create the sound widgets
  • Create the Music player widgets
  • Activate icons on click using js

Useful Links:

• Font Awesome
• font-awesome CDN
• Bootstrap

Project setup

Create your project folder and populate it with the HTML CSS and JS files and download the image in the img folder. In the HTML file you will link up your CSS, Bootstrap CDN and Font Awesome CDN

CSS

body {
  background: linear-gradient(90deg, #a164e6, #3e46a0, #043862);
}

Create the menu

In the main container you will create a menu tag with a menu class witch will contain the datetime displaying a actual data and time using JavaScript, the battery icons and the dropdown button witch will by represented through a ellipsis icon.

Menu HTML

<main class="container">
      <!-- Todo: Menu bar -->

      <menu class="menu">
        <span id="datetime"></span>
        <i class="fas fa-battery-three-quarters"></i>
        <i class="fas fa-ellipsis-h"></i>
      </menu>
  
</main>

Menu CSS

.menu {
  width: 465px;
  padding: 0.1rem 1rem;
  display: flex;
  justify-content: space-between;
  background-color: #e9e9e920;
  height: 30px;
  color: #ddd;
  font-weight: 500;
  border-radius: 15px;
}
.menu i {
  background-color: transparent;
  color: #ddd;
  padding: 0.4rem;
  cursor: pointer;
}
.menu i:active {
  background-color: #e9e9e980;
}

Menu JS

let dt = new Date();

document.getElementById("datetime").innerHTML = dt.toLocaleString();

Show and hide the widgets tab

Using JavaScript Click event on the ellipsis you can show and hide the widgets tab.

Creating the widgets-tab

Create a div tag with a “widgets-tab” class then grab on to it from the DOM using javascript and toggle the “show-widget-tab ” class in order to change the display of the “widgets-tab”

  <div class="widgets-tab"> </div>

Show / hide js

document.querySelector(".fa-ellipsis-h").onclick = () =>
  document.querySelector(".widgets-tab").classList.toggle("show-widget-tab");

Create the connectivity widgets

Create a section tab with a class of connectivity. This will contain 3 undersections div’s with the class of sec-container.

Connectivity HTML

 <section class="connectivity">
          <div class="sec-container">
            <i class="fas fa-wifi con-icon active_icon"></i>
            <div class="con-type">
              <h6>Wi-Fi</h6>
              <small>Home</small>
            </div>
          </div>
          <div class="sec-container">
            <i class="fab fa-bluetooth con-icon"></i>
            <div class="con-type">
              <h6>Bluetooth</h6>
            </div>
          </div>
          <div class="sec-container">
            <i class="fas fa-satellite-dish con-icon"></i>
            <div class="con-type">
              <h6>AirDrop</h6>
              <small>Contact Display</small>
            </div>
          </div>
        </section>

Connectivity CSS

.System {
  grid-area: System;
}
section {
  display: flex;
  background-color: #e9e9e960;
  border-radius: 15px;
  transition: all 0.3s ease;
}
section:hover {
  background-color: #e9e9e980;
  transition: all 0.3s ease;
}
.connectivity {
  grid-area: connectivity;
  flex-direction: column;
}
.sec-container {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
}

.con-icon {
  cursor: pointer;
  margin-right: 1rem;
  background-color: #9b9b9b81;
  color: #333;
  padding: 0.4rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}
h6 {
  margin: 0;
}

Create the night mode widgets

Create a

Night mode HTML

 <section class="night-mode">
          <div class="sec-container">
            <i class="fas fa-moon con-icon"></i>
            <div class="con-type">
              <h6>Do Not Disturb</h6>
            </div>
          </div>
        </section>

Night mode CSS

.night-mode {
  grid-area: night-mode;
}

Create the keyboard widgets

Keyboard HTML

 <section class="keyboard">
          <div class="sec-container">
            <i class="fas fa-keyboard con-icon"></i>
            <div class="con-type">
              <h6>Keyboard Brightness</h6>
            </div>
          </div>
      </section>

Keyboard CSS

.keyboard {
  grid-area: keyboard;
}

Create the air-play widgets

Airplay CSS

.keyboard .sec-container,
.air-play .sec-container {
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.air-play {
  grid-area: air-play;
}

Create the display & sound widgets

Display & Sound HTML

<!-- Display -->

        <section class="display">
          <div class="sec-container">
            <div class="con-type">
              <h6>Display</h6>
              <i class="fas fa-sun con-icon"></i
              ><input type="range" class="slider" />
            </div>
          </div>
        </section>

        <!-- sound -->

        <section class="sound">
          <div class="sec-container">
            <div class="con-type">
              <h6>Sound</h6>
              <i class="fas fa-volume-up con-icon"></i
              ><input type="range" class="slider" />
            </div>
          </div>
        </section>

Display and Sound CSS

.display {
  grid-area: display;
}
.display .sec-container,
.sound .sec-container {
  width: 100%;
}
.display .sec-container .con-type,
.sound .sec-container .con-type {
  width: 100%;
  position: relative;
}
.display .sec-container .con-type input.slider,
.sound .sec-container .con-type input.slider {
  margin-top: 1rem;
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  border-radius: 15px;
  outline: none;
  transition: opacity 0.3s;
}
.display .sec-container .con-type i,
.sound .sec-container .con-type i {
  position: absolute;
  top: 2.2rem;
  background-color: inherit;
}
.sound {
  grid-area: sound;
}

Create the Music player widgets

Music player HTML

 <section class="play">
          <div class="sec-container">
            <img src="/img/Record.jpg" alt="" />
            <div class="con-type">
              <h6>Song name</h6>
              <small>New Album</small>
            </div>
            <div class="buttons">
              <i class="fas fa-play con-icon"></i
              ><i class="fas fa-forward con-icon"></i>
            </div>
          </div>
        </section>

Music player CSS

.play img {
  width: 80px;
  margin-right: 1rem;
  border-radius: 3px;
}
.play {
  grid-area: play;
}

.play .sec-container {
  display: flex;
}

.play .buttons {
  position: relative;
  left: 150px;
}
.show-widget-tab {
  display: grid;
  animation: displayWidget-tab 0.5s ease-in-out;
}

Activate icons on click using js

Activate icons js

document
  .querySelectorAll(".con-icon")
  .forEach(
    (icon) => (icon.onclick = (e) => e.target.classList.toggle("active_icon"))
  );

Video Tutorial

Become a web developer!

Learn HTML CSS & Sass JavaScript Bootstrap and more...