Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
​
  <button class="menu-ham hamburger hamburger--squeeze" type="button" style="color:#fff">
  <span class="hamburger-box">
    <span class="hamburger-inner">click</span>
  </span>
</button>
  
<nav class="nav" role="navigation">
                        <ul><li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#app_feature">Features</a></li>
<li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#app_why">Why</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#app_faq">FAQ</a></li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="#app_team">Team</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="#app_footer">Contact</a></li>
</ul>                   </nav>
</body>
</html>
 
.nav {
  width: 80%;
  float: left;
  position: absolute;
  top: 62px;
  left: 70px;
  display: none;
  transition: all 0.3s; }
  @media screen and (max-width: 992px) {
    .nav {
      top: 40px;
      left: 70px; } }
  .nav ul {
    list-style: none; }
    .nav ul li {
      list-style: none;
      display: inline-block;
      padding: 0 18px; }
      .nav ul li a {
        font-size: 18px;
        color: #000;
        font-weight: 400; }
        .nav ul li a:hover {
          text-decoration: none; }
        .nav ul li a:active {
          text-decoration: none; }
        .nav ul li a:visited {
          text-decoration: none; }
        .nav ul li a:focus {
          text-decoration: none; }
​
​
​
.hamburger:hover {
   color: #000;
}
 
$(function () {
        var $hamburger = $(".hamburger");
        $hamburger.on("click", function(e) {
            e.preventDefault();
            $hamburger.toggleClass("is-active");
            $(".nav").toggle().animate({
                left: "90px"
            }, 300 ).addClass("animated fadeIn");
        });
    });
​
​
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers