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

div/img --> hover --> another div

majesticc89

Mitglied
Servus Leute,
folgendes Problem:

ich habe ein Menü.
<nav>
<ul>
<li>
etc.
</nav>
Nun würde ich dieses Menü gerne via ("@media only screen and (max-width: 480px)") verstecken,
mit display: none;

Wenn man jetzt ein bestimmtes div anklickt (mit background: url("........");)
oder ein img direkt,
sollte es wieder sichtbar werden.

Ich würde das Menü gerne über das Logo aufrufen, kein "Hamburger-Symbol" o.Ä.
Ist das möglich?
Oder ist ein anderer Weg "besser", "einfacher" oder "gängiger"?
Ohne "JavaScript" wenn´s geht.

LG
 
Werbung:
Hey servus,
also erst einmal danke (sehr interessanter Ansatz). Du hast mich aber nicht gänzlich verstanden, vermutlich weil ich mich aber auch nur schnell und unpräzise meine Frage formuliert habe.
Habe etwas vorbereitet:
HTML:
<html>
  <head>
    <title>TestSite</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/basis.css" />
  </head>
  <body>
    <header>
      <div class="stripe"></div>
      <div class="headerlogo"></div>
      <div class="headerschrift">...TEST TEST </div>
      <div class="sidebar">
        <div class="navigation">
          <ul>
            <li class="active"><a href="index.html"> HOME </a></li>
            <li><a href="#"> Menü1 </a></li>
            <li><a href="#"> Menü2 </a></li>
            <li><a href="#"> Menü3 </a></li>
            <li><a href="#"> Menü4 </a></li>
            <li><a href="#"> Menü5 </a></li>
            <li><a href="w#">Menü6</a></li>
          </ul>
        </div> 
      </div>
    </header>
    <main>
      <div class="mainleft"></div>
      <div class="mainstripe"></div>
      <div class="maincontent"></div>
    </main>
  </body>
</html>

CSS:
@charset "UTF-8";

::-webkit-scrollbar {
    display: none;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: grey;
}

header {
   width: 100vw;
   height: 12vw;
   display: flex;
}

.stripe {
  margin-top: 3vw;
  width: 100vw;
  height: 6vw;
  background: white;
  border-top: 0.1vw solid black;
  border-bottom: 0.1vw solid black;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
}

.headerlogo {
  background: url("beispielbild.png");
  background-size: 9vw 12vw;
  margin-left: 4vw;
  width: 9vw;
  height: 12vw;
  position: absolute;
  z-index: 3;
}

.headerschrift {
  margin-top: 7vw;
  margin-left: 90vw;
  font-size: 1.5vw;
  position: absolute;
  z-index: 4;
}

.sidebar {
  width: 10vw;
  height: 12vw;
  background: white;
  margin-left: 3.5vw;
  box-sizing: border-box;
  border-right: 0.1vw solid black;
  border-left: 0.1vw solid black;
  position: absolute;
  z-index: 1;
}

.navigation {
  margin-top: 14vw;
}

.navigation ul li {
  list-style: none;
  text-align: center;
  width: 9.8vw;
}

.navigation ul li a {
  text-decoration: none;
  font-size: 1vw;
  color: black;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  display: block;
}

.navigation ul li a:hover {
  color: red;
  background: rgb(211,211,211,.9);
}

.navigation ul li.active {
  color: red;
  background: rgb(211,211,211,.9);
}

main {
  width: 100vw;
  height: auto;
  display: flex;
}

.mainleft {
  width: 3.5vw;
  min-height: 33vw;
  height: auto;
}

.mainstripe {
  width: 10vw;
  min-height: 33vw;
  height: auto;
  background: white;
  box-sizing: border-box;
  border-right: 0.1vw solid black;
  border-left: 0.1vw solid black;
}

.maincontent {
  background: rgb(211,211,211,.9);
  width: 86.5vw;
  min-height: 33vw;
  height: auto;
}

Wenn man bei dem headerlogo ein Bild einfügt, müsste es links oben erscheinen.Nun würde ich gerne mit Media Queries arbeiten (aber nicht zwingend, lerne gerne Neues dazu).
Bei
" @media only screen and (max-width: 480px) "
sollte das Menü von links nach rechts neben dem Headerbild springen (so weit so "einfach") Nun sollte das Headerbild aber als an/aus Knopf fungieren, die das Menü sichtbar macht/oder wieder entfernt (nicht aber im "vollbildmodus, sprich >480px)
Und das bekomme ich nicht hin.
 
Das ist perfekt, ich danke dir! Ich werde es noch so anpassen, wie ich es brauche und schicke dir dann rein aus Interesse das Resultat, dann verstehst du auch was ich mit dem "Menü nach rechts wegklappen" gemeint habe :)
Hätte das selber def. nicht geschafft.
 
Werbung:
Zurück
Oben