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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="menu">
    <div class="first button">
      <a href="">First</a>
      <div class="sub-menu">
        <a href="#" class="button first">1a</a>
        <a href="#" class="button second">1b</a>
        <a href="#" class="button third">1c</a>
      </div>
    </div>
    <div class="second button">
      <a href="">second</a>
      <div class="sub-menu">
        <a href="#" class="button second">2a</a>
        <a href="#" class="button third">2b</a>
        <a href="#" class="button first">2c</a>
      </div>
    </div>
    <div class="third button">
      <a href="">Third</a>
      <div class="sub-menu">
        <a href="#" class="button third">3a</a>
        <a href="#" class="button first">3b</a>
        <a href="#" class="button second">3c</a>
      </div>
    </div>
  </div>
</body>
</html>
 
.menu {
  position: relative;
}
.menu .button{
  width: 120px;
  height: 50px;
  display: block;
  float: left;
}
.menu .button .sub-menu {
  display: none;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 0;
}
/* gdybys chcial miec efekt po najechaniu myszka, bez JavaScript'u
.menu .button:hover .sub-menu {
  display: block;
} */
.menu .button.first {
  background: url('https://pbs.twimg.com/profile_images/378800000695506235/a11bb912c1c65be5f3a243fccc268690.jpeg') center;
}
.menu .button.second {
  background: url('https://pbs.twimg.com/profile_images/3302942621/1534d6ea12d1bf5c8b14da17f03e0ab5.jpeg') center;
}
.menu .button.third {
  background: url('https://pbs.twimg.com/profile_images/3675408138/ae9563ea4c6116a8509619f4b5622118.png') center;
}
 
$('.menu > .button').click(function(){
  $(this).parents('.menu').find('.sub-menu').hide();
  $(this).children('.sub-menu').toggle();
});
​
$('.sub-menu a').click(function(e){
  e.stopPropagation();
  
  $(this).parents('.menu').find('.sub-menu').hide();
  $(this).parents('.sub-menu').hide();
});
Output

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

Dismiss x
public
Bin info
gastlichpro
0viewers