When my site is seen on a smartphone, I want the navigation menu, when clicked on, to push the page content down rather than appear on top. I’d also like the navigation menu to have dividing bars/borders, but not have these on the desktop version. This website works the way I want:
our site has a menu similar to that on mobile (sparkleapp.com), using a popup. We have the same menu on desktop, but you can use per-device visibility of the desktop menu and the mobile button to achieve the differentiation.
The popup will overlay the entire page instead of pushing it down. It’s not the same thing but unless you specifically want that, it’s pretty similar. I described the setup in this post:
Once you have the popup on mobile you can use a regular menu within it, set to vertical mode.
It is possible to have lines dividing menu items by setting the border for the menu to be on three sides like this:
@mitchino, The menu pushing the content down is cool. It looks hand-coded. But I would discourage its use as it’s poor UI (user interface) design.
When the content is pushed down there is no indication as how to close the menu. Most users will scroll down to the content and once in the content there is no menu available.The user must go back to the top for the menu. Navigation on phones should be optimized for one-handed thumb scrolling.
My suggestion would be to use a solid color (no transparency) popup that takes up the whole screen. Animating the popup will give a very close illusion. Then animate the menu icon and the divider lines for additional effect. Be unique and create your own so people will want to copy you.