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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<span class="mobile-icon"></span>
    <div class="mobile-menu">
      <header class="mobile-header">
        <div class="mobile-branding">
<!--here is my logo code,its long so i don't wanna to slow you down-->
           </div>
            </header>
            <ul class="mobile-menu-ul">
              <div class="caret"></div>
   <?php wp_nav_menu(array (
       'theme_location'=> 'new-menu',
        'container' => '', 
        'items_wrap' => '%3$s' 
                         )); ?>
             </ul>
            </div>
</body>
</html>
 
/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/
.mobile-icon{
position:absolute;
display:block;
  width: 40px;
z-index:5;
​
}
.mobile-icon:before{
  width: 100%;
font-size:2em;
  font-family: "ElegantIcons";
  font-weight: bold;
  text-align: center;
  content: "\64";
}
.mobile-icon:hover{
color:white;
background:black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/
.mobile-show{
dispay:block;
}
.mobile-menu{
overflow:scroll;
position:fixed;
height:100%;
width:70%;
background:white;
z-index:1000;
transform: translate3d(-100%,0 ,0);
transition:transform 0.4s ease;
}
.active-mobile-menu div{
transform:translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu{
transform:translate3d(100%,0 ,0);
}
.mobile-menu ul{
top:10.2%;
color:black;
position:relative;
text-align:left;
font-weight:bold;
}
.mobile-menu li a {
display:block;
padding: 4% 0;
border-bottom:1px solid black;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu  .sub-menu > li:hover > a{
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul{
height:100%;
width:100%;
visibility:hidden;
display:none;
opacity:0;
transition:visibility 0s, opacity 0.5s linear;
background:#fff;
border:none;
position:relative;
}
.mobile-menu ul li:hover ul{
display:block;
opacity:1;
visibility:visible;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers