Hallo!
Da ich eine eine horizontale navigationsleiste möchte, deren unterebenen beim Überfahren mit der Maus auch horizonatal angeordnet erscheinen, habe ich versucht den code von selfhtml.org umzuschreiben.
Aber irgendwie funktioniert das nicht so ganz. Das Untermenü wird erst horizontal, wenn man auf den ersten unterpunktfährt.
Ich hoffe es kann mir jemand helfen.
Anbei die codes:
<html>
<head>
<script type="text/javascript">
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 = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<title> Navi
</title>
<link rel=stylesheet type="text/css" href="format.css">
</head>
<body>
<h1 id="Beispiel">Geteilte Navigationsleisten</h1>
<div id="Rahmen"><ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">DerVerein</a>
<ul>
<li><a href="vorstellung.htm" target="unten1">Leitung </a></li>
<li><a href="ja.htm"> Jugendausschuss </a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Training</a>
<ul>
<li><a href="#Beispiel">Zeiten</a></li>
<li><a href="#Beispiel">Trainer</a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Termine</a>
<ul>
<li><a href="wettkampfÜ.htm"> Wettkampfübersicht </a></li>
<li><a href="gesamtÜ.htm"> Wettkäpfe </a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Sonstiges</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Aktionen</a></li>
<li><a href="#Beispiel">Bilder</a></li>
</ul><div></div></div>
</body>
</html>
Im CSS:
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
/* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
position: abslout;
float: left;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
float: left;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
Da ich eine eine horizontale navigationsleiste möchte, deren unterebenen beim Überfahren mit der Maus auch horizonatal angeordnet erscheinen, habe ich versucht den code von selfhtml.org umzuschreiben.
Aber irgendwie funktioniert das nicht so ganz. Das Untermenü wird erst horizontal, wenn man auf den ersten unterpunktfährt.
Ich hoffe es kann mir jemand helfen.
Anbei die codes:
<html>
<head>
<script type="text/javascript">
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 = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<title> Navi
</title>
<link rel=stylesheet type="text/css" href="format.css">
</head>
<body>
<h1 id="Beispiel">Geteilte Navigationsleisten</h1>
<div id="Rahmen"><ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">DerVerein</a>
<ul>
<li><a href="vorstellung.htm" target="unten1">Leitung </a></li>
<li><a href="ja.htm"> Jugendausschuss </a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Training</a>
<ul>
<li><a href="#Beispiel">Zeiten</a></li>
<li><a href="#Beispiel">Trainer</a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Termine</a>
<ul>
<li><a href="wettkampfÜ.htm"> Wettkampfübersicht </a></li>
<li><a href="gesamtÜ.htm"> Wettkäpfe </a></li>
</ul>
</li>
<li><a id="aktuell" href="#Beispiel">Sonstiges</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Aktionen</a></li>
<li><a href="#Beispiel">Bilder</a></li>
</ul><div></div></div>
</body>
</html>
Im CSS:
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
/* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
position: abslout;
float: left;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
float: left;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
