-->
 
Cara membuat menu tab Drop Down Horizontal

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     
Menu drop down adalah menu yang mempunyai sub menu didalamnya,,Lihat pada menu tab diblog ini,,itulah yang dimaksud dengan menu drop down,bila cursor diarahkan kemenu game atau aplikasi maka akan tampil menu lagi dibawahnya,fungsinya menghemat latar blog kita..

Berikut langkah-langkahnya untuk di pasang pada blog anda:
  1. Silahkan login terlebih dahulu pada akun Blogspot
  2. Edit HTML dan beri tanda centang Expand Template Widget
  3. Klik link Download Template Lengkap,
  4. Copy paste kode diatas kode <body>
<script>
//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'
//March 25th, 13: Menu optimized for consistent mobile browsers experience

var tabdropdown={
    disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
    disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
    enableiframeshim: 1, //1 or 0, for true or false

    //No need to edit beyond here////////////////////////
    dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
    currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
    ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

    getposOffset:function(what, offsettype){
        var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
        var parentEl=what.offsetParent;
            while (parentEl!=null){
                totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
                parentEl=parentEl.offsetParent;
            }
        return totaloffset;
    },

    showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
        if (this.ie || this.firefox)
            this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
        if (e.type=="click" && obj.visibility!="visible" || e.type=="mouseover"){
            if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
                obj2.parentNode.className="selected"
            obj.visibility="visible"
            }
        else if (e.type=="click")
            obj.visibility="hidden"
    },

    iecompattest:function(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    },

    clearbrowseredge:function(obj, whichedge){
        var edgeoffset=0
        if (whichedge=="rightedge"){
            var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
            this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
            edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
        }
        else{
            var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
            var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
            this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
            if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
                edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
                if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
                    edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
            }
            this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
        }
        return edgeoffset
    },

    dropit:function(obj, e, dropmenuID){
        if (this.dropmenuobj!=null){ //hide previous menu
            this.dropmenuobj.style.visibility="hidden" //hide menu
            if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
                if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
                    this.previousmenuitem.parentNode.className=""
            }
        }
        this.clearhidemenu()
        if (this.ie||this.firefox){
            obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
            if (!this.ismobile)
                obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
            this.dropmenuobj=document.getElementById(dropmenuID)
            this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
            this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
            this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
            this.dropmenuobj.ontouchstart=function(e){e.stopPropagation()}
            this.showhide(this.dropmenuobj.style, e, obj)
            this.dropmenuobj.x=this.getposOffset(obj, "left")
            this.dropmenuobj.y=this.getposOffset(obj, "top")
            this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
            this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
            this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
            this.positionshim() //call iframe shim function
        }
    },

    contains_firefox:function(a, b) {
        while (b.parentNode)
        if ((b = b.parentNode) == a)
            return true;
        return false;
    },

    dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
        var evtobj=window.event? window.event : e
        if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
            this.delayhidemenu(obj2)
        else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
            this.delayhidemenu(obj2)
    },

    delayhidemenu:function(obj2){
        this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
    },

    clearhidemenu:function(){
        if (this.delayhide!="undefined")
            clearTimeout(this.delayhide)
    },

    positionshim:function(){ //display iframe shim function
        if (this.enableiframeshim && typeof this.shimobject!="undefined"){
            if (this.dropmenuobj.style.visibility=="visible"){
                this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
                this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
                this.shimobject.style.left=this.dropmenuobj.style.left
                this.shimobject.style.top=this.dropmenuobj.style.top
            }
        this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
        }
    },

    hideshim:function(){
        if (this.enableiframeshim && typeof this.shimobject!="undefined")
            this.shimobject.style.display='none'
    },

isSelected:function(menuurl){
    var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
    return (tabdropdown.currentpageurl==menuurl)
},

    init:function(menuid, dselected){
        this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
        var menuitems=document.getElementById(menuid).getElementsByTagName("a")
        this.enableiframeshim = (this.ismobile)? 0 : this.enableiframeshim
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
                menuitems[i][this.ismobile? "onclick" : "onmouseover"]=function(e){
                    var event=typeof e!="undefined"? e : window.event
                    tabdropdown.dropit(this, event, this.getAttribute("rel"))
                    e.preventDefault()
                }
            }
            if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
                menuitems[i].parentNode.className+=" selected default"
                var setalready=true
            }
            else if (parseInt(dselected)==i)
                menuitems[i].parentNode.className+=" selected default"
        }
        this.standardbody.ontouchstart = function(e){
            if (tabdropdown.previousmenuitem!=null){
                tabdropdown.delayhidemenu(tabdropdown.previousmenuitem)
            }
        }
    }

}
</script>
  1. Cari kode ]]></b:skin> letakkan kode ini diatas ]]></b:skin>
    /*menu*/
    .ddcolortabs{
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }

    .ddcolortabs ul{
    font: normal 11px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }

    .ddcolortabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:uppercase;
    }


    .ddcolortabs a{
    float:left;
    color: white;
    background: black url(media/color_tabs_left.gif) no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }

    .ddcolortabs a span{
    float:left;
    display:block;
    background: transparent url(media/color_tabs_right.gif) no-repeat right top;
    padding: 4px 8px 2px 7px;
    }

    .ddcolortabs a span{
    float:none;
    }

    .ddcolortabs a:hover{
    background-color: #591f20;
    }

    .ddcolortabs a:hover span{
    background-color: #591f20;
    }

    .ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
    background-color: #591f20;
    }

    .ddcolortabsline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    line-height: 8px;
    background: black;
    border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }

    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv_a{
    position:absolute;
    top: 0;
    border: 1px solid black; /*THEME CHANGE HERE*/
    border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
    border-bottom-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }


    .dropmenudiv_a a{
    width: auto;
    display: block;
    text-indent: 5px;
    border-top: 0 solid #678b3f;
    border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    color: black;
    }

    * html .dropmenudiv_a a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
    background-color: #8a3c3d;
    color: white;
    }
  2. Pastekan kode dibawah ini dibawah kode <body>
    3. <div id="colortab" class="ddcolortabs">
    <ul>
    <li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
    <li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
    <li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>  
    <li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>  
    </ul>
    </div>

    <div class="ddcolortabsline">&nbsp;</div>


    <!--1st drop down menu -->                                                 
    <div id="dropmenu1_a" class="dropmenudiv_a">
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
    <a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
    </div>


    <!--2nd drop down menu -->                                              
    <div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>

    <script type="text/javascript">
    //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
    tabdropdown.init("colortab", 3)
    </script>
  3. Ganti nama menu2nya dan alamat URLnya
Selamat mencoba semoga berhasil
Sumber:Dynamicdrive.com

Posted On : 21 Juli 2011 Time : 15.54
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |