You may have noticed various websites changes its design according to different screen sizes. Such a magic is possible because of the responsive web design concept. Major websites on the internet today are responsive. One of the most common reasons for RWD is to make the same content available for their users without any complex change in a code and no matter from where they are accessing.
Many times the @media queries is enough to handle the RWD but in some cases, you may need a script. Today we are going to consider WizTools.org as an example to understand the Menu Vs. Sidebar in responsive design.
As you can see in the above screenshot, WizTools.org has two column layout structure with header and footer sections.
The navigation or menu is an important section, which allows user to navigate through a site. Therefor it should have implemented the best possible way for tablet and mobiles.
Desktop View (header)
DIV logically. However, WizTools.org has been developed using Bootstrap framework and the navigation has coded with navbar component. But it really depends on the project's requirement, whether you should go with a framework or not.
Mobile View (header)
Now let's focus on the sidebar. If you can notice on the site, the sidebar has collapsible panel (for desktop view) with a set of links. Of course, this is somewhat similar to the menu (for smaller screens) but the only thing here different is that it is not a part of the header. It is part of the content area (main area between header & footer sections).
Bootstrap converts everything in stack format, if we have Bootstrap grid being used. The same we have with Wiztools.org and below is a screenshot what we had before implemented a custom solution for responsive sidebar. The sidebar was landed after the main content area section.
If we think from UX perspective, links at the bottom of the page, doesn't make sense. As a better solution, it was decided to have a trigger (span) to show/hide a sidebar for smaller screens from the left of the screen smoothly. It had implemented with PageSlide jQuery plugin.
If you are a front end developer, you might have different thoughts and idea. Don't hesitate, shoot a comment below.
I am shortly planning for an article - how to optimize a code for a jQuery plugin. Kindly subscribe for regular updates or connect socially.