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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
<link rel="stylesheet" type="text/css" href="styles.css" />
​
</head>
​
<body>
​
<h1>Drop Down Menu Terpecah</h1>
​
<div class="css3splitmenu">
<a href="#">Blogging</a> <input type="checkbox" />
​
<ul id="t">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery java script</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
</ul>
</div>  
​
<div class="css3splitmenu">
<a href="#">Dunia spiritual</a> <input type="checkbox" />
​
<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual" >Wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
</ul>
</div>  
​
<div class="css3splitmenu nocss3splitmenu">
<a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
</div>
​
​
<!-- Script below should follow all split menus -->
​
<script type="text/javascript">
​
( function(){ // local scope
​
    if (!document.querySelectorAll || !document.addEventListener)
        return
    var uls = document.querySelectorAll('div.css3splitmenu > ul'),
            docbody = document.documentElement || document.body,
            checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
            zindexvalue = 100
​
    for (var i=0; i<uls.length; i++){
        ( function(x){ // closure to capture each i value
            checkboxes[i].addEventListener('click', function(e){
                uls[x].style.zIndex = ++zindexvalue
                for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
                    if (y != x)
                        checkboxes[y].checked = false
                }
                e.cancelBubble = true
            })
            checkboxes[i].addEventListener('blur', function(e){
                setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
                e.cancelBubble = true
            })
        }) (i)
    }
​
    docbody.addEventListener('click', function(e){
        for (var i=0; i<uls.length; i++){
            checkboxes[i].checked = false
        }
    })
​
})();
​
​
</script>
​
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
jalupangnapro
0viewers