Aktives Menüelement anders gestalten

Zeimi3 · 17.11.2008

Moin,

ich hab schon div. Sachen ver- & gesucht, bin aber leider nirgends fündig geworden.
Ich würde gerne ein Menü erstellen (z.B. als Liste), und das aktives menüelement anders darstellen als die inaktiven Elemente. Hover-Effekte etc. sind kein problem. ich bekomm aber einfach die JS-Funktion nicht hin, die meinen Elementen ne andere Id oder class zuweist, so dass ich diese im Stylesheet andes gestalten kann. Darüberhinaus würde ich gerne die Liste erweiteren können (Punkt 1 hat die unterpunkte 1.1,1.2,1.3...) soweit auch kein prblem, allerdings kann ich die Oberpunkte nicht auf Seiten verweisen lassen. Also

Code:

<li><a href="#">Punkt 1</a>

funktioniert, aber

Code:

<li><a href="punkt1.html">Punkt 1</a>

nicht. Bei der zweitn Variante, wird das menu kurz eingeblendet, allerdings nur bei

Code:

onclick=("")

und verschwindet danach wieder.

Mfg Zeimi3

Flosse · 18.11.2008

AW: Aktives Menüelement anders gestalten

Du musst dem aktiven Element eine Klasse in CSS zuweisen.

Zum Beispiel so: <a href="index.htm" class="here">Home</a>

Diese Klasse enthält dann die Formatierung, wie Dein Menüpunkt aktiv aussieht.

redbug · 18.11.2008

AW: Aktives Menüelement anders gestalten

Es fehl aber noch der Syntax target="...", wie die neue Seite geöffnet werden soll.

Zeimi3 · 18.11.2008

AW: Aktives Menüelement anders gestalten

Moin moin,

dass ich dem Element ne andere Klasse zuweisen muss ist mir klar. Mein Problem ist die Umsetzung dessen.
Hier der Code der HTML-Datei:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript">
function clearAll(){
var d = document.getElementByTag("a");
d.class = "inaktiv";
}
function akitvesElement(das){
    clearAll();
    document.getElementById(das).class="aktiv";
}
</script>
</head>
<body>
<div id="menu">
<ul id="ul_menu">
    <li><a href="index.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>Startseite</a></li>
    <li><a href="kontakt.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>Kontakt</a></li>
    <li><a href="*****.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>*****</a></li>
</ul>
</div>

</body>
</html>

Hier der Code der CSS-Datei

Code:

@charset "utf-8";
/* CSS Document */

#menu{
width: 200px;
color:#FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif medium;
}

#ul_menu{
list-style:inside;
display: block;
width: 100%;
margin: 0px;
}
#ul_menu li{
background:#00FF00;
width: 100%;
}
#ul_menu li a.inaktiv{
color:#FFFFFF;
}
#ul_menu li a.aktiv{
color:#FF0000;
}

Flosse · 18.11.2008

AW: Aktives Menüelement anders gestalten

Das Menü muss so aussehen: Farbsetzung nur als Beispiel

#menu a {
color: #FF0000;
}

#menu a:hover {
color: #FFFFFF;
}

#menu .here {
color: #FFFFFF;
}

Dann hast Du die Formatierung ausschließlich für dieses Menü. ul und li haben hier nichts mehr zu suchen. Die Klasse "here" wird dann so eingefügt wie oben angegeben. Statt der Farben kann man auch ein Bild für den Hintergrund setzen.

Wenn Du eine id vergibst, dann darf die Bezeichnung nur einmal auf der Seite vorkommen. Du hast id="1" mehrmals, die must Du umbezeichnen.

Dann kannst Du das Javascript rausnehmen. So ein Menü kann man nur mit CSS umsetzen.

Zeimi3 · 18.11.2008

AW: Aktives Menüelement anders gestalten

Flosse schrieb:
Dann kannst Du das Javascript rausnehmen. So ein Menü kann man nur mit CSS umsetzen.

Das würde aber bedeuten, dass ich diese Formatierung für jede Seite hart Coden muss. Dem will ich ja mittels Javascript aus dem weg gehen!

Flosse · 18.11.2008

AW: Aktives Menüelement anders gestalten

Nein, dass bedeutet kein Extracoden, Deine Formatierung steht ja in der CSS-Datei und damit hast Du die Anweisung für alle Seiten.

Zeimi3 · 18.11.2008

AW: Aktives Menüelement anders gestalten

Wo wird denn dann die klasse .here gesetzt? muss in jeder Unterseite dem entsprechenden Link zugewiesen werden, so wie ich das sehe. Heisst ich muss in jeder unterseite dem entsprechenden menüpunkt die klasse zuweisen.
Das ich die Definition des Aussehens nur ein mal in der CSS festlegen muss ist klar.

sokie · 18.11.2008

AW: Aktives Menüelement anders gestalten

das wichtigste bei aller Scripterei ist, dass man mit der Maschine die Sprache spricht, die sie auch versteht. (Syntax).

Code:

[COLOR=Red]<script language="JavaScript1.2" type="text/javascript">
function clearAll(){
var d = document.getElementByTag("a");
d.class = "inaktiv";
}
function akitvesElement(das){
    clearAll();
    document.getElementById(das).class="aktiv";
}[/COLOR]
</script>

ist schonmal sehr abenteuerlich.
Elemente per tagName auswählen:
document.getElementsByTagName("tagName") ergibt als Ergebnis immer eine Sammlung von objekten (Array).
Also muss man die auch per Schleife (for) durchlaufen, um JEDES Element der Sammlung 'anzufassen'.
die Zuweisung des style selectors 'class' erfolgt über 'className'.
usw. ambesten einfach mal etwas in den referenzen stöbern
SELFHTML: JavaScript/DOM

Die Vergabe der IDs geht so nicht. wenn sie eine ID sein soll muss sie eindeutig sein. (id="1" kommt aber dreimal vor) Ausserdem ist 1 kein ID name.

ps:
wenn die Seite dann aufgerufen ist, werden deine Funktionen nicht ausgeführt - also deine Formatierung die ja anzeigen soll, welche Seite grad vorliegt ist dann wieder weg.

Flosse · 18.11.2008

AW: Aktives Menüelement anders gestalten

Also auf der Startseite wird sie hier gesetzt:
<a href="index.htm" class="here">Home</a>
<a href="kontakt.htm">Kontakt</a>

Das betrifft dann nur den Homebutton. Kontakt hat die normale Anweisung.

Auf der Kontaktseite wird es beim Button Kontakt gesetzt.

<a href="index.htm">Home</a>
<a href="kontakt.htm" class="here">Kontakt</a>

Im Prinzip legt man sich einmal eine Vorlage an, muss das Menü aber als bearbeitbaren Bereich belassen, sonst kann man die Klasse "here" nicht zuweisen.

Ich habe jetzt hier nur den allgemeinen Link eingefügt. Du setzt das Ganze ja noch als Liste. Tag li am Anfang und Ende.

Top_Gun · 18.11.2008

AW: Aktives Menüelement anders gestalten

Flosse schrieb:
Also auf der Startseite wird sie hier gesetzt:
<a href="index.htm" class="here">Home</a>
<a href="kontakt.htm">Kontakt</a>

Das betrifft dann nur den Homebutton. Kontakt hat die normale Anweisung.

Auf der Kontaktseite wird es beim Button Kontakt gesetzt.

<a href="index.htm">Home</a>
<a href="kontakt.htm" class="here">Kontakt</a>

Im Prinzip legt man sich einmal eine Vorlage an, muss das Menü aber als bearbeitbaren Bereich belassen, sonst kann man die Klasse "here" nicht zuweisen.

Ich habe jetzt hier nur den allgemeinen Link eingefügt. Du setzt das Ganze ja noch als Liste. Tag li am Anfang und Ende.

Und das ist doch genau, das was er nicht machen möchte. Für jede Unterseite das Menu bearbeiten. Das soll durch JS automatisch/dynamisch passieren...

Zeimi3 · 18.11.2008

AW: Aktives Menüelement anders gestalten

@sokie:
Danke für den Hinweis mit den Arrays (*** Skriptsprache :motz:

)

sokie schrieb:
ps:
wenn die Seite dann aufgerufen ist, werden deine Funktionen nicht ausgeführt - also deine Formatierung die ja anzeigen soll, welche Seite grad vorliegt ist dann wieder weg.

Kannst du mir verraten, wie ich es hin bekomme, dass meine geänderte Darstellung bleibt, wenn ich die Seite aufgerufen habe?
Evtl. über onload() ???

Der aktuelle Code, der auch soweit funktioniert lautet:

Code:

<script language="JavaScript1.2" type="text/javascript">
function clearAll(){
var d = document.getElementsByTagName("li");
for(var i=0; i<d.length; i++)
    {
    d[i].className = 'inaktiv';
    }
}

function aktivesElement(das)
{
    //clearAll();
    var d = document.getElementById(das);
    d.className= 'aktiv';
}
</script>
</head>
<body>
<div id="menu">
<ul id="ul_menu">
    <li id="m0" class = "inaktiv"><a href="index.html" onclick="aktivesElement('m0')")>Startseite</a></li>
    <li id = "m1" class = "inaktiv"><a href="kontakt.html"  onclick="aktivesElement('m1')">Kontakt</a></li>
    <li id="m2" class = "inaktiv"><a href="*****.html" onclick="aktivesElement('m2')">*****</a></li>
    </ul>
</div>
</body>
</html>

@TopGun:
Danke, anscheind hab ich mich für Flosse unverständlich ausgedrückt

sokie · 22.11.2008

AW: Aktives Menüelement anders gestalten

Zeimi3 schrieb:
Evtl. über onload() ???

genau.
am einfachsten ist es den URL zu nehmen, und auf den seitennamen zu reduzieren, zB home.htm -> home.
dann kannst du deinen links eindeutige IDs geben zB
id="home", id="impressum" usw.

auf der ensprechenden Seite wird einfach bei onload dem <a> tag mit der entspechenden id die aktive Klasse zugewiesen, und das wars.