I'm playing with menu design in fluid grids,
I have a menu that switches from a vertical to a horizontal based on media queries, (I didn't write the original code for the menu but I have styled it to match my mock design, the original code was taken from here: http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/?about# ) I was interested to see how I might implement a more complecated version of the menu as a seperate style sheet within a fluid grid site and I have uploaded my experiment here: http://paulaskimin.com/test/index2/index2.html
I'm experiencing a couple of problems depeding on browser and I am also hindered by a lack of access to a screen larger than a 13" macbook.
All of the problems are with the desktop version of the site, when the menu switches from vertical to horizontal. In Chrome it seems not to centre, in Safari, the content extends beyond the max screen width which I think is set to 1232px everywhere that makes sense to me.
I'm pretty comfortable with the basics of html and css but I'm only just starting to understand media queries ehich is why I'm using the fluid grad option for now. I'm hoping that someone with more experience can find the faults in my code so that I can get the functionality that I'm hoping for. I know that my code is very bloated, I've been trying not to mess with the generated style sheets and I've been playing wirh the page for a while so I think there is plenty that could be removed in theory.
Any insight or advice would be appreciated.
Have you looked at MeanMenu?
I have an example of it working in a FluidGrid Layout below. When expanded, MeanMenu doesn't obscure other content on the page as yours does.
You can use any other desktop menu you like. MeanMenu only appears in mobile device widths which you set in the JS file.