Hallo,
mein smartvisu-Menu ist je nach Bildschirmbreite als klassisches Menu oben horizontal angeordnet oder aufklappbar als Burgermenu links. Beide Menus haben bei Konfiguration der Links mit data-ajax="false" problemlos funktioniert.
Zur Performance-Optimierung habe ich das data-ajax="false" entfernt/auskommentiert. Das führt erwartungsgemäß zu einer besseren Seitenumschaltzeit. Allerdings habe ich schon viele Stunden an folgendem Problem verbracht - ohne dieses lösen zu können und brauche Eure Hilfe und neue Ideen.
Das Verhalten ist mit smartvisu V2.9 und V3.2 identisch.Das klassische, horizontale Menu funktioniert problemlos. Im Falle geringerer Bilschschirmbreite läßt sich das Burgermenu genau einmal problemlos bedienen und reagiert dann nicht mehr. Nach Neuladen der Seite über den Browser klappt es dann ein weiteres Mal. Im Folgenden Details zu den beobachteten Events dazu (chrome Entwickler-Konsole).
sv1.png
sv2.png
Burger-Menu-Events bei erstmaligem Menu-Click auf „Musik“ (Funktion ok):
- Click auf Burger-Symbol
- Menu öffnet
- Menueintrag selektiert
- Menu schließt automatisch
sv3.png
Burger-Menu-Events bei folgendem Click auf das Burger-Symbol (Menu öffnet gar nicht mehr):
sv4.png
Es sieht so aus, als wenn das Burger-Menu gar nicht mehr vorhanden wäre. Habe testweise das Burger-Symbol mit einem hover-Event und einer Background-Farbe versehen => Wird dargestellt.
Nach Neuladen der kompletten Webseite => Wieder einmalig OK
Mit data-ajax=„false“ wird die Seite auch neu geladen, was das Verhalten bestätigt.
Im Fehlerfall der HTML-Code im Entwicklerfenster:
sv5.png
Alternativ zu o.g. Burger-Menu-Ansatz hatte ich zwei weitere probiert mit Checkbox und Button => Gleiches Problem !
Wo seht Ihr einen Ansatz, um hier weiter zu kommen ? Bin mit meinem Latein am Ende...
Danke im Voraus,
Jörk
menu.html:
#nav-toggle sorgt dabei für die Umschaltung zwischen klassischem und Burger-Menu.
menu.css:
menu.js:
mein smartvisu-Menu ist je nach Bildschirmbreite als klassisches Menu oben horizontal angeordnet oder aufklappbar als Burgermenu links. Beide Menus haben bei Konfiguration der Links mit data-ajax="false" problemlos funktioniert.
Zur Performance-Optimierung habe ich das data-ajax="false" entfernt/auskommentiert. Das führt erwartungsgemäß zu einer besseren Seitenumschaltzeit. Allerdings habe ich schon viele Stunden an folgendem Problem verbracht - ohne dieses lösen zu können und brauche Eure Hilfe und neue Ideen.
Das Verhalten ist mit smartvisu V2.9 und V3.2 identisch.Das klassische, horizontale Menu funktioniert problemlos. Im Falle geringerer Bilschschirmbreite läßt sich das Burgermenu genau einmal problemlos bedienen und reagiert dann nicht mehr. Nach Neuladen der Seite über den Browser klappt es dann ein weiteres Mal. Im Folgenden Details zu den beobachteten Events dazu (chrome Entwickler-Konsole).
sv1.png
sv2.png
Burger-Menu-Events bei erstmaligem Menu-Click auf „Musik“ (Funktion ok):
- Click auf Burger-Symbol
- Menu öffnet
- Menueintrag selektiert
- Menu schließt automatisch
sv3.png
Burger-Menu-Events bei folgendem Click auf das Burger-Symbol (Menu öffnet gar nicht mehr):
sv4.png
Es sieht so aus, als wenn das Burger-Menu gar nicht mehr vorhanden wäre. Habe testweise das Burger-Symbol mit einem hover-Event und einer Background-Farbe versehen => Wird dargestellt.
Nach Neuladen der kompletten Webseite => Wieder einmalig OK
Mit data-ajax=„false“ wird die Seite auch neu geladen, was das Verhalten bestätigt.
Im Fehlerfall der HTML-Code im Entwicklerfenster:
sv5.png
Alternativ zu o.g. Burger-Menu-Ansatz hatte ich zwei weitere probiert mit Checkbox und Button => Gleiches Problem !
Wo seht Ihr einen Ansatz, um hier weiter zu kommen ? Bin mit meinem Latein am Ende...
Danke im Voraus,
Jörk
menu.html:
HTML-Code:
/** https://www.taniarascia.com/responsive-dropdown-navigation-bar/ */ /** https://codepen.io/taniarascia/pen/dYvvYv/ */ <header class="navigation"> <div class="nav-container"> <nav role="navigation"> <div class="nav-mobile"><a id="nav-toggle" <a href="#!"><span></span></a></div> <ul class="nav-list"> <li> <a /** data-ajax="false" */ href="index.php">Home</a> </li> <li> <a /** data-ajax="false" */ href="#">Räume</a> <ul class="nav-dropdown"> <li> <a /** data-ajax="false" */ href="index.php?page=overview_dg">DG</a> </li> <li> <a /** data-ajax="false" */ href="index.php?page=overview_eg">EG</a> </li> <li> <a /** data-ajax="false" */ href="index.php?page=overview_garten">Außen</a> </li> </ul> </li> <li> <a /** data-ajax="false" */ href="index.php?page=index-sonos">Musik</a> </li> /** restliche Menueinträge hier entfernt */ </li> </ul> </nav> </div> </header>
menu.css:
HTML-Code:
/* Höhe des Menus korrigieren */
.ui-page>.ui-header {
height: 69px;
margin: 0 0 0 0;
}
/* Menu einpassen */
.ui-page>.ui-header .ui-left {
margin: 0px 0 0 0px;
float: left;
}
.navigation {
height: 64px;
background: #262626;
margin-top: -5px;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
/* Vertikaler Bereich unter Burger-Symbol komplett als Menu */
background: #262626;
opacity: 0.91;
transition: all 300ms ease-in-out;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0px 25px 0px 25px;
line-height: 66px;
background: #262626;
color: #ffffff;
text-decoration: none;
text-align: left;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff ! important;
}
/* Automatisch öffnende Sub-Menus */
ul.nav-list li:hover ul {
display: block;
}
/* Symbol für Kaskadenmenu */
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
background: #262626; /* Einfarbiger Hintergrund bei Kaskadenmenu in nav-list */
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
opacity:0.91;
background: #262626; /* Einfarbiger Hintergrund bei Kaskadenmenu in Burger-Submenu */
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(#3c3c3c,#111);
/* Größe Burger-Icon */
height: 68px;
width: 70px;
}
/* Burgermenu */
@media only screen and (max-width: 998px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
height: 1000px; /* Höhe des Menus im Burger über gesamte Höhe */
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 45px; /* Eingerückte Untermenus im Burgermenu */
}
.nav-dropdown {
position: static;
}
}
/* Klassisches horizontales Menu */
@media screen and (min-width: 999px) {
.nav-list {
display: block !important;
}
nav ul li a {
background-image: linear-gradient(#3c3c3c,#111);
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
/* Strich vom Burger-Symbol nach oben versetzt */
#nav-toggle span:before {
top: -10px;
}
/* Horiz. Strich vom Burger-Symbol nach unten versetzt */
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
/* Burger-Symbol nach X wechseln */
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
menu.js:
HTML-Code:
$(function() { // DOM ready
// Klicken
$('#nav-toggle').click( function() {
console.warn("#nav-toggle: Click");
$('nav ul').slideToggle();
});
//Mouseover: Hier nur zum testen ohne Menu-Funktion
$('#nav-toggle').hover(
//Mouseenter
function(e) {
console.warn("#nav-toggle: Hover: Enter");
},
//Mouseleave
function(e) {
console.warn("#nav-toggle: Hover: Leave");
}
);
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
console.warn("#nav-toggle: Hamburger <-> X Symbol");
this.classList.toggle('active');
});
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
console.warn("#nav-toggle: Submenu öffnen/schliessen von nav-dropdown und Event-Weiterleitung stoppen");
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function(e) {
console.warn("#nav-toggle: Click woanders -> nav-dropdown verstecken");
$('.nav-dropdown').hide();
});
}); // end DOM ready
Kommentar