Zur Navigation

Navigation [aufklappbar]

1 Moni (Gast)

Hi,

wie kann ich so eine Navigation machen?

http://www.katzenundhundetipps.de/frame.htm
Geht das auch ohne Java, mit Css?

Schönen Abend

28.12.2005 19:06

2 Jörg Kruse

Hallo Moni,

für moderne Browser, d.h. für die heutigen Versionen von Firefox/Netscape/Mozilla, Opera und Safari, ist die Darstellung einer aufklappbaren Navigation auch ohne den Einsatz von JavaScript möglich, auf SELFHTML findet man eine Beschreibung:

Dynamische CSS-Navigation für moderne Browser

Die Nutzer ältere Browser, wozu auch schon der Internet Explorer 6 zählt, müssten hierbei auf das Aufklappen verzichten, könnten sich aber zu den unteren Menüpunkten hinklicken.

Ansonsten ist unterhalb noch ein Beispiel für ein zusätzliches JavaScript angegeben, welches die Funktionalität des Aufklappmenüs auch für den IE ermöglicht. Der Vorteil einer solchen Kombination von CSS und JavaScript: sowohl IE User, als auch Besucher ohne JavaScript können die Navigation in vollem Umfang nutzen, und auch Suchmaschinenbots haben damit - im Gegensatz zu einem reinen JavaSCript-Menü - keine Probleme

mfG Jörg

28.12.2005 20:13 | geändert: 28.12.2005 20:20

3 Moni (Gast)

Hallo Jörg,

danke für Deine schnelle Antwort.
Ich habe auch mal geschaut und probiert aber leider bekomme ich das in mein bestehendes Menü nicht rein.
Ich kenne mich nicht so gut aus aber ich versuche stetig zu lernen.
Ich habe eigentlich nur eine Kategorie, wo ich so solch ein Klappmenü nach rechts brauche...
Darf ich meinen Menü-CSS hier mal reinsetzen?

mfg
Moni

28.12.2005 22:37

4 Jörg Kruse

Ja klar, du kannst den Code hier reinsetzen, dann kann man konkret schauen, wo es hakt :)

mfG Jörg

28.12.2005 23:17

5 Moni (Gast)

Ok,

hier ist mein Menü. Nur unter bei Wissenswertes möchte ich so ein Klappmenü nach rechts, wo dann die einzelnen Kategorien aufgeführt sind:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
<!--
Body,table,tr,td {SCROLLBAR-ARROW-COLOR:#DFA800 ; SCROLLBAR-BASE-COLOR: #003173;
scrollbar-highlight-color :#001C42 ; scrollbar-shadow-color : #001E3C;scrollbar-3dlight-color:#DFA800;font-family: Verdana,arial;font-size: 10pt;<bgproperties="fixed">}
a:active {
font-family : Comic Sans MS;
font-size : 8pt;
color : #FFEDB7;
font-weight : normal;
text-decoration : none;line-height :9pt;
}


a:hover {
font-family : Comic Sans MS;
font-size : 8pt;
color : #F0C000;
text-decoration : overline;line-height :9pt;
}

a:hover {
font-family : Comic Sans MS;
font-size : 8pt;
color : #247BFF;
text-decoration : underline;line-height :9pt;
}

.body {
font-family : Comic Sans MS;
font-size : 8pt;
color : #F0C000;line-height :9pt;
}

a {
font-family : Comic Sans MS;
font-size : 8pt;
color : #F0C000;
text-decoration : none; line-height :9pt;
}

.menu {
padding: 5px 5px 5px 5px;
font-family:Comic Sans MS ;
font-size: 8px;
color: #F0C000;
}
a:link {
color: #F0C000;
}
body,td,th {
color:#F0C000;
}

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="Navy" background="images/menue.jpg">
<br><br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="menu"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<strong><a href="ueberuns.html" target="main">HOME</a> <br>
<a href="news.html" target="main">NEWS</a> <br>
<a href="billy.html"target="main">BILLY</a> <br>
<a href="shannon.html"target="main">SHANNON</a> <br>
<a href="ray.html"target="main">RAY OF LIGHT</a> <br>
<a href="fotogalerie.html"target="main">FOTOGALERIE</a> <br>
<a href="wissenswertes.html"target="main">WISSENSWERTES</a><br>
<a href="puzzle.html"target="main">PUZZLE</a><br>
<a href="awards.html"target="main">AWARDS</a><br>
<a href="links.html"target="main">LINKS</a> <br>
<a href="http://www.venx-gb.de/gb-a27787-0.html"target="main">G&Auml;STEBUCH</a> <br>
<a href="impressum.html"target="main">IMPRESSUM</a> </strong><br> </td>
</tr>
</table>
</body>
</html>

28.12.2005 23:35

6 Jörg Kruse

Die Anleitungen in SELFHTML basieren alle auf verschachtelte Listen (siehe Erläuterungen dort ab Anfang der verlinkten Seite), also diese Form:

<ul id="menu">
<li><a href="ueberuns.html" target="main">HOME</a></li>
<li><a href="news.html" target="main">NEWS</a></li>
<li><a href="billy.html"target="main">BILLY</a></li>
<li><a href="shannon.html"target="main">SHANNON</a></li>
<li><a href="ray.html"target="main">RAY OF LIGHT</a></li>
<li><a href="fotogalerie.html"target="main">FOTOGALERIE</a></li>
<li><a href="wissenswertes.html"target="main">WISSENSWERTES</a>
<ul>
<li><a href="#">Unter-Punkt 1</a></li>
<li><a href="#">Unter-Punkt 2</a></li>
<li><a href="#">Unter-Punkt 3</a></li>
</ul>
</li>
<li><a href="puzzle.html"target="main">PUZZLE</a></li>
<li><a href="awards.html"target="main">AWARDS</a></li>
<li><a href="links.html"target="main">LINKS</a></li>
<li><a href="http://www.venx-gb.de/gb-a27787-0.html"target="main">G&Auml;STEBUCH</a></li>
<li><a href="impressum.html"target="main">IMPRESSUM</a></li>
</ul>

Die Unter-Punkte, die ausgeklappt werde sollen, werden in CSS mit display:none versteckt, und bei hover mit display:block wieder eigeblendet. Leider wurde bei SELFHTML kein Beispiel aufgeführt für eine vertikale Navigation, die in der horizontalen aufklappt, nur umgekehrt. Ich würde hierfür versuchen, den aufzuklappenden Teil mit float:right zu positionieren:

ul#menu li {
list-style:none;
}

ul#menu li ul {
padding-left:0;
margin-left:0;
text-indent:0;
float:right;
display:none;
}

ul#menu li:hover ul {
display:block;
}

Allerdings komme ich bei einem Test mit verschiedenen Browsern zu unterschiedlichen Ergebnissen. Vielleicht fällt mir oder jemand anderem morgen noch eine passendere Lösung ein ;)

mfG Jörg

29.12.2005 01:00 | geändert: 29.12.2005 01:03

7 Moni (Gast)

Hi Jörg,
auch so lange wach gewesen...

Ich habe auch mal noch probiert, sieht nicht schlecht aus aber jetzt stimmt mein linkes Menü nicht mehr und ich steh' anscheinend auf'm schlau *stöhn*

<?php header('Content-Language: en'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>menue</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
Body,table,tr,td {SCROLLBAR-ARROW-COLOR:#F0C000 ; SCROLLBAR-BASE-COLOR: #003884;
scrollbar-highlight-color :#003173; scrollbar-shadow-color : #001E3C;scrollbar-3dlight-color:#F0C000;}
<!--
body {
background-image: url(images/hpgrafik/menue.jpg);
padding:0;
margin:0;
font-family: Comic Sans MS;
font-size:8pt;
color: #F0C000;
line-height :11pt;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
font-family: Comic Sans MS;
font-size: 8pt;
color: #F0C000;
position: absolute;
top: 243px;
left: 20px;
width: 150px;
height:50px;
}

#menu dt {
cursor: pointer;
height: 20px;
text-align: left;
font-weight: normal;
color : #247BFF;
text-decoration : underline;line-height :11pt;
}

#menu dd {
position: absolute;
z-index: 100;
left: 120px;
margin-top: -1.em;
width: 16em;
top: -150px;
}

#menu ul {
padding: 5px 5px 5px 16px;
font-family: Comic Sans MS;
font-size: 8pt;
color: #F0C000;
}
#menu li {
text-align: left;
font-size: 8pt;
height: 18px;
}
#menu li a, #menu dt a {
color: #F0C000;
text-decoration: none;

}

#menu li a:hover {
color : #247BFF;
text-decoration : underline;line-height :11pt;
}


#mentions {
font-family: Comic Sans MS;
position: absolute;
bottom : 200px;
left : 8pt;
color: #F0C000;
}
#mentions a {
color:#F0C000;
}
#mentions a:hover{
color : #247BFF;
text-decoration: underline;line-height :11pt;
}

-->
</style>

</head>
<body>

<!-- Menu -->
<dl id="menu" name="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="home.html" target="main">HOME</a></dt>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="news.html" target="main">NEWS</a></dt>
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="billy.html" target="main">BILLY</a></dt>
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="shannon.html" target="main">SHANNON</a></dt>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"><a href="ray.html" target="main">RAY OF LIGHT</a></dt>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"><a href="fotogalerie.html" target="main">FOTOGALERIE</a></dt>
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"><a href="wissenswertes.html" target="main">WISSENSWERTES</a></dt>
<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();" name="smenu3">

<ul>
<li><a href="aloevera.html" target="main">ALOE VERA</a></li>
<li><a href="bachblueten.html" target="main">BACHBLÜTEN</a></li>
<li><a href="blutbildwerte.html" target="main">BLUTBILDWERTE</a></li>
<li><a href="buechertipps.html" target="main">BÜCHER TIPPS</a></li>
<li><a href="buecheronlineshops.html" target="main">BÜCHER ONLINE SHOPS</a></li>
<li><a href="darmverschluss.html" target="main">DARMVERSCHLUSS</a></li>
<li><a href="entwurmung.html" target="main">ENTWURMUNG</a></li>
<li><a href="ernaehrung.html" target="main">ERNÄHRUNG</a></li>
<li><a href="futterprobenliste.html" target="main">FUTTERPROBENLISTE</a></li>
<li><a href="freilandpflanzen.html" target="main">FREILANDPFLANZEN</a></li>
<li><a href="gesundheitsforen.html" target="main">GESUNDHEITSFOREN</a></li>
<li><a href="harnwegserkrankungen.html" target="main">HARNWEGSERKRANKUNGEN</a></li>
<li><a href="homoeophatie.html" target="main">HOMÖOPHATIE</a></li>
<li><a href="impfungen.html" target="main">IMPFUNGEN</a></li>
<li><a href="kratzbaeume.html" target="main">KRATZMÖBEL</a></li>
<li><a href="nierenerkrankungen.html" target="main">NIERENERKRANKUNGEN</a></li>
<li><a href="onlineapotheken.html" target="main">ONLINE APOTHEKEN</a></li>
<li><a href="onlineshops.html" target="main">ONLINE SHOPS</a></li>
<li><a href="spieletipps.html" target="main">SPIELETIPPS</a></li>
<li><a href="schuesselersalze.html" target="main">SCHÜSSELER-SALZE</a></li>
<li><a href="tierforen.html" target="main">TIERFOREN</a></li>
<li><a href="toxoplasmose.html" target="main">TOXOPLASMOSE</a></li>
<li><a href="viruserkrankungen.html" target="main">VIRUSERKRANKUNGEN</a></li>
<li><a href="zaehne.html" target="main">ZÄHNE/ZAHNERKRANKUNGEN</a></li>
<li><a href="zimmerpflanzen.html" target="main">ZIMMERPFLANZEN</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();"><a href="puzzle.html" target="main">PUZZLE</a></dt>
<dt onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();"><a href="awards.html" target="main">AWARDS</a></dt>
<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();"><a href="links.html" target="main">LINKS</a></dt>
<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();"><a href="http://www.venx-gb.de/gb-a27787-0.html" target="main">GÄSTEBUCH</a></dt>
<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"><a href="impressum.html" target="main">IMPRESSUM</a></dt>
</dl>

</body>
</html>


mfg
Moni

29.12.2005 15:52

8 Jörg Kruse

Scheint in den wichtigsten Browsern soweit zu funktionieren; das Aufklappmenü ist mit JavaScript realisiert, aber das Grundmenü funktioniert auch ohne.

aber jetzt stimmt mein linkes Menü nicht mehr

Was stimmt nicht mehr? Die Formatierung oder die Position? Ich denke, das lässt sich anpassen.

mfG Jörg

29.12.2005 16:45 | geändert: 29.12.2005 16:46

9 Moni (Gast)

Hi Jörg,

schau mal, es stimmt die Formatierung nicht mehr.
Beim Klappmenü stimmt sie, so sollte die eigentliche Navi aussehen.

Ich bekomme es einfach nicht hin.

Hier mal mein gesamtes Werk, wo ich sicherlich noch einiges verfeinern muss:

http://www.house-of-blue-eyes.de

Ich bin schon mal happy, dass ich überhaupt so weit gekommen bin, denn mit html und css hab ich es noch nicht so sehr...

Danke für Deine tolle Hilfe!

mfg
Moni

29.12.2005 17:45

10 Jörg Kruse

Du hast für #menu dt eine Höhe von nur 8px definiert, deswegen hocken die Menüpunkte so dicht übereinander. Wenn du sie auf z.B. 13 px erhöhst:

#menu dt {
cursor: pointer;
height: 13px;
text-align: left;
font-weight: normal;
color : #F0C000;
}

... dann sind die Abstände wie im Aufklappmenü

mfG Jörg

29.12.2005 18:58