css/html/js hjälp (meny)
jag började idag försöka ta upp mina html-kunskaper lite (som jag hade för typ 10 år sen). mycket har förändrats och javascript har jag aldrig kunnat. jag hittade iaf en meny jag ville pryda min sida med, men det går inte riktigt som jag vill. det jag har försökt göra är att lägga in menyn i ett länkarkiv-script jag tidigare idag laddade ner.
det är en sk. tabmeny, där den tab som är aktiv ska vara en annan färg. eftersom det är ett php-script med header.php för sig och så, så har jag nu ett litet problem, där menyscriptet kommer in. när man startar sidan så är första taben (start) markerad, det ska den vara. sen när man går in på t.ex. tab nr två, så är fortfarande den första markerad.
tab scriptet jag använt är ddtabmenu example 4
som ni ser på den sidan så stödjer det även submenus, men det har jag tagit bort så det är bara att ignorera.
min sida hittar ni här, så ni ser hur den ser ut och hur den ska vara.
header.php (där menyn finns)
Spoiler<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("tabwr", 0) //initialize Tab Menu #4 with 3rd tab selected
</script>
Spoiler<div id="tabwr" class="ddcolortabs">
<ul>
<li><a href="index.php"><span>home</span></a></li>
<li><a href="links.php"><span>links</span></a></li>
<li><a href="addlink.php"><span>add link</span></a></li>
<li><a href="contact"><span>contact</span></a></li>
</ul>
</div>
<div class="ddcolortabsline"> </div>
<br />
css
Spoiler<style type="text/css">
.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: #678b3f 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: 6px 8px 3px 7px;
}
.ddcolortabs a span{
float:none;
}
.ddcolortabs a:hover{
background-color: #8cb85c;
}
.ddcolortabs a:hover span{
background-color: #8cb85c;
}
.ddcolortabs a.current, #ddcolortabs a.current span{ /*currently selected tab*/
background-color: #8cb85c;
}
.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
border-top: 0px dotted #fff; /*Remove this to remove border between bar and tabs*/
}
.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;
}
</style>
och sen själva javascriptet här: http://links.abovethesky.se/ddtabmenu.js
om det är någon annan kod ni behöver (som jag glömt) så säg till.
jag tror inte att det är så avancerat egentligen, kan vara något jag missat bara.