MDN's Burger Guide

MDN's guide discusses a few different types of hidden menus and buttons. They list some pros and cons of each type of menu and some small visuals of what they look like. The first one is the top toggle. With these types of menus, they can maximize space usable on the screen and minimize space taken up by navigation buttons. Likewise, the top toggle can make it easy for the user to understand what is most important on the page through said menu. On the downside, a small, extra button may be unnoticable to some users or out of the way. Next is the bottom expandable menu, much more popular on mobile than desktop or laptop devices. The bottom menu has a nav menu at the bottom of the screen, with buttons always on display and easy to find, providing a expandable menu when clicked. This menu is easy to see, easy to understand, and is always visible to the user. However, like the previous menu type, it means one extra step to find what a user is looking for, and may have some hidden pieces. The third and final one is the left hidden menu, what was completed in the latest project. This is capable of displaying more nav items than the other menus and can always be visible (except for on small screens). Like the previous though, the downside is that it can create an extra step or not-so-noticeable button.

W3Schools Burger Guide

W3Schools provides some sample HTML, CSS, and JS code to create a mobile dropdown or sliding menu. This is not as practical as the advice given by MDN because it includes the use of JS. That being said, it's still a useful example and can provide some extra hints or examples for future use when creating a menu.

Plethora of Examples

This webpage contains a bunch of different examples for a CSS dropdown or mobile menu. All with different types of flare to meet the desire of you and/or your users when creating a webpage. The examples all come with the HTML and CSS code necessary to create the menu, leaving the user free to customize whatever aspects of the code they desire to truly personalize the experience.

To Summarize

There are a lot of places to find examples or guides to creating CSS menus for mobile or regular desktop/laptop devices, these provided above are just a few. CSS menus are a great place to personalize a webpage and make it feel unique, giving the user a cool visual when the open up the navigation menu to further explore your page. While these kind of menus aren't necessary in all cases, they can really improve the UX and make your site much easier to use and navigate than without.