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

[ERLEDIGT] Hamburger Menü - Verschieben statt überlappen

Status
Für weitere Antworten geschlossen.
T

tsunami

Neues Mitglied
Hallo zusammen,
ich habe eine kleine php-generierte Seite.
Also Menü habe ich nur 4/5 Punkte, daher möchte ich ein Hamburger-Menü realisieren. Ohne Schnickschnack, ohne Javascript. css3 und html.
Komischerweise verschiebt der mir die Inhalte, statt sich drüber zu legen. :
Das css:
Code: 
nav > ul > li {
  display: none;
  position:absolute;
}

nav > ul:hover li {
  display: block;
    position:relative;
}

nav > ul::before {
  display: block;
  content: "Menü";
  padding: 10px;  #
    position:relative;
}

Der entscheidene html-Teil:

HTML: 
<head>...</head>
<body>
<h2  class="ueberschrift">Ticket&uuml;bersicht - Elektro</h2>
....
<nav>
<ul>
  <li><a href="/">Start</a></li>
  <li><a href="#">Profil</a></li>
  <li>blah a</li>
  <li>blah b</li>
</ul>
</nav>
</body>

Also nix wildes. Mit position:absolute habe ich experimentiert, dann schreibt er mri alle Listenelemente übereinander. any idea? Vielen Dank ür Hinweise
 
Ein Hamburger Menu verwendet man normaler Weise nur bei Mobile Devices und dort zieht es sich über die gesamte Höhe und Breite. Da man bei Touchscreens nicht hovern kann, musst du das ohnehin per JS triggern.
 
Er hat doch Positionierungsprobleme. Hier mal eine :focus Alternative
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<style>


nav {
 position:relative;
}
nav  ul  {
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:-99999em;
 width:100%;
 background:#333;
}
nav:hover ul , nav:focus ul  {
 left:auto;
}
nav::before {
  display: block;
  content:"|||";
  padding: 10px;  
  background:#a33;
  color:#fff;
 cursor:pointer;
 font-weight:bold;
}

nav a {
 display:block;
 padding:5px;
 color:#fff;
 text-decoration:none;
}
</style>

<title></title>


</head>
<body>

<nav tabindex="0">
<ul>
  <li><a href="/">Start</a></li>
  <li><a href="#">Profil</a></li>
  <li><a href="/">Start</a></li>
  <li><a href="#">Profil</a></li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</html>
{/code]
 
Erstmal danke für die schnelle Antwort. Sinn und Zweck war nicht die Frage. ;)

Hover, ok noch besser wäre klick. Und irgendwo habe ich es mal gelesen, finde es aber nicht. Der Trick war mit nem Anker nen Link zu erzeugen, der quasi auf sich selber zeigt. Beim Klick wird das Menü sichtbar. Dort kann ich dann die gewünschte Seite aufrufen. Wie geschrieben nichts wildes. 1 Hauptseite, Kontakt, Einstellungen, Benutzer und Hilfe. Also 5 vielleicht noch eine 6. Seite. Braucht also kein wildes Menü. Also Klick-Drop-Down wäre Ok.
 
tsunami schrieb:
Erstmal danke für die schnelle Antwort. Sinn und Zweck war nicht die Frage. ;)

Hover, ok noch besser wäre klick. Und irgendwo habe ich es mal gelesen, finde es aber nicht. Der Trick war mit nem Anker nen Link zu erzeugen, der quasi auf sich selber zeigt. Beim Klick wird das Menü sichtbar. Dort kann ich dann die gewünschte Seite aufrufen. Wie geschrieben nichts wildes. 1 Hauptseite, Kontakt, Einstellungen, Benutzer und Hilfe. Also 5 vielleicht noch eine 6. Seite. Braucht also kein wildes Menü. Also Klick-Drop-Down wäre Ok.
Zum Vergrößern anklicken....

Nicht dass ich es empfehlen würde, aber ich denke du meinst ":target".
https://css-tricks.com/off-canvas-menu-with-css-target/
 
tsunami schrieb:
Komischerweise verschiebt der mir die Inhalte, statt sich drüber zu legen. :

Also nix wildes. Mit position:absolute habe ich experimentiert, dann schreibt er mri alle Listenelemente übereinander. any idea? Vielen Dank ür Hinweise
Zum Vergrößern anklicken....

Für mich ist es eine eindeutige Frage. Und :focus verhält sich auch aber nicht nur wie Klick
 
Also: Ichhabe nun beides probiert. Beim target shreibt er mir nur den Link Menu.
Beim Focus bekomme ich ein normales hover...
 
Also:
Nun habe ich es fast so, wie es sein soll:
Code: 
nav {
position:relative;
}
nav  ul  {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-99999em;
background:lightblue;
color:black;   border-bottom:1px solid white;
padding:0px 3px 0px 3px;
}
nav:focus ul , nav:active ul {
left:auto;
}
nav::before {
  display: block;
  content:url(../mainimages/timo_schluessel.png);
  padding: 10px; 
  width:10px;
  color:#fff;
cursor:pointer;
font-weight:bold;
}

nav a {
display:block;
padding:3px;
color:black;
text-decoration:none;
  border-bottom:1px solid white;
}
nav a:focus {
background:#09c;
}
a:hover {background-color:white;}

Kleiner Fehler: Beim Chrome habe ich, sobald ich aufs Menü klicke so einen Rahmen in lightblue um das ganze Elememt und das geht über die ganze Seite.

Chrome:
http://screencast.com/t/5LzGKv12U
firefox
http://screencast.com/t/SgXU4SILw
 
Hau. Das wars. Noch width;20px hinzugefügt.
EIn fettes Dankeschön an Alle!
Das nenne ich mal ein gutes Forum! Keine dummen Kommentare wie google nutzen...
Vielen Dank!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben