Anzeige

Aktives Menüelement anders gestalten

Aktives Menüelement anders gestalten | PSD-Tutorials.de

Erstellt von Zeimi3, 17.11.2008.

  1. Zeimi3

    Zeimi3 Guest

    Aktives Menüelement anders gestalten
    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 (Text):
    1. <li><a href="#">Punkt 1</a>
    funktioniert, aber
    Code (Text):
    1. <li><a href="punkt1.html">Punkt 1</a>
    nicht. Bei der zweitn Variante, wird das menu kurz eingeblendet, allerdings nur bei
    Code (Text):
    1. onclick=("")
    und verschwindet danach wieder.

    Mfg Zeimi3
     
    #1      
  2. Flosse

    Flosse Noch nicht viel geschrieben

    Dabei seit:
    23.09.2007
    Beiträge:
    44
    Geschlecht:
    weiblich
    Aktives Menüelement anders gestalten
    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.
     
    #2      
  3. redbug

    redbug Freizeitworkaholic

    Dabei seit:
    08.01.2008
    Beiträge:
    491
    Geschlecht:
    männlich
    Software:
    Photoshop CS3, Golive
    Aktives Menüelement anders gestalten
    AW: Aktives Menüelement anders gestalten

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

    Zeimi3 Guest

    Aktives Menüelement anders gestalten
    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 (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>test</title>
    7. <link href="css.css" rel="stylesheet" type="text/css" />
    8. <script language="JavaScript1.2" type="text/javascript">
    9. function clearAll(){
    10. var d = document.getElementByTag("a");
    11. d.class = "inaktiv";
    12. }
    13. function akitvesElement(das){
    14.     clearAll();
    15.     document.getElementById(das).class="aktiv";
    16. }
    17. </script>
    18. </head>
    19. <body>
    20. <div id="menu">
    21. <ul id="ul_menu">
    22.     <li><a href="index.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>Startseite</a></li>
    23.     <li><a href="kontakt.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>Kontakt</a></li>
    24.     <li><a href="*****.html" class="inaktiv" id="1" onclick=("aktivesElement(this.id)")>*****</a></li>
    25. </ul>
    26. </div>
    27.  
    28. </body>
    29. </html>
    30.  
    Hier der Code der CSS-Datei
    Code (Text):
    1.  
    2. @charset "utf-8";
    3. /* CSS Document */
    4.  
    5. #menu{
    6. width: 200px;
    7. color:#FFFFFF;
    8. font:Verdana, Arial, Helvetica, sans-serif medium;
    9. }
    10.  
    11. #ul_menu{
    12. list-style:inside;
    13. display: block;
    14. width: 100%;
    15. margin: 0px;
    16. }
    17. #ul_menu li{
    18. background:#00FF00;
    19. width: 100%;
    20. }
    21. #ul_menu li a.inaktiv{
    22. color:#FFFFFF;
    23. }
    24. #ul_menu li a.aktiv{
    25. color:#FF0000;
    26. }
    27.  
     
    #4      
  5. Flosse

    Flosse Noch nicht viel geschrieben

    Dabei seit:
    23.09.2007
    Beiträge:
    44
    Geschlecht:
    weiblich
    Aktives Menüelement anders gestalten
    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.
     
    #5      
  6. Zeimi3

    Zeimi3 Guest

    Aktives Menüelement anders gestalten
    AW: Aktives Menüelement anders gestalten

    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!
     
    #6      
  7. Flosse

    Flosse Noch nicht viel geschrieben

    Dabei seit:
    23.09.2007
    Beiträge:
    44
    Geschlecht:
    weiblich
    Aktives Menüelement anders gestalten
    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.
     
    #7      
  8. Zeimi3

    Zeimi3 Guest

    Aktives Menüelement anders gestalten
    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.
     
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Aktives Menüelement anders gestalten
    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 (Text):
    1.  
    2. [COLOR=Red]<script language="JavaScript1.2" type="text/javascript">
    3. function clearAll(){
    4. var d = document.getElementByTag("a");
    5. d.class = "inaktiv";
    6. }
    7. function akitvesElement(das){
    8.     clearAll();
    9.     document.getElementById(das).class="aktiv";
    10. }[/COLOR]
    11. </script>
    12.  
    13.  
    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.
     
    Zuletzt bearbeitet: 18.11.2008
    #9      
  10. Flosse

    Flosse Noch nicht viel geschrieben

    Dabei seit:
    23.09.2007
    Beiträge:
    44
    Geschlecht:
    weiblich
    Aktives Menüelement anders gestalten
    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.
     
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Aktives Menüelement anders gestalten
    AW: Aktives Menüelement anders gestalten

    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...
     
    #11      
  12. Zeimi3

    Zeimi3 Guest

    Aktives Menüelement anders gestalten
    AW: Aktives Menüelement anders gestalten

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

    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 (Text):
    1.  
    2. <script language="JavaScript1.2" type="text/javascript">
    3. function clearAll(){
    4. var d = document.getElementsByTagName("li");
    5. for(var i=0; i<d.length; i++)
    6.     {
    7.     d[i].className = 'inaktiv';
    8.     }
    9. }
    10.  
    11. function aktivesElement(das)
    12. {
    13.     //clearAll();
    14.     var d = document.getElementById(das);
    15.     d.className= 'aktiv';
    16. }
    17. </script>
    18. </head>
    19. <body>
    20. <div id="menu">
    21. <ul id="ul_menu">
    22.     <li id="m0" class = "inaktiv"><a href="index.html" onclick="aktivesElement('m0')")>Startseite</a></li>
    23.     <li id = "m1" class = "inaktiv"><a href="kontakt.html"  onclick="aktivesElement('m1')">Kontakt</a></li>
    24.     <li id="m2" class = "inaktiv"><a href="*****.html" onclick="aktivesElement('m2')">*****</a></li>
    25.     </ul>
    26. </div>
    27. </body>
    28. </html>
    29.  
    @TopGun:
    Danke, anscheind hab ich mich für Flosse unverständlich ausgedrückt
     
    #12      
  13. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Aktives Menüelement anders gestalten
    AW: Aktives Menüelement anders gestalten

    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.
     
    #13      
x
×
×
teststefan