Dashboard Grid Menu Using HTML CSS

by
Dashboard Grid Menu Using HTML CSS
Code Snippet:Weather Dashboard by STUDIOJQ
Author: creme
Published: January 27, 2024
Last Updated: February 3, 2024
Downloads: 213
License: MIT
Edit Code online: CodeHim
Read More
 Demo
Download (6 KB)

This code creates a stylish Dashboard Grid Menu using HTML and CSS. The design features a responsive navigation bar with a dynamic background and interactive elements. The JavaScript functionality enables smooth transitions between menu items, allowing users to explore various content categories effortlessly. The code enhances user experience by providing a visually appealing and user-friendly interface for navigating through different sections of a website or application.

This Dashboard Grid Menu is designed to improve the overall aesthetics and usability of your web project.

How to Create Dashboard Grid Menu Using HTML CSS

1. First of all, load the Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create the HTML structure for your Dashboard Grid Menu. Define the necessary elements, such as the header, content, navigation, and menu items. Ensure you include the required classes for styling and JavaScript interaction.

<header>
  <ul class="breadcrumbs">
    <li><a href="#">Weather App</a></li>
    <li><a href="#">Global Outlook</a></li>
    <li><a href="#">Europe</a></li>
  </ul>
  
  <div class="credits">Project/Design by <a href="https://twitter.com/STUDIOJQ">Jonathan Quintin</a> -> <a href="https://dribbble.com/shots/1346874-Weather-Dashboard-Global-Outlook-5?list=users&offset=71">Dribbble</a></div>
</header>

<div class="content">
  
  <div class="caption">
    <h1>A</h1>
    <h1>Nice</h1>
    <h1>Headline</h1>
    <span class="city">Location</span>
    <span class="country">Country</span>
  </div>
  
  <nav class="main-nav">
    <ul>
      <li class="weather">
        <div class="menuicon fa fa-bars"></div>
        <div class="ul-menu">
          <p>Settings</p>
            <ul>
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
            <label for="weatherlocation">Weather for</label>
            <input type="text" name="weatherlocation" placeholder="location" />
            <button>Show</button>
          <div class="ul-menu-close fa fa-times"></div>
        </div>
        <div class="icon fa fa-cloud fa-2x"></div>
        <span>Weather</span>
      </li>
      
      
      <li class="gallery active">
        <div class="menuicon fa fa-bars"></div>
        <div class="ul-menu">
          <p>Settings</p>
            <ul>
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
            <input type = "range" min="0" max="100" onchange="rangevalue.value=value"/>
            <output id="rangevalue">50</output>
            <button>Save Changes</button>
          <div class="ul-menu-close fa fa-times"></div>
        </div>
        <div class="icon fa fa-photo fa-2x"></div>
        <span>Gallery</span>
      </li>
      
      
      <li class="history">
        <div class="menuicon fa fa-bars"></div>
        <div class="ul-menu">
          <p>Settings</p>
            <ul>
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
          <label for="history">Sort by</label>
            <input list="history" name="history">
              <datalist id="history">
                <option value="Name">
                <option value="Date">
                <option value="Priority">
                <option value="Author">
                <option value="Category">
              </datalist>
            <button>Save Changes</button>
          <div class="ul-menu-close fa fa-times"></div>
        </div>
        <div class="icon fa fa-align-left fa-2x"></div>
        <span>History</span>
      </li>
      
      
      <li class="likes">
        <div class="menuicon fa fa-bars"></div>
        <div class="ul-menu">
          <p>Settings</p>
            <ul>
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
            <button>Show likes</button>
          <div class="ul-menu-close fa fa-times"></div>
        </div>
        <div class="icon fa fa-heart-o fa-2x"></div>
        <span>Likes</span>
      </li>
      
      
      <li class="comments">
        <div class="menuicon fa fa-bars"></div>
        <div class="ul-menu">
          <p>Settings</p>
            <ul>
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
            <button>Show comments</button>
          <div class="ul-menu-close fa fa-times"></div>
        </div>
        <div class="icon fa fa-comment-o fa-2x"></div>
        <span>Comments</span>
      </li>
    </ul>    
  </nav>
</div>

3. Create a CSS file (styles.css) to style your Dashboard. The following CSS code includes styles for the background, header, navigation, and menu items. Customize the colors, fonts, and other styles according to your project’s design.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

html {
  background: url("http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52dd4720e8387_1.JPG") no-repeat center center fixed;
  background-size: cover;
}

body {
  color: #fff;
}

a {
  color: #fff;
  text-decoration: none;
}

header ul {
  width: 100%;
  padding: 20px;
  list-style: none;
  display: flex;
  background: #272e38;
}
header ul li {
  font-weight: 300;
  font-size: 14px;
  padding: 0 10px;
  position: relative;
}
header ul li a {
  color: #606770;
  transition: all 0.25s ease;
}
header ul li a:hover {
  color: #fff;
}
header ul li:after {
  content: "/";
  position: absolute;
  right: -2px;
  color: #fff;
}
header ul li:last-of-type:after {
  content: " ";
}
header .credits {
  font-size: 14px;
  background: transparent;
  color: #606770;
  text-align: right;
  padding-right: 10px;
}

.content {
  position: relative;
}
.content .caption {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 80px;
}
.content .caption h1 {
  line-height: 60px;
  font-size: 60px;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
}
.content .caption h1:first-of-type {
  letter-spacing: 0;
}
.content .caption span {
  font-weight: 100;
  display: block;
  letter-spacing: 0.4em;
  font-size: 16px;
}
.content nav.main-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.content nav.main-nav ul {
  width: 100%;
  display: flex;
  list-style: none;
}
.content nav.main-nav ul li {
  background: #272e38;
  flex-grow: 1;
  text-align: center;
  padding-bottom: 20px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 0;
  transition: all 0.25s ease;
  position: relative;
  border-right: 1px solid #606770;
  box-shadow: 0 5px 0 0 #1a1f27;
}
.content nav.main-nav ul li:last-of-type {
  border-right: none;
}
.content nav.main-nav ul li:hover {
  margin-top: -5px;
  cursor: pointer;
}
.content nav.main-nav ul li.active {
  margin-top: -50px;
  position: relative;
  box-shadow: -1px 0 0 0 #606770;
}
.content nav.main-nav ul li.active:before {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #272e38 transparent;
  margin: auto;
  top: -20px;
  left: 0;
  right: 0;
}
.content nav.main-nav ul li .icon {
  margin-bottom: 30px;
}
.content nav.main-nav ul li .menuicon {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 16px;
  color: #606770;
  transition: all 0.25s ease;
}
.content nav.main-nav ul li .menuicon:hover {
  color: #fff;
}
.content nav.main-nav ul li .ul-menu {
  position: absolute;
  bottom: -150%;
  left: 0;
  width: 100%;
  height: 180px;
  background: #1a1f27;
  display: block;
  padding: 10px 0;
  transition: all 0.25s ease;
}
.content nav.main-nav ul li .ul-menu:hover {
  cursor: default;
}
.content nav.main-nav ul li .ul-menu .ul-menu-close {
  width: 20px;
  height: 20px;
  color: #606770;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all 0.25s ease;
}
.content nav.main-nav ul li .ul-menu .ul-menu-close:hover {
  color: #fff;
  cursor: pointer;
}
.content nav.main-nav ul li .ul-menu p {
  margin-bottom: 20px;
}
.content nav.main-nav ul li .ul-menu ul {
  list-style: none;
  display: flex;
  margin-bottom: 20px;
}
.content nav.main-nav ul li .ul-menu ul li {
  border-bottom: none;
  background: transparent;
  flex-grow: 1;
  text-align: center;
  padding-bottom: 0;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0;
  transition: all 0.25s ease;
  position: relative;
  border-right: none;
  box-shadow: none;
  padding: 5px 0;
}
.content nav.main-nav ul li .ul-menu ul li:nth-of-type(2) {
  border-left: 1px solid #606770;
  border-right: 1px solid #606770;
}
.content nav.main-nav ul li .ul-menu ul li:hover {
  background: #272e38;
}
.content nav.main-nav ul li .ul-menu input[type=range] {
  -webkit-appearance: none !important;
  width: 60%;
  height: 5px;
  background: #fff;
  border: 1px solid #606770;
  border-radius: 50%;
  margin: auto;
  transition: all 0.3s ease;
  outline: none;
  display: block;
  margin-bottom: 5px;
}
.content nav.main-nav ul li .ul-menu input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px;
  height: 20px;
  background: #515f74;
  border-radius: 30px;
  transition: all 0.5s ease;
}
.content nav.main-nav ul li .ul-menu output {
  display: block;
  marign-bottom: 10px;
}
.content nav.main-nav ul li .ul-menu button {
  height: 20px;
  padding: 0 10px;
  outline: none;
  border: none;
  background: #3e87ec;
  color: #fff;
  font-size: 14px;
}
/********************************
Background gradients & images
********************************/
.content nav.main-nav ul li.active.weather {
  background: #00fe9e;
  /* Old browsers */
  background: url("http://www.tums-mc.de/img/points1.png"), -moz-linear-gradient(-45deg, #00fe9e 30%, #acff3d 70%);
  /* FF3.6+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-gradient(linear, left top, right bottom, color-stop(30%, #00fe9e), color-stop(70%, #acff3d));
  /* Chrome,Safari4+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-linear-gradient(-45deg, #00fe9e 30%, #acff3d 70%);
  /* Chrome10+,Safari5.1+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -o-linear-gradient(-45deg, #00fe9e 30%, #acff3d 70%);
  /* Opera 11.10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -ms-linear-gradient(-45deg, #00fe9e 30%, #acff3d 70%);
  /* IE10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), linear-gradient(135deg, #00fe9e 30%, #acff3d 70%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00fe9e", endColorstr="#acff3d",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.content nav.main-nav ul li.active.gallery {
  background: #bbc0f7;
  /* Old browsers */
  background-image: url("http://www.tums-mc.de/img/points1.png"), -moz-linear-gradient(-45deg, #bbc0f7 30%, #2afcef 70%);
  /* FF3.6+ */
  background-image: url("http://www.tums-mc.de/img/points1.png"), -webkit-gradient(linear, left top, right bottom, color-stop(30%, #bbc0f7), color-stop(70%, #2afcef));
  /* Chrome,Safari4+ */
  background-image: url("http://www.tums-mc.de/img/points1.png"), -webkit-linear-gradient(-45deg, #bbc0f7 30%, #2afcef 70%);
  /* Chrome10+,Safari5.1+ */
  background-image: url("http://www.tums-mc.de/img/points1.png"), -o-linear-gradient(-45deg, #bbc0f7 30%, #2afcef 70%);
  /* Opera 11.10+ */
  background-image: url("http://www.tums-mc.de/img/points1.png"), -ms-linear-gradient(-45deg, #bbc0f7 30%, #2afcef 70%);
  /* IE10+ */
  background-image: url("http://www.tums-mc.de/img/points1.png"), linear-gradient(135deg, #bbc0f7 30%, #2afcef 70%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#bbc0f7", endColorstr="#2afcef",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.content nav.main-nav ul li.active.history {
  background: #e535e2;
  /* Old browsers */
  background: url("http://www.tums-mc.de/img/points1.png"), -moz-linear-gradient(-45deg, #e535e2 30%, #fe665b 70%);
  /* FF3.6+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-gradient(linear, left top, right bottom, color-stop(30%, #e535e2), color-stop(70%, #fe665b));
  /* Chrome,Safari4+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-linear-gradient(-45deg, #e535e2 30%, #fe665b 70%);
  /* Chrome10+,Safari5.1+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -o-linear-gradient(-45deg, #e535e2 30%, #fe665b 70%);
  /* Opera 11.10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -ms-linear-gradient(-45deg, #e535e2 30%, #fe665b 70%);
  /* IE10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), linear-gradient(135deg, #e535e2 30%, #fe665b 70%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e535e2", endColorstr="#fe665b",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.content nav.main-nav ul li.active.likes {
  background: #1bc3ff;
  /* Old browsers */
  background: url("http://www.tums-mc.de/img/points1.png"), -moz-linear-gradient(-45deg, #1bc3ff 30%, #48ded2 70%);
  /* FF3.6+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-gradient(linear, left top, right bottom, color-stop(30%, #1bc3ff), color-stop(70%, #48ded2));
  /* Chrome,Safari4+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-linear-gradient(-45deg, #1bc3ff 30%, #48ded2 70%);
  /* Chrome10+,Safari5.1+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -o-linear-gradient(-45deg, #1bc3ff 30%, #48ded2 70%);
  /* Opera 11.10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -ms-linear-gradient(-45deg, #1bc3ff 30%, #48ded2 70%);
  /* IE10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), linear-gradient(135deg, #1bc3ff 30%, #48ded2 70%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1bc3ff", endColorstr="#48ded2",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.content nav.main-nav ul li.active.comments {
  background: #fecd32;
  /* Old browsers */
  background: url("http://www.tums-mc.de/img/points1.png"), -moz-linear-gradient(-45deg, #fecd32 30%, #f75e73 70%);
  /* FF3.6+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-gradient(linear, left top, right bottom, color-stop(30%, #fecd32), color-stop(70%, #f75e73));
  /* Chrome,Safari4+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -webkit-linear-gradient(-45deg, #fecd32 30%, #f75e73 70%);
  /* Chrome10+,Safari5.1+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -o-linear-gradient(-45deg, #fecd32 30%, #f75e73 70%);
  /* Opera 11.10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), -ms-linear-gradient(-45deg, #fecd32 30%, #f75e73 70%);
  /* IE10+ */
  background: url("http://www.tums-mc.de/img/points1.png"), linear-gradient(135deg, #fecd32 30%, #f75e73 70%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fecd32", endColorstr="#f75e73",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

4. Load the jQuery by adding the following CDN link before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

5. Finally, integrate the following JavaScript code (script.js) to add interactivity to your Dashboard. This code ensures smooth transitions between menu items and handles the opening and closing of the submenus.

/*
Project/design by Jonathan Quintin
https://dribbble.com/shots/1346874-Weather-Dashboard-Global-Outlook-5?list=users&offset=71

View in Full Page mode!
*/

$('.main-nav ul li').click(function() {
  $('.main-nav ul li').removeClass('active');
  $(this).addClass('active');
});

$('.menuicon').click(function() {
  $('.ul-menu').css('bottom', '-150%');
  $(this).next('.ul-menu').css('bottom', '0');
});

$('.ul-menu-close').click(function() {
  $('.ul-menu').css('bottom', '-150%');
});

That’s all! hopefully, you have successfully created the Dashboard Grid Menu Using HTML CSS. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X