octo/brutaldon
1
0
Fork 0
mirror of https://gitlab.com/brutaldon/brutaldon synced 2024-12-29 00:59:53 +01:00
Code Issues Projects Releases Wiki Activity

Convert the navbar menu into a dropdown on mobile

Browse Source 
This *may* break browsers that support css media types but not javascript.
This set appears to include dillo, evergreen browsers with js turned off.

One thought on how to fix this is to set is-active on the menu by default,
don't include the burger. Add the burger from javascript and remove is-active
from the menu.
This commit is contained in:
Jason McBrayer 2018-05-23 09:18:23 -04:00
parent 1ad74ffcef
commit ff2754e33b
1 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
brutaldon/templates/base.html
View File

@ -27,9 +27,14 @@
<img src="{% static "images/brutaldon.png" %}"
width="32" height="32" alt="Brutaldon">
</a>
<!-- navbar items, navbar burger... -->
<a role="button" class="navbar-burger" aria-label="menu"
aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a> <!-- navbar items, navbar burger... -->
</div>
<div class="navbar-menu is-active">
<div class="navbar-menu" id="navMenu">
<!-- navbar start, navbar end -->
<div class="navbar-start">
<a href="{% url "home" %}" class="navbar-item">Home</a>
@ -56,5 +61,35 @@
{% endblock %}
</div>
</section>
{% if not fullbrutalism %}
<script type="application/javascript">
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
{% endif %}
</body>
</html>