Loading:


Menu w formie zakładek (Tabs Menu)

Skrypt tworzy eleganckie menu w formie zakładek. Podobne jak na np. filmweb.



Kod HTML do wyświetlenia MENU pliki kod.css i kod.js podane są niżej w listingu

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="kod.css" />
<script src="kod.js" type="text/javascript"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>
</head>

<body>
<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
<DIV class="tabcontainer">

<div id="sc1" class="tabcontent">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 1</a> | <a href="#">Link 2</a>
</div>

<div id="sc2" class="tabcontent">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 1</a>
</div>

<div id="sc3" class="tabcontent">
Sub contents here
</div>

</DIV>
</body>
</html>



Napisz Artyku³

Listing


// plik CSS kod.css ******************************************

.basictab ul{
margin: 4px;
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover, .basictab li a.current{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontent{
display:none;
}


//Kod pliku JS kod.js ******************************************

var ddtabmenu={
        disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
        snap2original: [true, 300], // czas po jakim menu wróci do stanu pierwotnego po zdjęciu kursora z menu

        currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""),
definemenu:function(tabid, dselected){
        this[tabid+"-menuitems"]=null
        this[tabid+"-dselected"]=-1
        this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
        var menuitems=this[tabid+"-menuitems"]
        this.clearrevert2default(tabid)
 for (i=0; i<menuitems.length; i++){
                menuitems[i].className=""
                if (typeof menuitems[i].hasSubContent!="undefined")
                        document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
        }
        targetitem.className="current"
        if (typeof targetitem.hasSubContent!="undefined")
                document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

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

isContained:function(m, e){
        var e=window.event || e
        var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
        while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
        if (c==m)
                return true
        else
                return false
},

revert2default:function(outobj, tabid, e){
        if (!ddtabmenu.isContained(outobj, tabid, e)){
                window["hidetimer_"+tabid]=setTimeout(function(){
                        ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"])
                }, ddtabmenu.snap2original[1])
        }
},

clearrevert2default:function(tabid){
 if (typeof window["hidetimer_"+tabid]!="undefined")
                clearTimeout(window["hidetimer_"+tabid])
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
        var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
        if (target.addEventListener)
                target.addEventListener(tasktype, functionref, false)
        else if (target.attachEvent)
                target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
        var menuitems=document.getElementById(tabid).getElementsByTagName("a")
        this[tabid+"-menuitems"]=menuitems
        for (var x=0; x<menuitems.length; x++){
                if (menuitems[x].getAttribute("rel")){
                        this[tabid+"-menuitems"][x].hasSubContent=true
                        if (ddtabmenu.disabletablinks)
                                menuitems[x].onclick=function(){return false}
                        if (ddtabmenu.snap2original[0]==true){
                                var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
                                menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
                                submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
                                submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
                        }
                }
                else //for items without a submenu, add onMouseout effect
                        menuitems[x].onmouseout=function(e){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
                menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
                if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
                        ddtabmenu.showsubmenu(tabid, menuitems[x])
                        this[tabid+"-dselected"]=menuitems[x]
                        var setalready=true
                }
                else if (parseInt(dselected)==x){
                        ddtabmenu.showsubmenu(tabid, menuitems[x])
                        this[tabid+"-dselected"]=menuitems[x]
                }
        }
}
}




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2021 v.1.5 | design: diviXdesign & rainbowcolors