1
Then i need it of item the menu will paint one time choice of item submenu
code 2levelta.css:
Expand|Select|Wrap|Line Numbers
- .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;
- color: #8c0000;
- }
- .basictab li a{
- text-decoration: none;
- padding: 3px 7px;
- margin-right: 2px;
- border: 1px solid gray;
- border-bottom: none;
- background-color: white;
- color: #8c0000;
- }
- .basictab li a:visited{
- color: #8c0000;
- }
- .basictab li a:hover{
- background-color:#f7e96b;
- color: #8c0000;
- }
- .basictab li a:active{
- background-color:#f7e96b;
- color: #8c0000;
- }
- .basictab li.selected a{ /*selected tab effect*/
- position: relative;
- top: 1px;
- padding-top: 4px;
- background-color: none;
- color: #8c0000
- }
- .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;
- color: #8c0000
- }
- .submenustyle a:hover{
- background-color: #CFBC0C;
- }
code of file 2leveltab.js
Expand|Select|Wrap|Line Numbers
- 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[i]).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[i].getAttribute("rel")){
- menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
- mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
- if (menuitems[i].className=="selected")
- showsubmenu(tabid, menuitems[i].getAttribute("rel"))
- menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
- showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
- }
- }
- }
- }
code of HTML
--------------------------
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="2leveltab.css" />
<script type="text/javascript" src="2leveltab.js">
/***********************************************
* 2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
</head>
<body>
</body>
</html>
<ul id="maintab" class="basictab">
<li class="selected" rel="institucion"><a href="#">institucional ▼</a></li>
<li class="selected" rel="secretarias"><a href="#">secretarías ▼</a></li>
<li class="selected" rel="publica"><a href="#">publicaciones ▼</a></li>
<li class="selected" rel="nove"><a href="#">novedades</a></li>
</ul>
<div id="secretarias" class="submenustyle">
<a href="./prueba1.htm" target="mainFrame">general</a>
<a href="http://www.eleco.com.ar">administrativa</a>
<a href="http://www.institutoolivero.com.ar">académica</a>
<a href="http://www.institutoolivero.com.ar">extensión</a>
<a href="http://www.institutoolivero.com.ar">postgrado</a>
</div>
<div id="institucion" class="submenustyle">
<a href="./institucional/institu_historia.htm" target="mainFrame">historia</a>
<a href="./institucional/institu_autoridades.htm" target="mainFrame">autoridades</a>
<a href="./institucional/institu_contactos.htm" target="mainFrame">contactos</a>
</div>
<div id="publica" class="submenustyle">
<a href="http://www.unicen.edu.ar">la escalera</a>
<a href="http://www.javascriptkit.com/dhtmltutors/">el peldaño</a>
</div>
<div id="nove" class="submenustyle">
</div>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>[/HTML]
