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 />
<title>JS Bin</title>
  <link rel="stylesheet" type="text/css" href="splitmenubuttons.css" />
​
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
​
<script src="splitmenubuttons.js"></script>
​
<script>
jQuery(function(){ // on document load
    $('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>
</head>
<body>
       <a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false">wawasan spiritual dan blogging</a>
    <a href="#" data-showmenu="dropmenu2" data-menucolors="navy,blue" class="splitmenubutton">All about spiritual</a>
     
     <!-- contoh markup yang berhubungan dengan  drop down menu -->
     
      <!-- Drop Down #1 -->
     
    <ul id="dropmenu1" class="splitdropdown">
    <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">jejaring sosial</a></li>
    <li><a href="#">Tool</a></li>
    </ul>
     
    <!-- Drop Down #2 -->
     
    <ul id="dropmenu2" class="splitdropdown">
    <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
    <li class="separator"><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">wawasan umum</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a>
    <ul>
    <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>
    <li><a href="#">nama sub menu</a></li>
    </ul>
    </li>
    <li><a href="#">nama sub menu</a></li>
    <li><a href="#">nama folder1 submenu</a>
    <ul>
    <li><a href="#">nama item folder1 submenu</a></li>
    <li><a href="#">nama folder2 submenu</a>
    <ul>
    <li><a href="#">nama item folder2 submenu</a></li>
    <li><a href="#">nama item folder2 submenu</a></li>
    <li><a href="#">nama item folder2 submenu</a></li>
    <li><a href="#">nama item folder2 submenu</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">nama sub menu</a></li>
    </ul>
<script type='text/javascript'>
//<![CDATA[
jQuery.fn.splitmenubuttonMenu = function(options){
    var $ = jQuery, startzindex = 1
    var s = $.extend({}, {split:true, triggerevt:'mouseover', hidetoplevelmouseout:true, hidedelay:200, fxduration:100}, options)
    var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null
    s.triggerevt = ismobile? 'click' : (s.triggerevt == 'mouseover'? 'mouseenter' : s.triggerevt)
​
    function deselecttoggler($dropmenu){ // func to deselect toggler
        var $activetoggler = $dropmenu.data('$activetoggler')
        if ($activetoggler && $activetoggler.length == 1){
            $activetoggler.removeClass('selected')
            var menucolors = $activetoggler.data('menucolors')
            if (menucolors)
                $activetoggler.css('backgroundColor', menucolors[0])
        }
    }
​
    function positionmenu(s, level, $toggler, $dropmenu){
        if (level == "toplevel"){
            var docrightedge = $(document).scrollLeft() + $(window).width() - 40
            var docbottomedge = $(document).scrollTop()+$(window).height()-40
            this.docrightedge = docrightedge // cache this value
            this.docbottomedge = docbottomedge
            var $offset = $toggler.data('mainanchor').offset()
            var togglerWidth = (s.split)? $toggler.data('mainanchor').width() + $toggler.width() : $toggler.width()
            var togglerHeight = $toggler.height()
            var dropmenuWidth = $dropmenu.outerWidth()
            var dropmenuHeight = $dropmenu.outerHeight()
            var leftpos = (($offset.left + dropmenuWidth) > docrightedge)? $offset.left - (dropmenuWidth - togglerWidth) : $offset.left
            var toppos = (($offset.top + dropmenuHeight) > docbottomedge)? $offset.top - (dropmenuHeight + togglerHeight) : $offset.top
            return {left: leftpos, top: toppos}
        }
        else{
            var $offset = $toggler.offset()
            var submenuWidth = $dropmenu.outerWidth()
            var submenuHeight = $dropmenu.outerHeight()
            var leftpos = ($offset.left + (submenuWidth*2) > this.docrightedge)? -submenuWidth : submenuWidth
            var toppos = ($offset.top + (submenuHeight) > this.docbottomedge)? -submenuHeight + $toggler.height() : 0
            return {left: leftpos, top: toppos}
        }
    }
​
    function hidemenu($dropmenu){
        $dropmenu.find('ul').hide().end()
            .slideUp(s.fxduration, function(){
                    deselecttoggler($dropmenu)
            })
    }
​
    return this.each(function(){ //return jQuery obj
        var $this = $(this).wrapInner('<span class="innerspan" />') // reference anchor item and add <span> tag inside it
        if (this.tagName == "A"){ // only apply split menu to element if it's a link
            var menucolors = $this.attr('data-menucolors')
            if (menucolors){
                menucolors = jQuery.trim(menucolors).split(/,\s*/)
                $this.css('backgroundColor', menucolors[0])
            }
            var $dropmenu = $('ul#' + this.getAttribute('data-showmenu'))
            $dropmenu.data('timer', {})
            var splitit = $this.attr('data-splitmenu') || s.split
            splitit = (typeof splitit == "string")? (splitit == "true" ? true : false ) : splitit
            if (splitit && $dropmenu.length == 1){ // split up toggler and menu link itself?
                var $toggler = $('<a class="downtoggler dedicatedtoggler"><span class="innerspan downarrow"> </span></a>').insertAfter($this) // append new "toggler" element after menu button
                if (menucolors){
                    $toggler.css('backgroundColor', $this.css('backgroundColor'))
                }
            }
            else{
                var $toggler = $this
                if ($dropmenu.length == 1){
                    $toggler.addClass('downtoggler').find('span.innerspan:eq(0)').addClass('downarrow')
                }
            }
            $toggler.data({'mainanchor':$this, 'menucolors':menucolors}) // store ref to menu link (which may be different from toggler if splitit == true)
            $dropmenu.appendTo(document.body) //move drop down menu so it's a child of document.body
            if ($dropmenu.length == 1){
                $toggler.bind(s.triggerevt, function(e){ // action when toggler is activated
                    clearTimeout($dropmenu.data('timer').hidetimer)
                    var $this = $(this)
                    var menucolors = $this.data('menucolors') // get menu colors (if data-menucolors attr defined)
                    if (menucolors)
                        $toggler.css('backgroundColor', menucolors[1])
                    $toggler.addClass('selected') // add CSS class of 'selected' to toggler
                    var slidefunc = (e.type =='click')? 'slideToggle' : 'slideDown'
                    if ($dropmenu.data('$activetoggler') && $dropmenu.data('$activetoggler').get(0) != $this.get(0)){
                        deselecttoggler($dropmenu)
                        slidefunc = 'slideDown'
                    }
                    var menupos = (positionmenu(s, "toplevel", $toggler, $dropmenu))
                    $dropmenu.css({zIndex:++startzindex, left:menupos.left, top:menupos.top + $this.outerHeight()})
                        [slidefunc](s.fxduration, function(){
                            var $this = $(this)
                            if ($this.css('display') == 'none')
                                deselecttoggler($this)
                        })
                    $dropmenu.data('$activetoggler', $this)
                    return false
                }) // end $toggler.trigger
                if (s.hidetoplevelmouseout){
                    $toggler.bind('mouseleave', function(e){ // action when mouse rolls out of toggler
                        $dropmenu.data('timer').hidetimer = setTimeout(function(){
                            hidemenu($dropmenu)
                        }, s.hidedelay)
                    })
                }
            } // end if $dropmenu.length == 1
            else{ // else if this button has no drop down menu
                $toggler.hover(
                    function(){
                        $toggler.addClass('selected')
                        if ($toggler.data('menucolors'))
                            $toggler.css('backgroundColor', menucolors[1])
                    },
                    function(){
                        $toggler.removeClass('selected')
                        if ($toggler.data('menucolors'))
                            $toggler.css('backgroundColor', menucolors[0])
                    }
                )
            }
            if ($dropmenu.data('isbuilt')) // if this drop down menu has been built already, move on to the next one
                return true
            $dropmenu.on('click mouseenter', function(e){
                    clearTimeout($dropmenu.data('timer').hidetimer)
                    if (e.type == "mouseenter")
                        $(this).css({zIndex: startzindex++})
                    else{
                        if ($(e.target).parent('li').hasClass('headerli'))
                            e.stopPropagation()
                    }
                })
            if (s.hidetoplevelmouseout){
                $dropmenu.on('mouseleave', function(e){
                    $dropmenu.data('timer').hidetimer = setTimeout(function(){
                        hidemenu($dropmenu)
                    }, s.hidedelay)
                })
            }
            var $headers = $dropmenu.find('ul').parent()
            $headers.each(function(i){
                var $li=$(this).css({zIndex: 1000+i}).addClass('headerli')
                var $subul = $li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
                $subul.data('$parentliref', $li) //cache parent LI of each sub UL
                $subul.data('timers', {})
                $li.data('$subulref', $subul) //cache sub UL of each parent LI
                $li.children("a:eq(0)").addClass('rightarrow')
                $li.bind(s.triggerevt, function(e){ //show sub UL when mouse moves over parent LI
                    var $targetul=$(this).addClass("selected").data('$subulref')
                    if ($targetul.queue().length<=1){ //if 1 or less queued animations
                        clearTimeout($targetul.data('timers').hidetimer)
                        var menupos = (positionmenu(s, "sublevel", $(this), $targetul))
                        $targetul.css({left: menupos.left, top: menupos.top})
                        $targetul.stop(true, true).slideDown(s.fxduration)
                    }
                })
                $li.bind('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI
                    var $targetul=$(this).data('$subulref')
                    clearTimeout($targetul.data('timers').showtimer)
                    $targetul.data('timers').hidetimer=setTimeout(function(){
                        $targetul.stop(true, true).slideUp(s.fxduration).data('$parentliref').removeClass('selected')
                    }, s.hidedelay)
                })
                $subul.bind('mouseenter', function(e){
                    clearTimeout($(this).data('timers').hidetimer)
                })
            }) // end $headers.each()
            $dropmenu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
            $dropmenu.data('isbuilt', true)
            if (!$(document).data('hidemenuevt')){ // hide top level drop down menus when user clicks on document
                $(document).on('click', function(e){
                    $('ul.splitdropdown:visible').find('ul').hide().end()
                        .slideUp(s.fxduration, function(){
                            var $this = $(this)
                            if ($this.css('display') == 'none')
                                deselecttoggler($this)
                        })
                })
                $(document).data('hidemenuevt', true)
            }
        }
    })
​
}
//]]>
</script>  
</body>
</html>
 
.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: darkred; /* default color of menu button */
display: inline-block;
}
​
.splitmenubutton span.innerspan, .downtoggler span.innerspan{ /* span.innerspan element dynamically added by script inside menu button */
display: block;
padding: 8px;
line-height: 1em;
/* the following CSS3 gradients add a white to transparent linear gradient to the buttons, to give them a more beveled look */
background: -moz-linear-gradient(top,  rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */
}
​
.dedicatedtoggler{ /* CSS to apply to toggler when it's a seperate element (instead of being the main menu button itself) */
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-left: 1px solid #f5f5f5;
}
​
a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
background: #b13f33; /* default hover background color of menu */
}
​
.downarrow, rightarrow{
cursor: pointer;
}
​
span.innerspan.downarrow::after{ /* Down arrow (hex value) */
content: '\25be';
}
​
.splitmenubutton span.innerspan.downarrow:after{ /* Down arrow with space before the arrow */
content: '\00a0\25be';
}
​
​
.rightarrow:after{ /* CSS for right arrow inside splitdropdown */
content: '\25b8'; /* Add HTML entity based right arrow */
position: absolute;
right: 5px;
font-size: 16px;
height: 100%;
}
​
/* ##### CSS for UL Drop Down Menus of script ###### */
​
​
ul.splitdropdown, ul.splitdropdown ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 200px;
top: 0;
list-style: none;
background: white; /* background color of drop down */
border: 1px solid lightgray;
border-bottom-width: 0;
box-shadow: 0 0 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 0 0 8px #818181;
-moz-box-shadow: 0 0 8px #818181;
}
​
​
ul.splitdropdown li{
position: relative;
}
​
ul.splitdropdown li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: white;
text-decoration: none;
padding: 8px 4px;
}
​
* html ul.splitdropdown li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
​
ul.splitdropdown li a:hover, .splitdropdown li.selected>a{
background: #eee;
}
​
ul.splitdropdown li.separator{
border-bottom: 1px solid #dedddd;
}
Output

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

Dismiss x
public
Bin info
jalupangnapro
0viewers