Weather Dashboard by STUDIOJQ

index.html

<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>

script.js

/*
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%');
});

scripts

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

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);

$main: #272e38;
$link: #606770;

* {
  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: $main;
    
    & li {
      font-weight: 300;
      font-size: 14px;
      padding: 0 10px;
      position: relative;
            
      & a {
        color: $link;
        transition: all .25s ease;
        
        &:hover {
          color: #fff;
        }
      }
      
      &:after {
        content: '/';
        position: absolute;
        right: -2px;
        color: #fff;
      }
      
      &:last-of-type:after {
        content: ' ';
      }
    }
  }
  
  & .credits {
    font-size: 14px;
    background: transparent;
    color: $link;
    text-align: right;
    padding-right: 10px;
  }
}


.content {
  position: relative;
  
  & .caption {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 80px;
    
    & h1 {
      line-height: 60px;
      font-size: 60px;
      text-decoration: underline;
      text-transform: uppercase;
      letter-spacing: .2em;
      text-shadow: 0 0 1px rgba(0,0,0,.5);
      margin-bottom: 5px;
      
      &:first-of-type {
        letter-spacing: 0;
      }
    }
    
    & span {
      font-weight: 100;
      display: block;
      letter-spacing: .4em;
      font-size: 16px;
    }
  }
  
  & nav.main-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    
    & ul {
      width: 100%;
      display: flex;
      list-style: none;
      
      & li {
        background: $main;
        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 .25s ease;
        position: relative;
        border-right: 1px solid $link;
        box-shadow: 0 5px 0 0 #1a1f27;
        
        &:last-of-type {
          border-right: none;
        }
        
        &:hover {
          margin-top: -5px;
          cursor: pointer;
        }
        
        &.active {
          margin-top: -50px;
          position: relative;
          box-shadow: -1px 0 0 0 $link;
          
          &:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 20px 20px 20px;
            border-color: transparent transparent $main transparent;
            margin: auto;
            top: -20px;
            left: 0;
            right: 0;
          }
        }
        
        & .icon {
          margin-bottom: 30px;
        }
        
        & .menuicon {
          position: absolute;   
          top: 10px;
          left: 10px;
          font-size: 16px;
          color: $link;
          transition: all .25s ease;
          
          &:hover {
            color: #fff;
          }
        }
        
        & .ul-menu {
          position: absolute;
          bottom: -150%;
          left: 0;
          width: 100%;
          height: 180px;
          background: #1a1f27;
          display: block;
          padding: 10px 0;
          transition: all .25s ease;
          
          &:hover {
            cursor: default;
          }
          
          & .ul-menu-close {
            width: 20px;
            height: 20px;
            color: $link;
            position: absolute;
            top: 10px;
            right: 10px;
            transition: all .25s ease;
            
            &:hover {
              color: #fff;
              cursor: pointer;
            }
          }
          
          & p {
            margin-bottom: 20px;
          }
          
          & ul {
            list-style: none;
            display: flex;
            margin-bottom: 20px;
            
            & 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 .25s ease;
              position: relative;
              border-right: none;
              box-shadow: none;
              padding: 5px 0;
              
              &:nth-of-type(2) {
                border-left: 1px solid $link;
                border-right: 1px solid $link;
              }
              
              &:hover {
                background: $main;
              }
            }
          }
          
          & input[type="range"] {
            -webkit-appearance: none !important;
            width: 60%;
            height: 5px;
            background: #fff;
            border: 1px solid $link;
            border-radius: 50%;
            margin: auto;
            transition: all 0.3s ease;
            outline: none;
            display: block;
            margin-bottom: 5px;
          }
          
          & input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none !important ; 
            width: 20px;
            height: 20px;
            background: lighten($main, 20%);
            border-radius: 30px;
            transition: all 0.5s ease;
          }
          
          & output {
            display: block;
            marign-bottom: 10px;
          }
          
          & button {
            height: 20px;
            padding: 0 10px;
            outline: none;
            border: none;
            background: #3e87ec;
            color: #fff;
            font-size: 14px;
          }
        }
        
        & span {
          
        }
      }
    }
  }
}


/********************************
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 */
}

weather-dashboard-by-studiojq.markdown

Weather Dashboard by STUDIOJQ

All credits to Jonathan Quntin STUDIOJQ

i'm only the bored dude who coded it =)

Nice menu with some functions. & check the bar icon in each menu block.

---

##Original Work

Dribbble

Behance

A Pen by andy on CodePen.

License.