Switch mobile menu to a Javascript-less implementation
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Reinhard Müller 2020-07-07 16:40:44 +02:00
parent 78113a0b4b
commit ef2523bac9
3 changed files with 32 additions and 41 deletions

View File

@ -45,10 +45,6 @@
<xsl:attribute name="id">direct-to-menu-list</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">#menu-list</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
</xsl:element>
<xsl:text>&#x2000;</xsl:text>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'menu'" /></xsl:call-template>
</xsl:element>
</xsl:element>
@ -72,6 +68,17 @@
<!--/ul#direct-links-->
<xsl:if test="not(/buildinfo/document/@external)">
<xsl:element name="input">
<xsl:attribute name="type">checkbox</xsl:attribute>
<xsl:attribute name="id">burger</xsl:attribute>
</xsl:element>
<xsl:element name="label">
<xsl:attribute name="for">burger</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
</xsl:element>
</xsl:element>
<xsl:element name="div">
<xsl:attribute name="id">menu-list</xsl:attribute>
<xsl:element name="ul">

View File

@ -241,6 +241,8 @@ div#masthead {
}
nav#menu {
text-align: right;
@media (max-width: @screen-xs-max) {
background-color: @body-bg;
position: absolute;
@ -264,20 +266,23 @@ nav#menu {
li {
display: none;
}
}
li#direct-to-menu-list {
@media (max-width: @screen-xs-max) {
text-align: right;
display: block;
// Invisible checkbox to show/hide the burger menu
input {
display: none;
}
a {
.btn;
}
// Burger menu button
label {
.btn;
a:hover {
.btn-primary;
}
}
&:hover {
.btn-primary;
}
@media (min-width: @screen-sm-min) {
display: none;
}
}
@ -287,6 +292,7 @@ nav#menu {
border: 1px solid @gray-light;
border-radius: @border-radius-base;
box-shadow: 4px 4px 10px 0 @gray-light;
display: none;
}
ul {
@ -344,15 +350,13 @@ nav#menu {
}
}
}
input:checked ~ div#menu-list {
display: block;
}
}
.no-js nav#menu {
ul#direct-links {
li#direct-to-menu-list {
display: none;
}
}
ul {
li#menu-translations {
display: none;

View File

@ -335,23 +335,3 @@
})
}(jQuery);
/**
* FSFE custom slide toggle for the mobile menu.
*/
$(document).ready(function() {
if ($(window).width() < 768) {
$('#menu-list').hide();
}
$('#direct-to-menu-list').on('click', function(e) {
e.preventDefault();
$('#menu-list').stop(true, true).slideToggle();
});
$(window).on('resize', function() {
if ($(window).width() >= 768) {
$('#menu-list').show();
}
});
});