A Pen by Yoher.

Biyutiful-Nav-(Responsive-Navigation-Menu).markdown

Biyutiful Nav (Responsive Navigation Menu)

A Pen by Yoher on CodePen.

License.

index.html

<header class="nav-wrap">
  <div class="nav-content">
    
  <!-- nav-head -->
  <div class="nav-head">
    <a href="#" class="nav-title">Biyutiful</a>
    <button class="btn-toggle collapse" data-toggle="nav">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <!-- /.nav-head -->
  
  <!-- nav-collapse -->
  <nav class="nav-collapse" id="nav">
    <!---->
    <ul class="nav left">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
    <ul class="nav right">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!---->
    <form method="get" action="#" class="search-form right">
      <input type="text" name="q" placeholder="Search"/>
      <input type="submit" value="Search"/>
    </form>
    <!---->
    <ul class="nav right">
    <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
  </nav>
  <!-- /.nav-collapse -->
    
  </div>
</header>




<!------------- nav 2 ---------------->
<div class="example">
<header class="nav-wrap">
  <div class="nav-content">
    
  <!-- nav-head -->
  <div class="nav-head">
    <a href="#" class="nav-title">Title</a>
    <button class="btn-toggle collapse" data-toggle="nav2">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <!-- /.nav-head -->
  
  <!-- nav-collapse -->
  <nav class="nav-collapse" id="nav2">
    <!---->
    <ul class="nav left">
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
    <form method="get" action="#" class="search-form left">
      <input type="text" name="q" placeholder="Search"/>
      <input type="submit" value="Search"/>
    </form>
    <!---->
    <ul class="nav right">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!---->
    <ul class="nav right">
    <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul class="left">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
  </nav>
  <!-- /.nav-collapse -->
    
  </div>
</header>
</div><!-- /.example -->




<!------------- nav 3v---------------->
<div class="example">
<header class="nav-wrap">
  <div class="nav-content">
    
  <!-- nav-head -->
  <div class="nav-head">
    <a href="#" class="nav-title">Title</a>
    <button class="btn-toggle collapse" data-toggle="nav3">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <!-- /.nav-head -->
  
  <!-- nav-collapse -->
  <nav class="nav-collapse" id="nav3">
    <!---->
    <ul class="nav left">
      <li><a href="#">Home</a></li>
    </ul>
    <!---->
    <form method="get" action="#" class="search-form left">
      <input type="text" name="q" placeholder="Search"/>
      <input type="submit" value="Search"/>
    </form>
    <!---->
     <ul class="nav left">
      <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
    <ul class="nav right">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <!---->
    <ul class="nav right">
    <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul class="left">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
  </nav>
  <!-- /.nav-collapse -->
    
  </div>
</header>
</div><!-- /.example -->



<!------------- nav 4 ---------------->
<div class="example">
<header class="nav-wrap">
  <div class="nav-content">
    
  <!-- nav-head -->
  <div class="nav-head">
    <a href="#" class="nav-title">Title</a>
    <button class="btn-toggle collapse" data-toggle="nav4">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <!-- /.nav-head -->
  
  <!-- nav-collapse -->
  <nav class="nav-collapse" id="nav4">
    <!---->
    <ul class="nav left">
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
    </ul>
    <!---->
    <ul class="nav right">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown"><a href="javascript:;">Dropdown</a>
        <ul class="left">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </li>
    </ul>
    <!---->
  </nav>
  <!-- /.nav-collapse -->
    
  </div>
</header>
</div><!-- /.example -->

script.js

/********************/
/* Biyutiful Nav    */
/* By Yogi Hermawan */
/********************/

/* http://codepen.io/yoher/pen/shayq */

$(document).ready(function() {

$(".nav>li>a").click(function() {
	var hidden = $(this).parents("li").children("ul").is(":hidden");
				
  $(".nav>li>ul").hide();
  $(".nav>li.dropdown>a").removeClass("active");  
					
	if (hidden) {
		$(this)
		.parents("li").children("ul").toggle()
		.parents(".nav>li.dropdown").children("a").addClass("active")
	 } 
});

 $(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (! $clicked.parents().hasClass("nav"))
     $(".nav>li>ul").hide();
});

$(document).bind("click", function(e) {
  var $clicked = $(e.target);
  if (! $clicked.parents().hasClass("nav"))
     $(".nav>li.dropdown>a").removeClass("active");
});


$(".collapse").each(function(){
  $(this).click(function(evt){
    evt.preventDefault(); 
    var target = $(this).attr("data-toggle");
    $("#" + target).slideToggle();
  });
});


$(".nav-wrap>.nav-content>.nav-collapse").each(function(){
  if($(".search-form", this)[0]){
    $(this).addClass("nav-collapse-with-search-form");
  }
});


 $(function() {
    var path = window.location.href;
    $('.nav li a').each(function() {
        if (this.href === path) {
            $(this).addClass('active');
        }
    });
});
  
});

style.css

/********************/
/* Biyutiful Nav    */
/* By Yogi Hermawan */
/********************/

/* http://codepen.io/yoher/pen/shayq */

*, *:before, *:after{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
}

/* nav wrapper */
.nav-wrap{
  display: block;
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #222;
}
.nav-wrap.nav-fixed{
  position: fixed;
  top: 0;
  z-index: 1000;
}
/*** nav content wrapper ***/
.nav-wrap>.nav-content{
  display: block;
  width: 100%;
  height: 45px;
  margin: 0 auto;
  padding: 0 20px 0 20px;
  border: 0;
  background: none;
}

/*** nav title and  nav toggle button - wrapper ***/
.nav-wrap>.nav-content>.nav-head{
  display: inline-block;
  position: relative;
  float: left;
  height: 45px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

/* nav title */
.nav-wrap>.nav-content>.nav-head>.nav-title{
  display: inline-block;
  float: left;
  height: 45px;
  margin: 0;
  padding: 0 10px 0 10px;
  font-size: 24px;
  font-weight: bold;
  color: #ccc;
  line-height: 45px;
  text-decoration: none;
  background: none;
}
.nav-wrap>.nav-content>.nav-head>.nav-title:hover{
  color: #fff;
  text-decoration: none;
  background: none;
}

/* toggle button */
.nav-wrap>.nav-content>.nav-head>.btn-toggle{
  display: none;
  position: absolute;
  right: 10px;
  top: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  cursor: pointer;
  outline: 0;
}
.nav-wrap>.nav-content>.nav-head>.btn-toggle:hover{
  background: #333;
}
.nav-wrap>.nav-content>.nav-head>.btn-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 0 3px 0;
  padding: 0;
  border: 0;
  background: #fff;
}
.nav-wrap>.nav-content>.nav-head>.btn-toggle span:last-child{
  margin-bottom: 0;
}

/*** collapse wrapper ***/
.nav-wrap>.nav-content>.nav-collapse{
  height: 45px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* always show .nav-collapse if window >= 801 */
@media screen and (min-width: 801px){
  .nav-wrap>.nav-content>.nav-collapse{
    display: block!important;
  }
}

/* ul.nav */
.nav-wrap>.nav-content>.nav-collapse>.nav{
  display: inline-block;
  float: left;
  height: 45px;
  margin: 0 4px 0 4px;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li{
  float: left;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>a{
  display: block;
  padding: 0 8px 0 8px;
  height: 45px;
  font-size: 14px;
  font-weight: normal;
  color: #ccc;
  line-height: 45px;
  text-decoration: none;
  background: none;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>a:hover{
  color: #fff;
  text-decoration: none;
  background: none;
}

/* add class 'active' */
.nav-wrap>.nav-content>.nav-collapse>.nav>li>a.active{
  color: #fff;
}

/* class dropdown */
.nav-wrap>.nav-content>.nav-collapse>.nav>li.dropdown{
  position: relative;
}
/* dropdown arrow */
.nav-wrap>.nav-content>.nav-collapse>.nav>li.dropdown>a:after{
  font-family: sans-serif;
  content: "";
  position: relative;
  top: 11px;
  margin-left: 4px;
  border: 5px solid transparent;
  border-top-color: #ccc;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li.dropdown>a.active:after{
  font-family: sans-serif;
  content: "";
  top: -10px;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

/*** dropdown menu ***/
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul{
  display: none;
  position: absolute;
  top: 100%;
  min-width: 160px;
  margin: 0;
  padding: 8px 0 8px 0;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0, .175);
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0, .175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0, .175);
  text-align: left;
  list-style: none;
  z-index: 1000;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul>li{
  clear: both;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul>li>a{
  display: block;
  padding: 6px 22px;
  font-size: 14px;
  font-weight: normal;
  color: #777;
  text-decoration: none;
  white-space: nowrap;
  background: none;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul>li>a:hover{
  color: #555;
  text-decoration: none;
  background: #f0f0f0;
}

/*** search form ***/
.nav-wrap>.nav-content>.nav-collapse>.search-form{
  display: block;
  position: relative;
  float: right;
  width: 220px;
  height: 45px;
  margin: 0;
  padding: 8px;
  border: 0;
  background: none;
}
.nav-wrap>.nav-content>.nav-collapse>.search-form input[type="text"]{
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 34px 6px 6px;
  border: 1px solid #666;
  background: #666;
  font-size: 14px;
  font-weight: normal;
  color: #eee;
  outline: 0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.nav-wrap>.nav-content>.nav-collapse>.search-form input[type="text"]:focus{
  border-color: #888;
  background: #888;
}
.nav-wrap>.nav-content>.nav-collapse>.search-form input[type="submit"]{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 30px;
  border: 0;
  background: transparent;
  background-image: url("http://www.clker.com/cliparts/n/U/H/1/H/u/search-icon-white-one-md.png");
  background-position: 6px 6px;
  background-size: 18px 18px;
  background-repeat:no-repeat;
  cursor: pointer;
  outline: 0;
  text-indent: -999px;
  opacity: 0.5;
}

/*** float ***/
.nav-wrap>.nav-content>.nav-collapse>.nav.left,
.nav-wrap>.nav-content>.nav-collapse>.search-form.left{
  float: left!important;
}
.nav-wrap>.nav-content>.nav-collapse>.nav.right,
.nav-wrap>.nav-content>.nav-collapse>.search-form.right{
  float: right!important;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul.left{
  right: 0!important;
}
.nav-wrap>.nav-content>.nav-collapse>.nav>li>ul.right{
  left: 0!important;
}

/***** responsive *****/
@media screen and (max-width: 800px){
   .nav-wrap, .nav-wrap>.nav-content{
     height: auto;
     min-height: 45px;
     padding: 0;
   }
  .nav-wrap>.nav-content>.nav-head{
    display: block;
    width: 100%;
    margin: 0;
    clear: both;
  }
  .nav-wrap>.nav-content>.nav-head>.btn-toggle{
    display: block;
  }
  .nav-wrap>.nav-content>.nav-collapse{
    display: none;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 0 8px 0;
    background: #222;
    clear: left;
  }
    .nav-wrap>.nav-content>.nav-collapse.nav-collapse-with-search-form{
    padding-top: 45px;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav{
    display: block;
    float: none!important;
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #444;
    clear: both;
  }
    .nav-wrap>.nav-content>.nav-collapse>.nav:last-child{
      border-bottom: 0;
    }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li{
    float: none;
    clear: both;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>a{
    height: auto;
    padding: 8px 20px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>a:hover{
    color: #fff;
    background: #3374C3;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>ul{
    position: relative!important;
    width: 100%;
    border: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>ul>li>a{
    padding: 6px 30px;
    color: #ccc;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>ul>li>a:hover{
    color: #fff;
    background: #555;
  }
  .nav-wrap>.nav-content>.nav-collapse>.search-form{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  /** remove float **/
  .nav-wrap>.nav-content>.nav-collapse>.nav.left,
  .nav-wrap>.nav-content>.nav-collapse>.search-form.left{
    float: none!important;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav.right,
  .nav-wrap>.nav-content>.nav-collapse>.search-form.right{
    float: none!important;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>ul.left{
    right: 0!important;
  }
  .nav-wrap>.nav-content>.nav-collapse>.nav>li>ul.right{
    left: 0!important;
  }
}

/*** font ***/
.nav-wrap a{
  font-family: arial, helvetica, sans-serif;
}


/************** example style **************/
.example{
  display: block;
  position: relative;
  padding: 40px 20px;
  margin: 50px 0 0 0;
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
}
.example:before{
  position: absolute;
  top: 0;
  left: 0;
  content: "Example";
  font-family: arial,helvetica,sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  padding: 4px 8px;
  background: #ddd;
}
.example .nav-wrap{
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}