Orange Menu!

In this example below you will see how to do a Orange Menu! with some HTML / CSS and Javascript

I'm learning jQuery, created a simple orange nav menu using jQuery show(), hide() and hover().

Thumbnail
This awesome code was written by Vidy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Vidy ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Orange Menu!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Roboto|Noticia+Text);
body {font-family: 'Roboto',Helvetica,Arial,sans-serif;}

.contain {
  width: 100%;
  height: 100px;
  overflow: hidden;
  /*background: #3ba2ce;*/
}
.dashboard {
  max-width: 960px;
  min-width: 860px;
  margin: 0 auto;
  position: relative;
}
.nav {
  display: block;
  border-left: 1px solid #FFBF7F;
}
.nav .menu {
  cursor: pointer;
  float: left;
  position: relative;
  width: 70px;
  height: 100px;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  background: #FF8438;
  border-right: 1px solid #FFBF7F;
  border-bottom: 0 solid #FF8438;
  transition: all 0.5s ease; 
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease; 
}
.nav .menu p {
  transform: scale(0,0);
  padding-top: 0;
  opacity: 0;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.5s ease 0.2s;
  -ms-transition: all 0.5s ease 0.2s; 
  -moz-transition: all 0.5s ease 0.2s; 
  -o-transition: all 0.5s ease 0.2s; 
  -webkit-transition: all 0.5s ease 0.2s;
}
.nav .menu span {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  font-size: 25px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
.nav .menu:hover, .nav .hov {
  height: 95px;
  background: #FFBF7F;
  border-bottom: 5px solid #FF8438;
}
.nav .menu:hover p, .nav .hov p {
  opacity: 1;
  transform: scale(1,1);
  padding-top: 21px;
}
.nav .menu:hover span, .nav .hov span {
  top: 50px;
  font-size: 35px;
  text-shadow: 0 15px 0 rgba(0,0,0,0.05);
}

/* User =============== */
.user {
  float: right;
  width: 210px;
  height: 100px;
  position: relative;
  border-left: 1px solid #DB5508;
  background: #FF8438;
}
.user div.icon-user {
  position: absolute;
  left: 15px;
  top: 18%;
  padding: 9px 12px;
  background: #FF8438;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  border: 3px solid #fff;/*#83d6fc;*/
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}
.user div.text {
  position: absolute;
  top: 18%;
  left: 37%;
}
.user div.text a {
  display: block;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  transition: all 0.5s ease;
}
.user div.text a.edit {
  font-size: 14px;
  color: #000;
}
div.user a:hover {
  background: rgba(0,0,0,0.3);
}

.propic {
  position: absolute;
  left: 12px;
  bottom: 10px;
  transition: all 0.5s ease;
}
.propic a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.3);
}

/* ========= settings ===========*/
div.settings {
  float: right;
  width: 70px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  background: #FF8438;
  border-left: 1px solid #FFBF7F;
  border-right: 1px solid #FFBF7F;
  border-bottom: 0 solid #FF8438;
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
div.settings div {
  position: absolute;
  right: 24px;
  top: 36px;
  font-size: 25px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
div.settings:hover {
  height: 95px;
  background: #FFBF7F;
  border-bottom: 5px solid #FF8438;
}
div.settings:hover div {
  animation: setting 0.4s ease;
}
@keyframes setting {
  0% {transform: translate(0,0) scale(1,1); opacity: 1; text-shadow: 0 4px 0 rgba(0,0,0,0.3);}
50% {transform: translate(50px,0) scale(2,2); opacity: 0; text-shadow: 0 9px 0 rgba(0,0,0,0.3);}
51% {transform: translate(-50px,0) scale(2,2); opacity: 0; text-shadow: 0 9px 0 rgba(0,0,0,0.3);}
100% {transform: translate(0,0) scale(1,1); opacity: 1; text-shadow: 0 4px 0 rgba(0,0,0,0.3);}
}

/*=====================search ===============*/
.search {
  width: 37.8%;
  background: #FF8438;
  position: absolute;
  left:285px;
  height: 100px;
  padding-top: 24px;
  padding-left: 15px;
  padding-right: 15px;
}
.search input {
  font-family: 'Roboto',sans-serif;
  border: none;
  padding: 15px;
  width: 52%;
  color: #fff;
  background: #FF8438;
  outline: none;
  border-bottom: 1px solid #fff;
  transition: all 0.5s ease;
}
::-webkit-input-placeholder {
  font-family: 'Roboto',sans-serif;
  color: #fff !important;
}
.search input:active, .search input:focus {
  width: 70%;
  background: #fff;
  color: #FF8438;
  border-bottom: 1px solid #FFBF7F;
}

/*======== subs ================ */
.subs {
  position: relative;
  width: 960px;
  margin: 0 auto;
}
.subs div {
  position: absolute;
  top: 0px;
}
.subs div ul li {
  display: block;
  min-width: 150px;
}
.subs div ul li a {
  display: block;
  width: 150px;
  padding: 12px;
  background: #FFBF7F;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #FF8438;
  border-left: 1px solid #FF8438;
  transition: all 0.3s ease;
}
.subs div ul li a:hover {
  border-bottom: 1px solid #FF8438;
  background: #FF8438;
  color: #fff;
}

.subs .sub-watch {
  left: 142px;
}
.subs .sub-about {
  left: 70px;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="contain">
  <div class="dashboard">
    <div class="nav">
      <div class="menu home"><p>HOME</p><span class="icon-home"></span></div>
      <div class="menu about"><p>about</p><span class="icon-user"></span></div>
      <div class="menu secret"><p>watch</p><span class="icon-eye-open"></span></div>
      <div class="menu cont"><p>contact</p><span class="icon-phone"></span></div>
    </div>
    
    <div class="search">
      <input type="text" id="search" placeholder="Type and hit Enter to Search!"></input>
    </div>
  
  <div class="settings">
    <div class="icon-gear"></div>
  </div>
    
    <div class="user">
      <div class="icon-user"></div>
      <div class="propic"><a href="">Change?</a></div>
      <div class="text">
        <a href="#">Hi Person</a>
        <a class="edit" href="#">Edit Profile</a>
      </div>
    </div>
  
  </div>
</div>

<div class="subs">
  <div class="sub-about">
    <ul>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Jelly Beans</a></li>
      <li><a href="#">Cake</a></li>
    </ul>
  </div>
  <div class="sub-watch">
    <ul>
      <li><a href="#">Brave</a></li>
      <li><a href="#">Just for Laughs!</a></li>
      <li><a href="#">Internet</a></li>
    </ul>
  </div>
</div>
<!--<div>Not finished yet! Its just the beginning of something cool!!</div>-->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Vidy/orange-menu-pykrA */
@import url(https://fonts.googleapis.com/css?family=Roboto|Noticia+Text);
body {font-family: 'Roboto',Helvetica,Arial,sans-serif;}

.contain {
  width: 100%;
  height: 100px;
  overflow: hidden;
  /*background: #3ba2ce;*/
}
.dashboard {
  max-width: 960px;
  min-width: 860px;
  margin: 0 auto;
  position: relative;
}
.nav {
  display: block;
  border-left: 1px solid #FFBF7F;
}
.nav .menu {
  cursor: pointer;
  float: left;
  position: relative;
  width: 70px;
  height: 100px;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  background: #FF8438;
  border-right: 1px solid #FFBF7F;
  border-bottom: 0 solid #FF8438;
  transition: all 0.5s ease; 
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease; 
}
.nav .menu p {
  transform: scale(0,0);
  padding-top: 0;
  opacity: 0;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.5s ease 0.2s;
  -ms-transition: all 0.5s ease 0.2s; 
  -moz-transition: all 0.5s ease 0.2s; 
  -o-transition: all 0.5s ease 0.2s; 
  -webkit-transition: all 0.5s ease 0.2s;
}
.nav .menu span {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  font-size: 25px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
.nav .menu:hover, .nav .hov {
  height: 95px;
  background: #FFBF7F;
  border-bottom: 5px solid #FF8438;
}
.nav .menu:hover p, .nav .hov p {
  opacity: 1;
  transform: scale(1,1);
  padding-top: 21px;
}
.nav .menu:hover span, .nav .hov span {
  top: 50px;
  font-size: 35px;
  text-shadow: 0 15px 0 rgba(0,0,0,0.05);
}

/* User =============== */
.user {
  float: right;
  width: 210px;
  height: 100px;
  position: relative;
  border-left: 1px solid #DB5508;
  background: #FF8438;
}
.user div.icon-user {
  position: absolute;
  left: 15px;
  top: 18%;
  padding: 9px 12px;
  background: #FF8438;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  border: 3px solid #fff;/*#83d6fc;*/
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}
.user div.text {
  position: absolute;
  top: 18%;
  left: 37%;
}
.user div.text a {
  display: block;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  transition: all 0.5s ease;
}
.user div.text a.edit {
  font-size: 14px;
  color: #000;
}
div.user a:hover {
  background: rgba(0,0,0,0.3);
}

.propic {
  position: absolute;
  left: 12px;
  bottom: 10px;
  transition: all 0.5s ease;
}
.propic a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.3);
}

/* ========= settings ===========*/
div.settings {
  float: right;
  width: 70px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  background: #FF8438;
  border-left: 1px solid #FFBF7F;
  border-right: 1px solid #FFBF7F;
  border-bottom: 0 solid #FF8438;
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
div.settings div {
  position: absolute;
  right: 24px;
  top: 36px;
  font-size: 25px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: all 0.5s ease;
  -ms-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease; 
  -webkit-transition: all 0.5s ease;
}
div.settings:hover {
  height: 95px;
  background: #FFBF7F;
  border-bottom: 5px solid #FF8438;
}
div.settings:hover div {
  animation: setting 0.4s ease;
}
@keyframes setting {
  0% {transform: translate(0,0) scale(1,1); opacity: 1; text-shadow: 0 4px 0 rgba(0,0,0,0.3);}
50% {transform: translate(50px,0) scale(2,2); opacity: 0; text-shadow: 0 9px 0 rgba(0,0,0,0.3);}
51% {transform: translate(-50px,0) scale(2,2); opacity: 0; text-shadow: 0 9px 0 rgba(0,0,0,0.3);}
100% {transform: translate(0,0) scale(1,1); opacity: 1; text-shadow: 0 4px 0 rgba(0,0,0,0.3);}
}

/*=====================search ===============*/
.search {
  width: 37.8%;
  background: #FF8438;
  position: absolute;
  left:285px;
  height: 100px;
  padding-top: 24px;
  padding-left: 15px;
  padding-right: 15px;
}
.search input {
  font-family: 'Roboto',sans-serif;
  border: none;
  padding: 15px;
  width: 52%;
  color: #fff;
  background: #FF8438;
  outline: none;
  border-bottom: 1px solid #fff;
  transition: all 0.5s ease;
}
::-webkit-input-placeholder {
  font-family: 'Roboto',sans-serif;
  color: #fff !important;
}
.search input:active, .search input:focus {
  width: 70%;
  background: #fff;
  color: #FF8438;
  border-bottom: 1px solid #FFBF7F;
}

/*======== subs ================ */
.subs {
  position: relative;
  width: 960px;
  margin: 0 auto;
}
.subs div {
  position: absolute;
  top: 0px;
}
.subs div ul li {
  display: block;
  min-width: 150px;
}
.subs div ul li a {
  display: block;
  width: 150px;
  padding: 12px;
  background: #FFBF7F;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #FF8438;
  border-left: 1px solid #FF8438;
  transition: all 0.3s ease;
}
.subs div ul li a:hover {
  border-bottom: 1px solid #FF8438;
  background: #FF8438;
  color: #fff;
}

.subs .sub-watch {
  left: 142px;
}
.subs .sub-about {
  left: 70px;
}

/*Downloaded from https://www.codeseek.co/Vidy/orange-menu-pykrA */
//http://weloveiconfonts.com/
$('div.propic a').hide();
$('div.icon-user, div.propic a').hover(function() {
  $('div.propic a').stop().fadeToggle();
});

$('.subs .sub-watch').hide();
$('.nav .secret, .subs .sub-watch').hover(function() {
  $('.subs .sub-watch').stop().fadeIn();
  $('.nav .secret').addClass('hov');
},function() {
  $('.subs .sub-watch').stop().fadeOut();
  $('.nav .secret').removeClass('hov');
});

$('.subs .sub-about').hide();
$('.nav .about, .subs .sub-about').hover(function() {
  $('.subs .sub-about').stop().fadeIn();
  $('.nav .about').addClass('hov');
},function() {
  $('.subs .sub-about').stop().fadeOut();
  $('.nav .about').removeClass('hov');
});

Comments