nicht angemeldet
Hoverfunktion wird nicht angezeigt
Gunnar Bittersmann
Camping_RIDERHallo,
ich bin hier neu, hoffe mein Beitrag ist richtig eingeordnet.
Ich möchte keinen Baukasten für eine private Homepage nutzen sondern selbst eine seite mit Dreamweaver gestalten.
Nun klemme ich an der Navigation fest.
Mein Problem:
ich habe 2 Navigationen je ein Div
im Desktop view wird das eine ausgeblendet im mobilen View das andere.
Die Mobile Navigation funktioniert im "Global view" einwandfrei, nur wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr.
Vielen Dank für die Hilfe!
@charset "UTF-8";
.topnav {
display: none;
}
/* CSS Document */
@media (max-width:450px){
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #f4f5e7;
position: relative;
display: block;
}
.desktopmenue {
display: none;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
background-color: #9AAABB;
}
.topnav #myLinks a:hover {
background-color: #FFFFFF;
}
/* Style navigation menu links */
.topnav a {
color: #F4F5E7;
padding-top: 14px;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 14px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
background-color: #163960;
display: block;
position: absolute;
right: 0;
top: 0;
padding-top: 16px;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #9aaabb;
color: #0c2949;
}
/* Style the active link (or home/logo) */
.active {
background-color: #0C2949;
color: #F4F5E7;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<link href="subtestmobil.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="desktopmenue">menue desktop view</div>
<div class="topnav">
<a href="#home" class="active">Maximillian</a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
-
@@Maximillian
ich habe 2 Navigationen je ein Div
Das sollten
nav-Elemente sein.wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr.
Kann ich nicht nachvollziehen. Link zur Seite?
Dein HTML weist außer dem bereits genannten noch weitere Fehler auf:
Die
meta viewport-Angabe fehlt.<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a>href="javascript:void(0);"ist ein sicheres Indiz dafür, dass dasa-Element falsch ist. Links führen zu einem Ziel: einer anderen Seite bzw. einem anderen Bereich auf der aktuellen Seite.Für Aktionen auf der Seite (z.B. Auf-/Zuklappen von Inhalten) sind
buttons zu verwenden.Außerdem muss jedes interaktive Element eine Beschriftung (Text) haben. Deins hat keinen Inhalt; „Menü“ wäre hier angebraxcht. Evtl. kannst du die Beschriftung visuell verstecken; aber sie muss vohanden sein – für Nutzer, die deine Seite nicht visuell wahrnehmen.
function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }Es ist nicht sinnvoll, dass Element
myLinksbei jedem Aufruf der Eventhandlerfunktion erneut im DOM zu suchen. Das tut man besser einmalig, also außerhalb der Funktion.Mal abgesehen davon, dass du hier den bedingten Operator hättest verwenden können, ist es grundsätzlich nicht besonders gut, Stileigenschaften direkt mit JavaScript zu ändern. (Das ist allerdings „schwer…in die Köpfe der Menschen zu bringen“.)
Statt
style.displayzu ändern, bietet es sich an, dashidden-Attribut zu setzen bzw. zu löschen.Außerdem kann mit einem ARIA-Attribut
aria-expandedder jeweilige Zustand des Toggle-Buttons angezeigt werden.Das alles kannst du dir in diesem Codepen ansehen, mit Erklärungen darin.
Und hier habe ich noch ein responsives Menü, wo die Links nicht gedoppelt werden. Erklärung dazu.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)-
Aloha ;)
Ich mag deine sehr individuellen, umfassenden Hilfestellungen, gerade für "Neulinge", und ich bewundere, wie du für alles mögliche sinnvolle Zitate oder weiterführende Links aus dem Hut zaubern kannst. Ich glaube, das wird dir viel zu selten gesagt.
Das alles kannst du dir in diesem Codepen ansehen, mit Erklärungen darin.
Hierzu vielleicht noch ein Kommentar, bzw. eine Frage. Wenn es einen Button zum Auf- und Zuklappen gibt, dann irritiert es mich (habe ich eben herausgefunden), wenn man das Menü nicht auch mit dem Button zuklappen kann. Die hover-Funktionalität finde ich da also dann, glaube ich, eher schwierig. Ich würde vermutlich bevorzugen, das Untermenü dann nur mit dem Button auf- und zuklappen zu können, oder, dass das Menü alternativ nur beim "hineinfahren" mit der Maus aufklappt (was der Button dann auch anzeigen sollte) und dann aber via Button zuklappbar bleibt.
Ich hoffe es war einigermaßen verständlich, was ich da sagen wollte.
Grüße,
RIDER
-
einen ganz lieben Dank,
werde mich da durcharbeiten.
werde mein Projekt dann zeigen....
Liebe Grüße
Max
-
-