Fluid grid menus in CS6

Question

I have been asked to create a menu for the fluid layout which is horizontal for tablets and screen yet converts to a vertical menu on mobiles.
I did once see a tutorial how to do this but can only find ones which have a menu button to expand the list.
Please can anyone tell me how to create a simple menu across the page - 5 options - which drop down to a vertical layout on mobiles.
Thank you.
Terry

Answer 1

terryfoster wrote:
I have been asked to create a menu for the fluid layout which is horizontal for tablets and screen yet converts to a vertical menu on mobiles.
I did once see a tutorial how to do this but can only find ones which have a menu button to expand the list.
Please can anyone tell me how to create a simple menu across the page - 5 options - which drop down to a vertical layout on mobiles.
Thank you.
Terry
Without a 'button' which expands the vertical menu?
The idea of the 'button' is that a vertical menu takes up valuable real estate on a smart phone, hence you hide the vertical menu and show it when a user clicks a 'button'.
If you don't want a 'button' activated menu then just adjust the css for the menu at the media query break point when you want to show the vertical menu.
For the desktop version your css might float the menu items:
li {
float: left;
or it may display them inline:
li {
display: inline;
Change the property in the media query: So for instance if you want your horizontal menu to change to a vertical one at 640px then use something like:
@media screen and (max-width: 640px) {
li {
float: none;
width: 100%;
@media screen and (max-width: 640px) {
li {
display: block;