responsives Drop-Down-Menü
a la NAV_LIST_UL
Abb.:
Beispiel
Die zweite Varinate des responsiven Menüs ist vor allem dann gut zu gebrauchen, wenn es mehrere Menüpunkte mit Untermenüs gibt. Die erste Varante funktioniert damit auch, ist aber etwas aufwendiger in der Erstellung/ Pflege.
Beide Varianten kann man im Thread selber nachlesen.
Trozdem aber halt ich das Wesentliche hier noch einmal fest, es gibt ja - wie häufig keinerlei Dokumentation und Erklärung dazu. :-(
Per CDN werden CSS und JS für Slicknav geladen.
(Beachte Leerzeichen bei NAV-List_UL)
<!-- CSS: https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.4/slicknav.min.css -->
<!-- CSS: .slicknav_menu {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;}
.slicknav_arrow { left: 8%; position: relative; } -->
<!-- CSS:
@media screen and (max-width: 999px) {
.nav_menu {display:none;}
.slicknav_menu {background: rgba(0, 0, 0, 0.5);}
.slicknav_btn {float: left !important;} }
@media screen and (min-width: 1000px) {
.slicknav_menu {display:none;}
} -->
<!-- JS:https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.4/jquery.slicknav.min.js -->
<nav id="resp_nav" class="nav_menu">{NAV_ LIST_ UL: PF,0,3,active|slick-nav, active}</nav>
<!--JS:
$(function(){
//klick auf's Elternelement: Seite mit Inhalt wird geladen
$('ul.slick-nav').slicknav({allowParentLinks: true/ false });
//hier wird das Link des Elternelements gekillt
$('li.sub_ul > a').removeAttr('href');
//hier wird das Doppelklick für touchfriendly Bildschirme aktiviert
//das Menü bleibt offen bis zur Auswahl
$( '#resp_nav li:has(ul)' ).doubleTapToGo();
});
-->