responsive Ansicht: Hervorhebung - CSS, HTML

all23

hi,

es gibt einen Menüpunkt mit der class=current, der hervorgehoben ist bzw. sein soll. In der responsive Ansicht werden jedoch auch dessen untergeordnete hervorgehoben. Woran liegt das?
Das sehe ich nicht / verstehe ich nicht ...

In der resp.-Ansicht sollte nur 1aa blau sein, nicht auch das folgende 1aaa.

all

HTML

<!DOCTYPE html>
<html id="nav-open">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>1a — 1a</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
nav li               { font-weight: 400; }
nav li a              { text-decoration: none; }
nav li:hover a         { color: #fff; }                         
a                     { font-family: sans-serif; }


a:link, a:focus, a:active    { color: #ccc; } 
a:hover                     { background-color:black;  }
a:visited                    { color: #ccc; }  


nav li a:visited      { color:#ccc; }     

a.nav-toggle.nav-open        { color:black; }
a.nav-toggle.nav-closed        { color:black; }


nav {   
    z-index: 55; 
    position:fixed;
    top: 0;    
    width:100%;
    height:0;    
    margin: 0;            
    padding: 0;            
    overflow:hidden;  
    transition:height .2s ease-in-out;  
    line-height: 1em; 
}        
nav ul   { position: relative;  margin-top:0px;  }
nav li      { float:left; position: relative; background-color:gray; }   
nav li a { display: block; padding: 10px 20px; }
nav ul li:hover > ul { display: block; padding-left:0px; z-index: 99; }
nav li a:visited { color: red; }
nav ul ul { display: none; position: absolute;  }
nav ul ul li { width: 100%; }
nav ul ul ul { left: 100%; top: 0; }   
nav .current { background-color: blue; }


.nav-toggle {
    z-index:99;
    display:block;
    position:fixed;
    right:0;
    top:0;   
    padding: 0.35em 0.6em 0.35em 0.8em; 
    cursor:pointer;
    border-radius: 0 0 0 0.6em; 
    background-color:gray;
    text-decoration:none;
}
.nav-toggle:hover {
    background-color:#444;
}
#nav-open:target .nav-closed {
    display:block;
}
.nav-closed, #navi-closed:target .nav-closed, #nav-open:target .nav-open {
    display:none;
}












@media screen and (max-width: 49.938em) {

nav { position: relative; left:0; background:rgba(10, 10, 10, 0.7); }
nav ul { left:0; padding-left:0; }
nav ul ul { display: block; position: relative; }
nav ul ul ul { position: relative; left:0; top:0; }
nav li { background:none; }
nav li li { padding-left:11px; }


#nav-open:target nav { height:auto; }
#nav-open:target nav ul li { display:block; width:100%; height:auto; }


}






@media screen and (min-width:50em) {


    nav {    
        overflow:visible; 
        float:left;     
        width:auto;
        display:block !important;
        height:auto;
    }        
    nav li                 { width:auto; margin: 0;  }
    .nav-toggle         { display:none !important; }     

}

    </style>

</head>












<body id="1aa">

    <h1>1aa</h1>


<header>

    <nav>
        <ul>
<li class="index"><a href="/" title="Welcome">start</a></li>
<li class="p1"><a href="/index.php?id=p1" title="p1">p1</a></li>
<li class="contact"><a href="/index.php?id=contact" title="contact">contact</a></li>
<li class="formate currentpath open"><a href="/index.php?id=formate" title="formate">formate</a>
<ul>
    <li class="1a formate currentpath open">
        <a href="/index.php?id=1a" title="1a">1a</a>
        <ul>
            <li class="1aa 1a current open">
                <a href="/index.php?id=1aa" title="1aa">1aa</a>
                <ul>
                    <li class="x1aaa 1aa">
                        <a href="/index.php?id=1aaa" title="1aaa">1aaa</a>
                    </li>
                </ul>
            </li>
            <li class="x1ab 1a"><a href="/index.php?id=1ab" title="1ab">1ab</a></li>
        </ul>
    </li>
</ul>
</li>
        </ul>
    </nav>

    <div role="navigation" class="noprint">
        <a class="nav-toggle nav-open" href="#nav-open">☰</a>
        <a class="nav-toggle nav-closed" href="#nav-closed">☰</a>
    </div>

</header>








</body></html>

Alles anzeigen

MrMurphy

Hallo

Das li mit der Klasse .current enthält selbst noch eine Liste. Bei breiten Fenstern wird diese innere Liste mit position: absolute; aus dem Dokumentfluß genommen, bei schmalen Fenstern nicht. Deshalb wird li.current bei schmalen Fenstern und Anzeige der inneren Liste höher.

Das CSS ist leider recht unübersichtlich, da min- und max-width gleichzeitig verwendet werden. Das solltest du vermeiden. So ist eine konkrete Lösung nur schwierig zu finden, da sie dir bei Änderungen schnell um die Ohren fliegen wird.

Du könntest die Klasse .current zum Beispiel direkt dem a-Element zuordnen.

Gruss

MrMurphy

all23

mmh - dann ist die background-li-Zuweisung in dem Menü-Zusammenhang falsch?
Danke für die Erklärung.
Ein nav li:first-child .current { background-color: blue; } funktioniert leider auch nicht.
.current dem a-Element zuordnen geht eher nicht, da es sich hier um ein CMS-output handelt. So kann der Fehler hier immer beim Einfügen einer neuen Seite poassieren. Schade.
Die beiden width's bräuchte ich für das css-responsive-Menü-design - denke ich. Das hat mit dem Fehler aber nichts zu tun?
all

MrMurphy

Hallo

Zitat

Das hat mit dem Fehler aber nichts zu tun?

Richtig.

Das li-Element ist ein Container, der Inhalt enthält, in deinem Fall das a-Element und ein ul-Element. Wie bei allen anderen Containern, zum Beispiel div-Elementen vergrößert der Inhalt den Container und damit auch die Fläche der Hintergrundfarbe.

Wie du dabei dem li-Element die Hintergrundfarbe zuweist spielt überhaupt keine Rolle. Wenn nur dem a-Element eine andere Hintergrundfarbe zuweisen willst darfst du auch nur genau das auswählen.

Zitat

.current dem a-Element zuordnen geht eher nicht, da es sich hier um ein CMS-output handelt.

Es ist sinnvoll wenn du uns im voraus informierst welche Änderungen du überhaupt vornehmen kannst. Wenn wir uns Lösungen ausdenken und hinterher erfahren, dass der Fragesteller die überhaupt nicht umsetzen kann ist das nervig und frustrierend.

Das a-Element kann auch mit CSS direkt ausgewählt werden ohne etwas am Quelltext zu ändern. Dazu muss nur

Code

nav .current {
        background-color: blue;
    }

durch

Code

nav .current>a {
        background-color: blue;
    }

ersetzt werden.

Aus dem restlichen CSS halte ich mich raus. Ohne das CSS gründlich aufzuräumen und sinnvoll strukturieren bringen Änderungen überhaupt nichts. Nach einem ersten Überblick ist etwa ein drittel bis ein viertel des CSS veraltet oder überflüssig. Unnötige CSS-Angaben erzeugen immer wieder Probleme und sollten deshalb vermieden werden.

Gruss

MrMurphy

all23

hi & vielen Dank!

"veraltetes CSS": ich kenne mich nicht so aus und denke zumindest alte browser können damit umgehen und aufwärtskompatibel wirds auch sein - ohne eine Diskussion vom Zaun brechen zu wollen.

Dies Zeichen ">" im CSS kenne o. kannte ich nicht richtig ... nutzte ich sozusagen blind. Das ist wohl eine Zuweisung. Jedenfalls passt die a-Element-Zuweisung (auch):

nach stundenrundem Suchen & Probieren fand ich gestern noch das raus:

HTML

li.current > :first-child   { background-color: green; }

das zumindest in meinem Menüzusammenhang gut passt.
Frage wäre, welche Lösung mehr Geräte richtig bedienen würde.

In den mobile-Vorschauen kann man ja meist das Menü nicht mit der Maus bedienen.

all

Tags