Zitat von
thymian
Aber wenn es bei Klick eine Weiterleitung auf die 1. Unterseite gibt, kann man die Parent-Seite ja sowieso nicht zweimal aufrufen...? Also, ich finde mobile_menu sehr intuitiv.
Also wenn ich mit dem ersten Klick ein Dropdown auslöse, dann erwarte ich nicht, dass beim zweiten Klick die Seite aufgerufen wird, sondern, dass sich das Dropdown wieder schließt. Oder? Das was letztendlich bei Klick passiert wird mit JS gesteuert. Mit
PHP-Code:
// JS jQuery
$('a').on('click', function(diesesEvent) {
diesesEvent.preventDefault(); // verhindert die Aktion, die der Browser normalerweise ausführen würde
// anstatt dessen do my stuff
alert('hello world');
});
Damit braucht man keine Templateänderung bei der man aus dem Link von Seiten mit Untermenü ein SPAN o.ä. macht. Weil man für das barierearme Menü ja sowieso JS einsetzt ist dies der Weg.
Zitat von
thymian
Wahrscheinlich, weil die Klasse .sub-menu auf die ul gelegt wird und nicht auf das li.
Es spricht die UL an, welche das Submenu ist. Das tue ich ja auch. Wahrscheinlich musst du das CSS noch anpassen.
Zitat von
thymian
Vielleicht werde ich Kamil mal fragen
Ich denke, dass er viele wichtige Sachen zu tun hat, und die Erweiterung erfüllt ja soweit seinen Zweck.
Auf die Contao Demo umgeschrieben würde das CSS von Kulturbanause so aussehen.
PHP-Code:
/* CSS */
* {
font-family: Arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
header {
max-width: 1200px;
margin: 5em auto;
transition: all .5s ease-in-out;
text-align: center;
}
a:hover {
opacity: .9;
}
#nav-main ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav-main > ul {
display: flex;
}
#nav-main > ul > li {
position: relative;
margin: .2em;
flex: 1;
}
#nav-main a,
#nav-main strong {
display: block;
padding: 1em;
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(255,255,255,.5);
background: darkcyan;
}
#nav-main li.submenu ul {
display: none;
}
#nav-main li.submenu ul a {
background: #333;
}
Und das JavaScript so.
PHP-Code:
// JS
$('#nav-main > ul > .submenu').click(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).toggleClass('sub-menu-open');
var $el = $('ul',this);
$('#nav-main > ul > li.submenu > ul').not($el).slideUp();
$('#nav-main > ul > li.submenu > ul').not($el).parent().parent('li').removeClass('sub-menu-open');
$el.stop(true, true).slideToggle(400);
});
Zitieren
Lesezeichen