Im starting to put a responsive website together, and this website has a horizontal top nav bar with drop downs, and then also on the details pages it has a left vertical nav bar.
So I was wondering if anybody had any examples of a responisve design that deals with the 2 different nav options well when its viewed on smaller screens.
Cheers
A common way people deal with menus on small screens is to use a “hamburger” icon. If you have more than one menu, then you could have more than one icon to show/hide the menus.
Cheers Sam,
I was hoping that someone had an example so I could see the workings. I understand the move to a cutton to reveal the nav on small screens, but just wanted to see how people approached it really.
Thanks again
I don’t have an example of 2 menus, but I suppose the principle would be the same, only there are 2 menu buttons.
This has just the one side menu and is fairly unorthodox as it’s css only using the target pseudo class to show/hide, rather than js. But if you squeeze down to mobile size, you get 3 icons, for menu, page index and social/share.
The down side to using the css only target method is, if you choose to close the menu without using it, it jumps to the top of the page, which may be an annoyance. But then with a regular non-fixed menu, you would have to scroll to the top anyway to even use it.
You may also see I hide the sidebar in mobile, which can be expanded/collapsed by the same method it the article body top.
http://burtonstatherheritage.org
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.