Trying to create a functional hamburger menu but facing some difficulty in getting it right. Here's the concept:
- The page layout on larger screens should resemble this:
https://i.sstatic.net/CBqMP.png
- Smaller screens will display a hamburger menu, like so:
https://i.sstatic.net/OpsD0.png
- The hamburger icon expands on click, as shown here:
https://i.sstatic.net/7B8z4.png
Proposed structure for implementation:
<div class="home-navbar">
<div class="home-navbar-logo-hamburger">
<!-- LOGO -->
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i> eL</span>Bi
</h1>
<!-- EO: LOGO -->
<!-- Hamburger menu -->
<div class="hamburger">
<i id="hamburger" class="fa-2x fas fa-bars"></i>
</div>
<!-- EO: Hamburger menu -->
</div>
<!-- Menus-->
<ul class="home-navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- EO: Menus -->
</div>
</div>
In summary, for larger screens:
- Hamburger menu icon is hidden
- Logo and menu are visible with flex layout (row direction)
On smaller screens:
Hamburger icon is visible
Logo remains visible
Menu is initially invisible but with flex layout (column direction)
Clicking the hamburger icon reveals the menu using jQuery code:
$(document).ready(function () { $("#hamburger").click(function () { var visible = $(".home-navbar-menu").is(":visible"); if (!visible) { $(".home-navbar-menu").show(); } else { $(".home-navbar-menu").hide(); } }); })
Issues encountered:
- Show/hide menu on expanding/shrinking screen
- Toggling between desktop and mobile views
- Functionality of opening/closing mobile menu
- Restoring visibility on expanding screen
Currently, the menu disappears on larger screens... Snippet provided:
...
Any suggestions or guidance on refining the menu structure would be greatly appreciated.