Switch mobile menu to a Javascript-less implementation
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
78113a0b4b
commit
ef2523bac9
@ -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> </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">
|
||||
|
@ -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;
|
||||
|
20
scripts/bootstrap-3.0.3.custom.js
vendored
20
scripts/bootstrap-3.0.3.custom.js
vendored
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user