Hi. I’m just wondering if anyone knows of any good articles or tutorials based around the navigation menu in a responsive web design… RWD is something I have been trying to incorporate into all of my recent projects… However horizontal dropdown menus etc seem to pose a problem when considering how they should adapt - percentage widths on the li’s only works to a certain breakpoint
Sent from my HTC One using Tapatalk 4 Beta
Indeed, they are a beast to deal with. The good thing about the mobile design issue is that it’s forcing us to reconsider web design practices in general—such as whether drop down menus are even worth having on desktop sites. (IMHO they are terrible things.)
There are some interesting techniques emerging, such as having the menu turn into a single button on a small screen. But that’s for simpler menus without drop downs. Other options include restyling the menu entirely on smaller screens so that the top level items are each full width and either lead to their own section where the sub links are then available, or the top level items can be clicked to reveal sub items (as hover basically doesn’t work on mobiles).
The first thing to do is work out what you want to do with the menu, and then find a tutorial on how to do it.
Indeed if you design the menu first you’ll waste a lot of time trying to fill it with things (design the content before the box). When you do figure out what items should exist on the menu there are plenty of pattern libraries out there now with examples of different navigation designs. Here are three to get you started:
Hello Zany90,
I am in the same boat as you. I have deisgned a new RDW with Dreamweaver CC, but I need two menus. One for the main menu and another for the languages. The options seem to be very limited and having given it much thought I will use the mobile phone menu style for all screen sizes, but which mobile phone menu works best is now my next dilema?
Morrile
which mobile phone menu works best is now my next dilema?
One criterion I use is how well it works with JS off. Most people have it on, but all the same, the fact that it works well with JS off tends to be a sign that it’s better constructed.
Very much so, and I believe I have found one. I am in the process of cutting and pasting the code into my website. Whilst it looks okay on screens, tablets and mobiles, I still have to check that the menu will work on a mobile. The menu was designed by Pure CSS menu (not wanting to advertise but credit must be given as I don’t have the skills yet to design my own)
The purecssmenu menu is full of bad coding, as it was amazing that validation asked for a third to be removed without impairing on it’s function. The good point is that it works on all devices including mobiles