Sure. In the default desktop page, the navigation menu is a traditional horizontal navbar (a styled unordered list).
* When the media query for mobile devices is triggered, the mobile.css is loaded which, among other things mentioned above, hides the navbar and overrides the previous styling in the embedded list with: .navlist li { display: block; margin: 15px 0; text-align: center;}. The new CSS changes the layout of the navlist to a centered, vertical list.
* Another div with an id of #mobilemenu (hidden by default in the desktop css) is absolutely positioned in the top right corner of the page. That div contains a small hamburger menu png icon.
* jQuery is used to capture the click event and toggle the mobile navigation menu:
$("#mobilemenu").click(function () {
$(".navlist").slideToggle(500);
});
* When the media query for mobile devices is triggered, the mobile.css is loaded which, among other things mentioned above, hides the navbar and overrides the previous styling in the embedded list with: .navlist li { display: block; margin: 15px 0; text-align: center;}. The new CSS changes the layout of the navlist to a centered, vertical list.
* Another div with an id of #mobilemenu (hidden by default in the desktop css) is absolutely positioned in the top right corner of the page. That div contains a small hamburger menu png icon.
* jQuery is used to capture the click event and toggle the mobile navigation menu: $("#mobilemenu").click(function () { $(".navlist").slideToggle(500); });