Navigationsleiste

P

peymanmr

Mitglied
Hallo zusammen,

ich möchte gerne mit CSS eine Navigationsleiste bauen. Die CSS Datei ist schon vorhanden. Die Seite soll in ein Frameset aufgebaut werden. Die linke Naviseite soll jedesmal wenn ich auf andere link klicke umspringen. Das Problem ist, dass ich für jede link eine neue Naviseite brauche. Kann man eigentlich eine Naviseite haben und das soll jedesmal die akuelle link zeigen. Es wäre Klasse, wenn jemand eine Lösung für mich hat.

Vielen Dank im voraus
Peyman
 
Hi,

für dein Vorhaben benötigst du Javascript, um den aktiven Link in der Navigation hervorzuheben:

Code: 
<script type="text/javascript">
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
</script>
Code: 
<style type="text/css">
a.nav, a.clicked {
font-weight: normal;
}

a.nav:hover, a.clicked {
font-weight: bold;
}
</style>
Code: 
<ul>
       <li><a class="clicked" href="#" onclick="aktivieren(this.href)" target="Name_des_Frame">Link 1</a></li>
       <li><a class="nav" href="#" onclick="aktivieren(this.href)" target="Name_des_Frame">Link 2</a></li>
</ul>
Ansonsten wäre für jeden Navigationspunkt eine eigene Seite erforderlich, um dann mittels CSS den aktiven Link hervorzuheben, was aber bei der Verwendung eines Framesets unsinnig wäre.
 
vielen Dank für deine schnelle Antwort,

ich habe noch eine Frage? Die Navigation geht über 3 Ebenen, kriege ich die auch mit diese javascript hin?
 
Grundsätzlich lässt sich das Script auch über mehrere Menüebenen hinweg nutzen.
 
Hallo Maik,

ich komme nicht ganz klar. hier ist meine CSS-Code
Code: 
#leftnav {
	padding:0px 0px 0px 0px; /* Abstand oben und unten zu Navigationspunkten */
	margin:0px 0px 25px 0px; /* 40px nach unten Abstand zur nächsten Box */
/*	background-color: #fec501;*/
}
/* Liste aller Navigationspunkte - LINKS */
#leftnav ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
}
#leftnav ul.levelOne {
	background-color: #fec501;
	height:200px;
}
#leftnav ul li.leftNavTop
{
	margin-bottom:-2px;
	height:13px;
	font-size:2px;
	padding:0px;
	background:url("LeftNavTop.gif") no-repeat left top;
	display:block;
	background-color: #fec501;
}
#leftnav .leftNavFooter
{
	margin-bottom : 0px;
	height:12px;
	font-size:2px;
	padding:0px;
	background:url("LeftNavFooter.gif") no-repeat left bottom;
	display:block;
	background-color: #fec501;
}
/* Einzelner Listeneintrag - LINKS */
#leftnav li { 
	margin:0px;
	padding:0px;
	display:inline; /* Beseitigt Lücke zwischen Nav-Einträgen in IE5 */
}
/* Liste von 2nd Level-Einträgen */
#leftnav ul.level2 {
	background-color: #ffeeb3;
}
/* 1st-Level - Normal */
#leftnav li a {
	color: #000000;
	font-weight:bold;
	text-decoration: none;
	font-size:12px;	
	display:block;
	width:166px; /* Breite des Navigationspunktes */
	margin: 0px;
	padding: 3px 0px 3px 15px; /* Abstände zu Text */
	background-image: url("bgLeftNavLv1.gif");
	background-repeat:y-repeat;
	background-position: 0px 0px;
	border-bottom:1px solid #fed235;
}
/* 1st-Level - AKTIV und MouseOver */
#leftnav li a.current, #leftnav li a:hover {
	background-image: url("bgLeftNavLv1Active.gif");
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-color: #fedc67;
}
/* 1st-Level - AKTIV und children */
#leftnav li a.currentChild, #leftnav li a.currentChild:hover{
	background-image: url("bgLeftNavLv1ActiveChild.gif");
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-color: #fedc67;
}
/* 2nd-Level - Normal */
#leftnav ul.level2 li a {
	color: #000000;
	font-size: 11px;
	font-weight:normal;
	width:166px; 
	padding:3px 0px 4px 24px; 
	background-image: url("bgLeftNavLv2.gif");
	background-repeat:y-repeat;
	background-position: 0px 0px;
	border:0px;
}
/* 2nd-Level - AKTIV und MouseOver */
#leftnav ul.level2 li a.current, #leftnav ul.level2 li a:hover {
	background-image: url("bgLeftNavLv2Active.gif");
	background-repeat:no-repeat;
	background-position: 0px 0px;
}
/* 2nd-Level - AKTIV und children */
#leftnav ul.level2 li a.currentChild, #leftnav ul.level2 li a.currentChild:hover {
	background-image: url("bgLeftNavLv2ActiveChild.gif");
	background-repeat:no-repeat;
	background-position: 0px 0px;
}
/* 3nd-Level - Normal */
#leftnav ul.level3 li a {
	color: #000000;
	font-size: 11px;
	width:166px; 
	padding:2px 0px 3px 34px; /* Abstände zu Pfeil von links = 8px */
	background-image: url("bgLeftNavLv3.gif");
	background-repeat:y-repeat;
	background-position: 0px 0px;
	border:0px;
}
/* 3nd-Level - AKTIV und MouseOver */
#leftnav ul.level3 li a.current, #leftnav ul.level3 li a:hover {
	background-image: url("bgLeftNavLv3Active.gif");
	background-repeat:no-repeat;
	background-position: 0px 0px;
}
was muss alles in diese javascript denn rein?
Es wäre super, wenn du mir weiterhelfen konntest.
Gruss
Peyman
 
Zuletzt bearbeitet:
Mit dem Stylesheet lässt sich das nicht verbinden, da in jedem Menü-Level für den aktuellen Link eine andere CSS-Klasse mit unterschiedlichem Hintergrundbild deklariert ist.
 
kann man dafür andere CSS schreiben, wo jede Ebene nur mit anderen Hintergrundfarben dagestellt wird? Wichtig ist das die menüs wieder zugeklappt werden, sobald man in eine andee links klickt.
 
Hallo zusammen,

ich habe eine Seite mit Vertikale Drop-Down Menü gefunden.
http://tutorials.alsacreations.com/deroulant/
Kann mir jemand zeigen, wie ich es erweitern kann?
Am liebsten hätte ich es mit 3 Ebenen. Das Problem ist, dass es sich nicht ohne Angriff im Javascript erweitern lässt.
Ich würde sogar mit 2 Ebenen arbeiten, aber sobald ich eine weitere Menü-Punkt einfüge, bleibt er sichtbar.
Ich bitte euch um Rat und Tat, da ich mich nicht mit Javascript auskenne...

Gruss
Peyman
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück