• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown Menü Problem

D

drunkenartist

Neues Mitglied
Hi guys,

hui schönes Forum :) hab mich hier mal angemeldet weil ich jetzt gerade, bzw. auch zukünftig (ich weiß das jetzt schon ^^ ) Probleme habe(n werde).

Und zwar folgendes: Ich habe ein Dropdown Menü, bzw. eine Dropdown Linkleiste. Diese Linkleiste hat bereits einen Hover-Effekt, der reibungslos fuktioniert, benötigt allerdings noch die Tatsache, dass wenn man auf einer Seite aus diesem Linkmenü ist, diese Seite auch anders farbig hinterlegt ist. Man soll ja schließlich wissen wo man sich gerade befindet, nicht oder?
Habe schon "active" und "visited" ausprobiert, funktioniert aber komischerweise beides nicht ... bei anderen Gelegenheiten in denen ich "active" und "visited" gebraucht habe, hat es eigentlich immer funktoniert.

So nun hier mal mein Quelltext von der .html-Datei:
Code: 
<div id="Nav2Aktiv">
        <img src="../.../Bild.png" />
        <div id="Schrift2"> <img src="../.../Bild2.png" /></div>
        <a href="1.html"><div id="1"><font size="1px"><br /></font><strong>1</strong></div></a>
        <a href="2.html"><div id="2"><font size="1px"><br /></font><strong>2</strong></div></a>
        <a href="3.html"><div id="3"><font size="1px"><br /></font><strong>3</strong></div></a>
        <a href="4.html"><div id="4"><font size="1px"><br /></font><strong>4</strong></div></a>
        <a href="5.html"><div id="5"><font size="1px"><br /></font><strong>5</strong></div></a>
        <a href="6.html"><div id="6"><font size="1px"><br /></font><strong>6</strong></div></a>
        <a href="7.html"><div id="7"><font size="1px"><br /></font><strong>7</strong></div></a>
        <a href="8.html"><div id="8"><font size="1px"><br /></font><strong>8</strong></div></a>
        </div>

So und hier mal mein Quelltext von der .css-Datei:
Code: 
    #Nav2Aktiv
            {
                position:absolute;
                left:250px;
                top:261px;
                height:81px;
                width:500px;
                opacity:0;
                overflow:hidden;
            }
            
    #Nav2Aktiv:hover
            {
                transition:1s;
                opacity:1.0;
                height:571px;
            }
            
                
                
                #1
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:78px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                
                    #1:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                                    
                
                #2
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:128px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #2:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                #3
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:178px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #3:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                #4
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:228px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #4:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                #5
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:278px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #5:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                    
                    
                            
                #6
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:328px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #6:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                #7
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:378px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #7:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }
                #8
                {
                    background-color:#3d3d3d;
                    border-top-style:solid;
                    border-top-color:#232323;
                    border-top-width:medium;
                    position:absolute;
                    top:428px;
                    width:100%;
                    height:50px;
                    z-index:1;
                    line-height:50%;
                    font-size:30px;
                    color:#fff;
                    text-align:center;                    
                }
                    #8:hover
                    {
                        transition:0.5s;
                        background-color:#262626;
                        color:#2476FE;
                    }

ich weiß sehr lang und man hätte es eigentlich auch kürzer machen können, aber zu dem Zeitpunkt wusste ich das noch nicht ^^

so und wenn ich jetzt sagen wie unter "#8:hover" jetzt noch
Code: 
#8:active
                    {
                        background-color:#262626;
                        color:#2476FE;
                    }

oder

Code: 
#8:visited
                    {
                        background-color:#262626;
                        color:#2476FE;
                    }

dann passiert da leider gar nichts. Aber ich hätte das schon gerne. Was mache ich falsch? Ich finde nämlich keine Lösung!
(ach und keine Angst, in Wirklichkeit stehen da keine Nummern ^^ )

Kann mir jemand helfen? Ich suche schon seit Stunden nach funktionierenden Varianten, aber bisher war nichts passendes dabei.

Danköööö

MfG

drunkenartist
 
Du hast das Menü nicht als Menü aufgebaut und gleichzeitig auch noch eine Menge HTML-Fehler eingebaut. Die Fehler nenn ich nur mal kurz:
* innerhalb von <a> dürfen keine Blockelemente wie <div> vorkommen
* eine ID darf nicht mit einer Zahl beginnen und auch nicht ausschließlich aus Zahlen bestehen
* <font> verwendet man heute nicht mehr, nutze statt dessen CSS um Texte zu gestalten
* ein Zeilenumbruch sollte nicht zum Erreichen von Abständen dienen

Und nun zu dem was Du machen solltest: alles neu. Schau dir am besten mal richtige Aufklappmenüs an, wie man sie (heute und schon seit Jahren) erstellt und die auch (im Gegensatz zu deinem Konstrukt) problemlos funktionieren. Beispiele findest Du hier:
Drop-Down-Menü mit CSS und (fast) ohne Javascript
Artikel:Eine zugängliche Multilevel-Dropdown-Navigation
 
Vielen herzlichen Dank. Das mit den Zahlen hatte ich ja nur gemacht, um den wirklichen Text auszublenden ^^ Mensch doch so schlimm, Gott sei dank gibts Hilfe :)
Danke nochmal und ich werd mich gleich mal darum kümmern.

MfG

drunkenartist
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben