kann mir bitte jemand in dieses Script ein paar Kommentare schreiben, damit ich es besser verstehe:
CODE
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<body bgcolor="#8b4513">
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 94%;
width: 10em;
padding: 0.8em;
background-color: #8b4513;
}
* html div#Tmenu {
width: 11.3em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 8em;
}
*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.2em 1em;
border: 1px solid white;
border-left-color: white; border-top-color: white;
color: white; background-color: black;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
border-color: white;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
li a#aktuell {
border-right-color: white; border-bottom-color: #300;
background-color: black;
}
ul#Navigation li ul span {
border-color: #900; border-left-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active {
color: black; background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
</style>
<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a href="Startseite.html" target="Framerechts">Startseite</a><br>
</li>
<li><a href="Link.html" target="Framerechts">Gästebuch</a></li><br>
<li><a href="Fun.html"target="Framerechts">Fun</a><br>
<ul>
<li><a href="Link.html" target="Framerechts">Geist</a> </li>
<li><a href="Link.htm" target="Framerechts">Kreis</a> </li>
<li><a href="Link.html" target="Framerechts">Punkt</a> </li>
<li><a href="Link.htm" target="Framerechts">Spirale</a> </li>
</ul>
</li>
<li><a href="Link.htm" target="Framerechts">Kontaktformular</a><br>
<li><a href="Link.htm"target="Framerechts">Hobbys</a><br>
<ul>
<li><a href="Link.html" target="Framerechts">Modellbau</a> </li>
<li><a href="Link.htm" target="Framerechts">Computer</a> </li>
</ul>
<li><a href="Link.html" target="Framerechts">Videos</a><br><br>
</ul>
<div></div>
</div>
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<body bgcolor="#8b4513">
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 94%;
width: 10em;
padding: 0.8em;
background-color: #8b4513;
}
* html div#Tmenu {
width: 11.3em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 8em;
}
*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.2em 1em;
border: 1px solid white;
border-left-color: white; border-top-color: white;
color: white; background-color: black;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
border-color: white;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
li a#aktuell {
border-right-color: white; border-bottom-color: #300;
background-color: black;
}
ul#Navigation li ul span {
border-color: #900; border-left-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active {
color: black; background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
</style>
<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a href="Startseite.html" target="Framerechts">Startseite</a><br>
</li>
<li><a href="Link.html" target="Framerechts">Gästebuch</a></li><br>
<li><a href="Fun.html"target="Framerechts">Fun</a><br>
<ul>
<li><a href="Link.html" target="Framerechts">Geist</a> </li>
<li><a href="Link.htm" target="Framerechts">Kreis</a> </li>
<li><a href="Link.html" target="Framerechts">Punkt</a> </li>
<li><a href="Link.htm" target="Framerechts">Spirale</a> </li>
</ul>
</li>
<li><a href="Link.htm" target="Framerechts">Kontaktformular</a><br>
<li><a href="Link.htm"target="Framerechts">Hobbys</a><br>
<ul>
<li><a href="Link.html" target="Framerechts">Modellbau</a> </li>
<li><a href="Link.htm" target="Framerechts">Computer</a> </li>
</ul>
<li><a href="Link.html" target="Framerechts">Videos</a><br><br>
</ul>
<div></div>
</div>
</body>
Vielen Dank schon mal im Vorraus
Dieser Beitrag wurde von TI-User bearbeitet: 19. Januar 2010 - 21:37
Änderungsgrund: Das nächste mal in die Codebox einbetten. TI-User