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

Menü Probleme bei Media Queries

majesticc89

majesticc89

Mitglied
Hallo Leute,
ich habe ein so dämliches Problem, dass es mir zum Teil sogar peinlich ist, es hier zu posten, aber ich komme wirklich nicht mehr weiter.

Ich habe ein Menü gemacht, dass auf dem Handy (Media Queries max. 420px) zu einem Burgermenü werden sollte. Soweit passiert das auch...
Mein Problem liegt in der zweiten Ebene. Diese wird nur extrem klein angezeigt und man müsste noch eine "DoubleTap" Funktion hinzufügen, den wenn man bspw. "Seite4" antippt, sollte man ja noch 4.1 und 4.2 zu sehen bekommen.
Ich habe das Menü sicher nicht sauber gestaltet, daher wäre ich auch für jegliche Hinweise o.Ä. sehr dankbar.
Zu bedenken ist, dass Seite 4 auch auf bspw. seite4.html verlinkt (Daher die DoubleTapFunktion, jedoch nur bei Menüpunkten, die keine eigenen Unterpunkte haben.)
Man kanns vermutlich nicht noch komplizierter erklären wie ich gerade aber ich denke ihr versteht es, wenn ihr den Code seht...

HTML: 
<body>
  <nav id="nav" role="navigation">
          <a href="#nav" title="Show navigation">Show navigation</a>
          <a href="#" title="Hide navigation">Hide navigation</a>
          <ul>
              <li class="active"><a href="index.html">Startseite</a></li>
              <li>
                  <a href="/" aria-haspopup="true"><span>Seite 1</span></a>
                  <ul>
                      <li><a href="/">Seite 1.1</a></li>
                      <li><a href="/">Seite 1.2</a></li>
                  </ul>
              </li>
              <li><a href="index.html">Seite 2</a></li>
              <li><a href="index.html">Seite 3</a></li>
              <li>
                  <a href="/" aria-haspopup="true"><span>Seite 4</span></a>
                  <ul>
                      <li><a href="/">Seite 4.1</a></li>
                      <li><a href="/">Seite 4.2</a></li>
                      <li><a href="/">Seite 4.3</a></li>
                  </ul>
              </li>
              <li><a href="index.html">Seit 5</a></li>
              <li>
                  <a href="/" aria-haspopup="true"><span>Seite 6</span></a>
                  <ul>
                      <li><a href="/">Seite 6.1</a></li>
                      <li><a href="/">Seite 6.2</a></li>
                  </ul>
              </li>
              <li><a href="/">Seite 7</a></li>
          </ul>
      </nav>
 </body>

CSS: 
@charset "UTF-8";

body {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}

#nav
{
    width: 1500px;
    height: 50px;
    margin: auto;
    background-color: #EDEDED;
}

#nav > a
    {
        display: none;
    }

#nav li
    {
        position: relative;
        width: 187.5px;
    }

#nav ul {
    text-decoration: none;
    
}

#nav li a {
    color: black;
    display: block;
}

#nav li a:active {
    background-color: #c00 !important;
}

#nav span:after{
    width: 0;
    height: 0;
    border: 0.313em solid transparent; /* 5 */
    border-bottom: none;
    border-top-color: black;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; /* 5 */
}
 
/* first level */
 
#nav > ul {
    height: 50px;
    background-color: #EDEDED;;
}

#nav > ul > li {
    width: 187.5px;
    height: 50px;
    float: left;
    list-style: none;
}

#nav > ul > li > a {
    height: 50px;
    font-size: 0.9vw; /* 24 */
    line-height: 2.5vw; /* 60 (24) */
    text-align: center;
    text-decoration: none;
}

#nav > ul > li:not( :last-child ) > a {
    border-right: 0px solid black;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
    background-color: lightcoral;
}
 
/* second level */
 
#nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: #EDEDED;
    list-style: none;
}

#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}

#nav li:not( :first-child ):hover ul {
    left: 0;
}

#nav li ul a {
    font-size: 0.9vw;
    border-top: 0.05vw solid lightcoral;
    height: auto;
    line-height: 2.5vw;
    text-align: center;
    text-decoration: none;
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
    background-color: lightcoral;
}

/******************************************* 1500 *******************************************/
@media only screen and (max-width: 1500px) {

    #nav  {
        width: 90vw;
        height: 3.2vw;
    }

    #nav li {
        position: relative;
        width: 11.25vw;
    } 

    #nav span:after{
        width: 0;
        height: 0;
        border: 0.3vw solid transparent; /* 5 / 0.313em */
        border-bottom: none;
        border-top-color: black;
        content: '';
        vertical-align: middle;
        display: inline-block;
        position: relative;
        right: -0.3vw; /* 5 / -0.313em */
    }
 
/* first level */
 
    #nav > ul {
        height: 3.2vw;
        background-color: #EDEDED;
    }

#nav > ul > li {
    width: 11.25vw;
    height: 3.2vw;
    float: left;
    list-style: none;
}

#nav > ul > li > a {
    height: 3.2vw;
    font-size: 1vw; /* 24 */
    line-height: 3.1vw; /* 60 (24) */
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
    background-color: lightcoral;
}
 
/* second level */
 
#nav li ul {
    display: none;
    position: absolute;
    background-color: #EDEDED;
}

#nav li:not( :first-child ):hover ul {
    left: 0;
}

#nav li ul a {
    font-size: 0.9vw;
    border-top: 0.05vw solid lightcoral;
    height: auto;
    line-height: 3.2vw;
    text-align: center;
    text-decoration: none;
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
    background-color: lightcoral;
}
 
}

/******************************************* 420 *******************************************/
@media screen and (max-width: 420px) {
    body {
    width: 100vw;
  }
    
    #nav {
        width: 100vw;
        height: 14vw;
    }
    
    #nav li {
        width: 100vw;
    }
    
    #nav span:after{
        border: 1.5vw solid transparent; /* 5 / 0.313em */
        border-bottom: none;
        border-top-color: black;
        content: '';
        vertical-align: middle;
        display: inline-block;
        position: relative;
        right: -3vw; /* 5 / -0.313em */
    }
    
    #nav > a {
        width: 14vw; /* 50 BUTTON*/
        height: 14vw; /* 50 BUTTON */
        text-align: left;
        text-indent: -9999px;
        background-color: lightcoral;
        position: relative;
    }
    
    #nav > a:before,
    #nav > a:after {
        position: absolute;
        border: 0.7vw solid black; /** BUTTON COLOUR **/
        top: 35%;
        left: 25%;
        right: 25%;
        content: '';
    }

    #nav > a:after {
        top: 60%;
    }

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type {
        display: block;
    }

/* first level */

    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }

    #nav:target > ul {
        display: block;
    }

    #nav > ul > li {
        width: 100%;
        height: 14vw;
        float: none;
    }
    
    #nav > ul > li > a {
        height: auto;
        text-align: left;
        font-size: 5vw;
        padding-top: 6vw; /* 20 (24) */
        padding-bottom: 5vw;
        padding-left: 2vw;
        box-sizing: border-box;
    }
    
    #nav > ul > li:not( :last-child ) > a {
        border-right: none;
        border-bottom: 0.1vw solid lightcoral;
    }


/* second level */
    
    #nav li ul {
        position: static;
        height: auto;
        padding: 5vw; /* 20 */
        padding-top: 0;
    }
    
    #nav li ul a {
        width: 100vw;
        height: 14vw;
        font-size: 5vw;
    }
}

Ach ja, ich würde es wirklich gerne ohne JavaScript auskommen, ganz einfach weil ich es nicht kann!
Die DoubleTap-Funktion wird man aber vermutlich nicht ohne hinbekommen.
Dazu habe ich Folgendes gefunden, wo ich ansetzen würde.

Javascript: 
;(function( $, window, document, undefined )
{
    $.fn.doubleTapToGo = function( params )
    {
        if( !( 'ontouchstart' in window ) &&
            !navigator.msMaxTouchPoints &&
            !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

        this.each( function()
        {
            var curItem = false;

            $( this ).on( 'click', function( e )
            {
                var item = $( this );
                if( item[ 0 ] != curItem[ 0 ] )
                {
                    e.preventDefault();
                    curItem = item;
                }
            });

            $( document ).on( 'click touchstart MSPointerDown', function( e )
            {
                var resetItem = true,
                    parents      = $( e.target ).parents();

                for( var i = 0; i < parents.length; i++ )
                    if( parents[ i ] == curItem[ 0 ] )
                        resetItem = false;

                if( resetItem )
                    curItem = false;
            });
        });
        return this;
    };
})( jQuery, window, document );

Danke euch jetzt schon für jegliche Hilfe!!!

LG
 
Das Problem ist nach wie vor aktuell.
Ich habe das ganze Menü einmal auf eine Testseite von mir geladen
--> HIER <--

Folgende Probleme:
1) Wenn man auf "Seite 1" KLICKT, soll NUR das Untermenü ausfahren, mehr nicht! Nicht einmal ein Ändern des Cursors.
Momentan ist es ja so, dass man durch einen KLICK auf Seite 1 wieder auf die Startseite geleitet wird!
2) Durch das "Schmalerziehen des Browserfensters" oder mit der vordefinierten Option "iPhone 6/7/8" gelangt man in das Mobile Menü mit dem Burgerbutton.
Ich gelange nicht zu den Unterebenen, den dazu müsste man auf Seite 1/4 oder 6 KLICKEN (damit das Untermenü aufklappt).
Und genau das bekomme ich nicht hin.

Versteht man das jetzt evtl. besser?
 
Da ich um ehrlich zu sein noch nie mit :focus gearbeitet habe, sehe ich nicht genau den Vorteil davon!
Das zweite Problem ist sowieso "wichtiger". Gebe es evtl. die Möglichkeit (mit JS oder CSS) die <span> Elemente mit einem "Doppelklick zu aktivieren (im Mobile Menü). Das man auf Seite 4 EINMAL KLICKT --> das Untermenü klappt aus! ZWEITER KLICK, der hinterlegte <a href> wird aktiviert...
Oder ist das zu kompliziert gedacht?
 
Habe ein Beispiel auf meinem Rechner gefunden. Vielleicht kannst du ja was davon verwerten.
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>menü</title>
<meta name="viewport" content="width=device-width,initial-scale=1">

<style>
* {
 margin:0;
 padding:0;
 border:none;
 text-decoration:none;
 list-style:none;
 font-size:1em;
}

UL#navi  {
 width:13em;
 float:left;
}

UL#navi a , UL#navi label {
 margin-bottom:1px;
 padding-left:10px;
 color:#fff;
 background-color:#777;
 font-weight:bold;
 line-height:2.5em;
 display:block;
 cursor:pointer;
 position:relative;
}

UL#navi LI UL LI A {
 background-color:#ddd;
 color:#000;
}

ul#navi a:hover , #navi label:hover {
 background:#a33;
 color:#fff;
}

#navi input, #navi UL , #menu {
 display:none;
}

#c1:checked ~ ul ,
#c2:checked ~ ul ,
#c3:checked ~ ul
 {
 display:block;
}

#navi label:before  {
 content:"";
 position:absolute;
 width:0;
 height:0;
 right:10px;
 top:15px;
 border:5px solid;
 border-color:transparent transparent  transparent #fff;
 border-right:none;
}
 
#navi input:checked + label:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 right:10px;
 top:15px;
 border:5px solid;
 border-color:#fff transparent transparent transparent;
 border-bottom:none;
}
 
#menu , .menu {
 display:none;
}
@media screen and (max-width: 680px) { 

nav {
 float:left;
 position:relative;
}
nav .menu:before  {
 content:"";
 position:absolute;
 width:0;
 height:0;
 right:10px;
 top:15px;
 border:5px solid;
 border-color:transparent transparent  transparent #fff;
 border-right:none;
}

nav #menu:checked + .menu:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 right:10px;
 top:15px;
 border:5px solid;
 border-color:#fff transparent transparent transparent;
 border-bottom:none;
}

nav .menu {
 width:100%;
 width:13em;
 padding:10px 0;
 background:#aaa;
 display:block;
}

nav #navi {
 display:none;
 overflow:hidden;
}

#menu:checked ~ #navi {
 display:block;
}

}
</style>
</head>
<body>
<h2>Toggle- Menü mit inputfelder vom Type Checked</h2>
<p>Bitte Browserfenster verkleinern</p>
<nav>
<input type="checkbox" id="menu"><label class="menu" for="menu">Menü</label>

<ul id="navi">

 
 <li><input type="checkbox" id="c1"><label for="c1">Vogelauswahl</label>
  <ul>
    <li><a href="seite1_1.php">Unterknoten 1 </a></li>
    <li><a href="seite1_2.php">Unterknoten 1 </a></li>
    <li><a href="seite1_3.php">Unterknoten 1 </a></li>
    <li><a href="seite1_4.php">Unterknoten 1 </a></li>
  </ul>
 </li>

 <li><input type="checkbox" id="c2"><label for="c2">Vogelvideo</label>
  <ul>
    <li><a href="seite2_1.php">Unterknoten 2 </a></li>
    <li><a href="seite2_2.php">Unterknoten 2 </a></li>
    <li><a href="seite2_3.php">Unterknoten 2 </a></li>
    <li><a href="seite2_4.php">Unterknoten 2 </a></li>
  </ul>
 </li>

</ul>
</nav>

 </body>
</html>
 
Hey @djheke ,
danke! Da haben wir aber den feinen Unterschied. Bei dir ist das "normale Menü" bereits so, dass man nur durch "klicken" auf die "Unterknoten" kommt.
Bei mir wird das von Beginn aber mit :hover benötigt. Ich muss quasi den "Hover" durch ein "Click"-Effekt ersetzen. Und das schaffe ich momentan nicht.
 
Sempervivum schrieb:
Unabhängig von diesem Thread habe ich in den vergangenen Tage auch eine Demo für ein zweistufiges Menü entwickelt. Funktionieren tut es nur mit CSS, nur die Slidedown-Effekte sind mit Javascript gemacht:
http://webentwicklung.ulrichbangert.de/hamburger-slidedown-multilevel-2.htm
Habe mich auf die Funktion konzentriert, weniger auf das Layout. Da hat ohnehin jeder seien eigenen Vorstellungen.

Hover-Effekte sind beliebt aber der Einwand ist immer der selbe: Was ist mit Touch-Geräten, die eine große Verbreitung haben - dort funktioniert es nicht. Man könnte zwei Modi realisieren, Hover für PCs und Klick für mobile Geräte, aber ich sehe keinen Gewinn darin.
Zum Vergrößern anklicken....

Es wird ZWINGEND ein Hovermenü am Anfang verlangt. Das alles habe ich auch hinbekommen. Mir geht es ja nur darum, wie man aus dem Hover ein CLICK Menü macht, mit Hilfe von CSS und wenn es sein muss JS. So blöd dass 2019 auch ist, muss ich das leider trennen.

Mein Ansatz:

Javascript: 
;(function( $, window, document, undefined )
{
    $.fn.doubleTapToGo = function( params )
    {
        if( !( 'ontouchstart' in window ) &&
            !navigator.msMaxTouchPoints &&
            !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

        this.each( function()
        {
            var curItem = false;

            $( this ).on( 'click', function( e )
            {
                var item = $( this );
                if( item[ 0 ] != curItem[ 0 ] )
                {
                    e.preventDefault();
                    curItem = item;
                }
            });

            $( document ).on( 'click touchstart MSPointerDown', function( e )
            {
                var resetItem = true,
                    parents      = $( e.target ).parents();

                for( var i = 0; i < parents.length; i++ )
                    if( parents[ i ] == curItem[ 0 ] )
                        resetItem = false;

                if( resetItem )
                    curItem = false;
            });
        });
        return this;
    };
})( jQuery, window, document );

Klappt nur immer noch nicht.
 
Was hindert Dich daran, auf Input zu verzichtn und stattdessen :focu , ;hover und :active zu verwnden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben