lui cefir
Grünschnabel
Hallo,
ich habe als Navigations-Menue das Menue "Tree Magic"
von www.projectseven.com nachempfunden (siehe beigefügten Code).
Klappt man das Menue aus und wählt einen link in einer Unterkategorie
oder läd die Seite neu, ist auf der neugeladenen Seite das Menue wieder
zusammengeklappt.
Hat jemand eine Idee, wie man die ausgeklappte Struktur über den Seitenaufruf
beibehält (Formular, php,...)?
Seite (seite.htm):
dazugehörige menue.css
ich habe als Navigations-Menue das Menue "Tree Magic"
von www.projectseven.com nachempfunden (siehe beigefügten Code).
Klappt man das Menue aus und wählt einen link in einer Unterkategorie
oder läd die Seite neu, ist auf der neugeladenen Seite das Menue wieder
zusammengeklappt.
Hat jemand eine Idee, wie man die ausgeklappte Struktur über den Seitenaufruf
beibehält (Formular, php,...)?
Seite (seite.htm):
Code:
<html>
<head>
<link href="menue.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function TMenu(b,og){
var i,s,c,k,j,tN,hh;
if (document.getElementById){
if (b.parentNode && b.parentNode.childNodes){
tN=b.parentNode.childNodes;}
else{
return;}
for (i=0;i<tN.length;i++){if(tN[i].tagName=="DIV"){
s=tN[i].style.display;
hh=(s=="block")?"none":"block";
if (og==1){
hh="block";}
tN[i].style.display=hh;}}
c=b.firstChild;
if (c.data){
k=c.data;
j=k.charAt(0);
if (j=='+'){
k='-'+k.substring(1,k.length);}
else
if (j=='-'){
k='+'+k.substring(1,k.length);}
c.data=k;}
if (b.className=='plusmark'){
b.className='minusmark';}
else
if (b.className=='minusmark'){
b.className='plusmark';}}
}
function setTMenu(){
var i,d='',h='<style type=\"text/css\">';
if (document.getElementById){
var tA=navigator.userAgent.toLowerCase();
if (window.opera){
if (tA.indexOf("opera 5")>-1 || tA.indexOf("opera 6")>-1)
{return;}}
for (i=1;i<20;i++){
d+='div ';
h+="\n#TMnav div "+d+"{display:none;}";}
document.write(h+"\n</style>");}
}
setTMenu()
</script>
</head>
<body>
<div id="Layer1"
style="position:absolute; left:2em; top:144px; width:14em; z-index:1">
Navigationsleiste
<div id="TMnav">
<div>
<a href="#" tabindex="1" onClick="TMenu(this);return false">
1. Buch
</a>
<div>
<a href="seite.htm.htm" tabindex="2">
1.1. Kapitel
</a>
</div>
<div>
<a href="seite.htm" tabindex="3">
1.2. Kapitel
</a>
</div>
<div>
<a href="seite.htm" tabindex="4">
1.3. Kapitel
</a>
</div>
</div>
<div>
<a href="#" tabindex="5" onClick="TMenu(this);return false">
2. Buch
</a>
<div>
<a href="#" tabindex="6" onClick="TMenu(this);return false">
2.1. Kapitel
</a>
<div>
<a href="seite.htm" tabindex="7">
2.1.1 Abschnitt
</a>
</div>
<div>
<a href="seite.htm" tabindex="8">
2.1.2 Abschnitt
</a>
</div>
<div>
<a href="seite.htm" tabindex="9">
2.1.3 Abschnitt
</a>
</div>
<div>
<a href="seite.htm" tabindex="10">
2.1.4 Abschnitt
</a>
</div>
<div>
<a href="seite.htm" tabindex="11">
2.1.5 Abschnitt
</a>
</div>
</div>
<div>
<a href="#" tabindex="10" onClick="TMenu(this);return false">
2.2. Kapitel
</a>
<div>
<a href="seite.htm" tabindex="12">
2.2.1 Abschnitt
</a>
</div>
<div>
<a href="seite.htm" tabindex="13">
2.2.2 Abschnitt
</a>
</div>
<div>
<a href="seite.htm.htm" tabindex="14">
2.2.3 Anschnitt
</a>
</div>
</div>
</div>
<div>
<a
target="_top"
tabindex="3">
3. Kapitel
</a>
</div>
</div>
</body>
</html>dazugehörige menue.css
Code:
/*font family for page. If you have another style sheet that sets font family, you can delete this rule*/
div, td, p {
font-family: "Trebuchet MS", Arial, sans-serif;
}
/*Control DIV for expand all and collapse all links*/
#TMctrl {
margin: 0 0 12px 0;
font-size: .8em;
display: none;
/*/*/display: block; /* hide from NN4*/
}
#TMctrl a:link {
color: #666666;
}
#TMctrl a:visited {
color: #666666;
}
#TMctrl a:hover {
color: #FF9900;
}
/*Sets line-height of all top-level menuitems*/
#TMnav div {
/*/*/line-height: 1.75; /* */
}
/*Sets line-height of all other menuitems*/
#TMnav div div {
/*/*/line-height: 1.5; /* */
}
/*Sets background color and border around the menu DIV*/
#TMnav {
background-color: #fff;
border: 2px none #fff;
}
/*Sets a bottom margin for each top-level link*/
#TMnav div {
margin: 0 0 .3em 0;
}
/*second level menuitem divs and lower -Cascades to lower levels-*/
/*Sets left margin to .8em establishing a fluid cascading indent*/
#TMnav div div {
margin: 0 0 0 .8em;
}
/*The Link style for top-level menuitems and is read by all browsers*/
#TMnav div a {
color: #FF9900;
font-size: .9em;
}
/*The Link style for top-level menuitems hidden from Netscape 4*/
#TMnav div a {
/*/*/color: #333333;
padding: 0 0 0 .5em;
display: block;
text-decoration: none;
background-color: #DFEF84;
border: 1px solid #666666;
border-bottom: 4px solid #666666; /* */
}
#TMnav div a:visited {
color: #666666;
}
#TMnav div a:hover {
color: #FFFFFF;
background-color: #FF9933;
border-top: 1px solid #666;
border-bottom: 4px solid #666;
border-right: 1px solid #666;
border-left: 1px solid #666;
}
/*The Link and visited styles combined for second-level menuitems*/
#TMnav div div a, #TMnav div div a:visited {
font-size: 0.8em;
background-color: transparent;
border: 0;
color: #666666;
}
#TMnav div div a:hover {
color: #FF9900;
border: 0;
background-color: transparent;
}
/*The Link style for third-level menuitems and lower*/
/*To set a specific style for the fourth level, add a div to the selector*/
/*Fourth-level example syntax: TMnav div div div div a {declaration}*/
#TMnav div div div a {
font-size: .7em;
}
/*rules programatically assigned to parent links when image-based plus and minus option is selected. The padding on the 4 following rules supercedes (via !important) the padding on the TMnav div a selector when you've chosen the option to use images for the plus and minus signs*/
.plusmark {
background-repeat: no-repeat;
background-image: url(t_plus.gif);
background-position: 8px 50%;
padding: 0 0 0 22px !important;
}
.minusmark {
background-repeat: no-repeat;
background-image: url(t_minu.gif);
background-position: 8px 50%;
padding: 0 0 0 22px !important;
}
/*rule programatically assigned to child links when image-based plus and minus option is selected*/
.defmark {
background-image: none;
padding: 0 0 0 22px !important;
}
/*rules programatically assigned to page link correesponding to current page (You are Here)*/
.currentmark {
font-weight: bold;
text-transform: uppercase;
color: #FF9900!important;
background-color: transparent !important;
padding: 0 0 0 22px !important;
}
/*special style for User Guide Tutorials*/
#stretchyCell {
width: 14em;
}
