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="start"></div>
    <div class="first button">
      <a href="">First</a>
      <div class="sub-menu">
        <a href="#" class="button nowy1">1a</a>
        <a href="#" class="button nowy2">1b</a>
        <a href="#" class="button nowy3">1c</a>
      </div>
    </div>
    <div class="second button">
      <a href="">second</a>
      <div class="sub-menu">
        <a href="#" class="button nowy2">2a</a>
        <a href="#" class="button nowy1">2b</a>
        <a href="#" class="button nowy3">2c</a>
      </div>
    </div>
    <div class="third button">
      <a href="">Third</a>
      <div class="sub-menu">
        <a href="#" class="button nowy3">3a</a>
        <a href="#" class="button nowy1">3b</a>
        <a href="#" class="button nowy2">3c</a>
      </div>
    </div>
    <div class="end"></div>
  </div>
</body>
</html>
 
.menu {
  position: relative;
}
.menu .start, .menu .end {
  height: 50px;
  width: 40px;
  background: red;
  float: left;
}
.menu .end {
  background: blue;
}
.menu .button{
  width: 120px;
  height: 50px;
  display: block;
  float: left;
}
.menu .button .sub-menu {
  display: none;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 40px;
}
/* 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.nowy1 {
  background: url('http://www.markopetgrooming.com/wp-content/uploads/2013/02/dog-icon1.png') center;
}
.menu .button.nowy2 {
  background: url('https://pbs.twimg.com/profile_images/2808262036/95ca23ef0fe6eb16e30deff12a9a75ad.jpeg') center;
}
.menu .button.nowy3 {
  background: url('http://icons.iconarchive.com/icons/turbomilk/zoom-eyed-creatures/256/dog-icon.png') center;
}
 
$('.menu > .button').click(function(){
  $(this).parents('.menu').find('.sub-menu').hide();
  $(this).children('.sub-menu').toggle();
});
​
$('.menu > .button > a').click(function(e){
  e.preventDefault();
});
​
$('.sub-menu a').click(function(e){
  e.stopPropagation();
  
  $(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