Menü Probleme bei Media Queries

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
8 Mai 2017
75
0
6
29
#1
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.222
255
83
66
#2
Schon ein paar Tage her, ist das Problem noch aktuell? Ich habe mal eine Testseite angelegt und kann dein Problem nicht so richtig nachvollziehen: Du schreibst, dass die zweite Ebene extrem klein angezeigt wird. Das ist bei mir nicht der Fall, zumindest die Schrift ist in allen Ebenen gleich groß. Allerdings habe ich nicht auf dem Handy getestet, sondern durch Schmalerziehen des Browserfensters.
 
8 Mai 2017
75
0
6
29
#4
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?
 
8 Mai 2017
75
0
6
29
#6
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.222
255
83
66
#9
IMO indem Du beides trennst: Ein Item mit span, um das Untermenü zu öffnen und im Untermenü ein Item mit dem Link um die betr. Seite zu öffnen.
 

djheke

Aktives Mitglied
8 Februar 2012
918
82
28
#11
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>
 
8 Mai 2017
75
0
6
29
#12
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

Senior HTML'ler
18 Oktober 2016
1.222
255
83
66
#13
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.

Bei mir wird das von Beginn aber mit :hover benötigt. Ich muss quasi den "Hover" durch ein "Click"-Effekt ersetzen.
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.
 
8 Mai 2017
75
0
6
29
#14
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.
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.222
255
83
66
#16
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.
Kein Problem mit geeigneten Mediaqueries, vollkommen ohne JS:
http://webentwicklung.ulrichbangert.de/hamburger-slidedown-multilevel-hover.htm
Zeilen 107 bis 199.
Fenster schmal - Plus/Minus sichtbar, Umschalten durch Klick/Tippen
Fenster breit - Plus/Minus unsichtbar, Umschalten durch Hover
Genau genommen ist jedoch die Fensterbreite kein geeignetes Kriterium sondern man müsste prüfen, ob es sich um ein Touch-Gerät handelt:
https://css-tricks.com/touch-devices-not-judged-size/
 
Zuletzt bearbeitet: