Ergebnis 1 bis 2 von 2

Thema: Responsives Menü ausklappen

  1. #1
    HTML Newbie
    Registriert seit
    07.10.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Responsives Menü ausklappen

    Guten Abend!

    Ich versuche gerade ein responsives Menü zu realisieren.

    Wenn folgende Seite <= 500 Pixel (!) angezeigt wird

    http://www.f1.cgs.onlinebusiness.cc/

    sollte, mit einem Klick auf die grüne Schaltfläche "show menu" eigentlich das Menü in der ersten Ebene ausklappen und bei einem Hover über eine Hauptseite mit Unterseiten, sollten die Unterseiten ausklappen.

    Leider klappt dies nicht.

    Es hängt wohl an folgendem CSS, aber ich finde nicht die Ursache:

    Code:
    /*Show menu when invisible checkbox is checked*/
    #mobmenuprev input[type=checkbox]:checked ~ #mobmenuspace ul {
    display: block;
    }

    /*Display the dropdown on hover*/
    #mobmenuspace ul li a:hover + .hidden, #mobmenuspace .hidden:hover {
    display: block;
    }




    Wenn ich

    #mobmenuspace ul
    #mobmenuspace li ul

    in den Firefox Webdevelopertools manuell auf "display:block;" schalte funktioniert es!

    Hat jemand eine Idee?

    Vielen lieben Dank!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    454
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Responsives Menü ausklappen

    Habe dir mal eine :focus Variante gebastelt.Villeicht kannst du es ja gebrauchen.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
     <meta charset="UTF-8">
    <title>Text des Titels</title>
    <style>
    
    
    section , nav  {
     position:relative;
     outline:none;
    }
    nav ul , nav li {
     margin:0;
     padding:0;
     list-style:none;
     background:#eee;
    }
    
    
    nav li {
     display:inline-block;
     position:relative;
    }
    
    
    nav a {
     display:block;
     padding:10px;
     text-decoration:none;
     color:#000;
    }
    
    
    nav a:hover {
     color:#f00;
    }
    
    
    nav li ul {
     position:absolute;
     left:-9999em;
     top:-9999em;
    }
    
    
    nav li li {
     display:block;
     width:200px;
    }
    nav li:hover ul  {
     left:0;
     top:auto;
    }
    
    
    
    
    @media (max-width: 640px) {
    
    
    nav:before {
      display:block;
      content:"|||";
      padding: 10px;  
      background:#a33;
      color:#fff;
      cursor:pointer;
      font-weight:bold;
    }
    nav ul {
     height:0;
     overflow:hidden;
    }
    
    
    nav li {
     display:block;
    }
    nav li ul {
     padding-left:2em;
    }
    nav:focus ul , ul:active  {
     position:relative;
     height:auto;
     top:auto;
     left:0;
    }
    
    
    section p:before {
     content:"X";
     position:absolute;
     top:0;right:0;
     padding: 10px;  
     background:#09c;
     color:#fff;
     cursor:pointer;
     font-weight:bold;
    }
    
    
    
    
    </style>
    </head> 
    <body>
    <section>
    <nav tabindex="0">
    <ul>
    <li><a tabindex="0"  href="start/">Start</a></li>
    <li><a tabindex="0"  href="ueber-uns/">Über uns</a>
     <ul class="hidden">
      <li><a  tabindex="0"  href="ueber-uns/einblicke/">Einblicke</a></li>
      <li><a  tabindex="0"  href="ueber-uns/wir-auf-facebook/">Wir auf Facebook</a></li>
      <li><a  tabindex="0"  href="ueber-uns/partner/">Partner</a></li>
      <li><a  tabindex="0"  href="ueber-uns/subpage-2/">Sargschmuck</a></li>
      <li><a  tabindex="0"  href="ueber-uns/idden-urnenschmuck/">Urnenschmuck</a></li>
      <li><a  tabindex="0"  href="ueber-uns/kraenze/">Kränze</a></li>
      <li><a  tabindex="0"  href="ueber-uns/gestecke/">Gestecke</a></li>
     </ul>
    </li>
    <li><a tabindex="0"  href="aktuelles/">Friedhöfe</a></li>
    <li><a tabindex="0"  href="bestattung/">Bestattung</a>
     <ul class="hidden"><li><a tabindex="0"  href="bestattung/erdbestattung/">Erdbestattung</a></li>
      <li><a tabindex="0"  href="bestattung/feuerbestattung/">Feuerbestattung</a></li>
      <li><a tabindex="0"  href="bestattung/urnenbeisetzung/">Seebestattung</a></li>
      <li><a tabindex="0"  href="bestattung/r/">Diamantbestattung</a></li>
      <li><a tabindex="0"  href="bestattung/seebestattung/">Friedwald</a></li>
      <li><a tabindex="0"  href="bestattung/urne-zu-hause/">Urne "zu Hause"</a></li>
      <li><a tabindex="0"  href="bestattung/thanatopraxie/">Thanatopraxie</a></li>
      <li><a tabindex="0"  href="bestattung/bestattungsvorsorge/">Bestattungsvorsorge</a></li>
      <li><a tabindex="0"  href="bestattung/kosten/">Kosten</a></li>
     </ul>
    </li>
    <li><a tabindex="0"  href="trauerfall/">Trauerfall</a>
     <ul><li><a tabindex="0"  href="trauerfall/1/">Benötigte Unterlagen</a></li>
      <li><a tabindex="0"  href="trauerfall/wenn-ein-kind-stirbt/">Sozialbestattung</a></li>
      <li><a tabindex="0"  href="trauerfall/bestattung-von-amtswegen/">Wenn ein Kind stirbt</a></li>
      <li><a tabindex="0"  href="trauerfall/besondere-bestattung/">Exklusiv</a></li>
     </ul>
    </li>
    <li><a tabindex="0"  href="downloads/">Trauerartikel</a>
     <ul><li><a tabindex="0"  href="downloads/saerge/">Särge</a></li>
      <li><a tabindex="0"  href="downloads/urnen/">Urnen</a></li>
      <li><a tabindex="0"  href="downloads/shop/">Wäsche</a></li>
     </ul>
    </li>
    <li><a tabindex="0"  href="kontakt/">Kontakt</a>
     <ul><li><a tabindex="0"  href="kontakt/datenschutz/">Datenschutz</a></li>
      <li><a tabindex="0"  href="kontakt/impressum/">Impressum</a></li>
     </ul>
    </li>
    </ul>
    </nav>
    <p tabindex="0"></p>
    </section>
    </body>
    </html>
    @edit
    Wie ich sehe, hast du es wohl hinbekommen. Bedenke aber, dass mobile Geräte kein Hover können bzw. nur eingeschränlt.
    Noch was, haltet euch an den Forenregeln(Crossposting)
    http://xhtmlforum.de/73010-responsiv...usklappen.html
    Geändert von djheke (08.10.2016 um 19:02 Uhr)

Ähnliche Themen

  1. Responsives Template
    Von Sundream im Forum Webanwendungen - Webapplikationen
    Antworten: 11
    Letzter Beitrag: 25.09.2015, 16:14
  2. Menü
    Von Sébastien Fournereau im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 17
    Letzter Beitrag: 29.05.2015, 21:01
  3. Antworten: 11
    Letzter Beitrag: 06.04.2015, 12:45
  4. Antworten: 0
    Letzter Beitrag: 16.03.2015, 18:22
  5. Video ein/ausklappen
    Von NeubauJefferson im Forum HTML & CSS Forum
    Antworten: 23
    Letzter Beitrag: 27.01.2009, 22:46

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •