rmachado
08-26-2008, 06:40 PM
1) Script Title: Tab Content Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
3) Describe problem:
I'm trying to adapt the script using a vertical menu (also from dynamic drive), but the selected seems not to be working.
This is my code:
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.shadetabs{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px; /* width of menu (don't forget to add border with below!) */
}
.shadetabs li{
border-bottom: 4px solid white; /* Gray border beneath each menu item */
}
.shadetabs li a{
background: white repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 13px white "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-decoration: none;
text-align: center;
height: 36px;
}
.shadetabs li a:visited, .shadetabs li a:active{
color: black;
}
.shadetabs li.lastitem, .shadetabs li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}
.shadetabs li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}
.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}
.shadetabs li a.selected{
background-image: url(imagens/hp_botao_novas_verdee.gif);
}
</style>
<!--[if IE]>
<style type="text/css">
.shadetabs li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->
</style>
<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Top Receitas</a></li>
<li><a href="#" rel="tcontent2">Teste</a></li>
<li><a href="#" rel="tcontent3">Outro</a></li>
</ul>
var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
Any help would be great.
Regards
Rmachado
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
3) Describe problem:
I'm trying to adapt the script using a vertical menu (also from dynamic drive), but the selected seems not to be working.
This is my code:
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.shadetabs{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px; /* width of menu (don't forget to add border with below!) */
}
.shadetabs li{
border-bottom: 4px solid white; /* Gray border beneath each menu item */
}
.shadetabs li a{
background: white repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 13px white "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-decoration: none;
text-align: center;
height: 36px;
}
.shadetabs li a:visited, .shadetabs li a:active{
color: black;
}
.shadetabs li.lastitem, .shadetabs li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}
.shadetabs li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}
.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}
.shadetabs li a.selected{
background-image: url(imagens/hp_botao_novas_verdee.gif);
}
</style>
<!--[if IE]>
<style type="text/css">
.shadetabs li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->
</style>
<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Top Receitas</a></li>
<li><a href="#" rel="tcontent2">Teste</a></li>
<li><a href="#" rel="tcontent3">Outro</a></li>
</ul>
var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
Any help would be great.
Regards
Rmachado