AutoCad

Horyzontalne menu

Zawartość sekcji HEAD:

<script type="text/javascript" src="/2leveltab.js"></script>

plik stylów 2leveltab.css

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
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: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}


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

.basictab li a:hover{
background-color: #dbffff;
color: black;
}

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

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}


.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #ebffff;
}

plik javascript 2leveltab.js

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems.getAttribute("rel")){
menuitems.setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems.getAttribute("rel") //store ids of submenus of tab menu
if (menuitems.className=="selected")
showsubmenu(tabid, menuitems.getAttribute("rel"))
menuitems.getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

BODY:

<ul id="maintab" class="basictab">
<li>Home</li>
<li class="selected" rel="tutorials"><a href="#">Tutorials &#9660;[/url]</li>
<li rel="references"><a href="#">References &#9660;[/url]</li>
<li>JavaScripts</li>
</ul>

<div id="references" class="submenustyle">
JavaScript Reference
DOM Reference
CSS Reference
</div>

<div id="tutorials" class="submenustyle">
JavaScript Tutorials
DHTML & CSS Tutorials
Web Building tutorials
htaccess Tutorial
</div>


<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>

Możesz również zawartość poszczególnych podmenu wyświetlane automatycznie po załadowaniu strony, dodając klasy CSS obok atrybutów

<li rel="references" class="selected"><a href="#">References &#9660;[/url]</li>

 

Popularne Artykuly

Najnowsze Artykuły