close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Using MW as a foundation for a responsive menu design

Thread began 11/18/2012 3:31 pm by MikeyT | Last modified 6/05/2015 2:45 pm by Ray Borduin | 3009 views | 5 replies |

MikeyT

Using MW as a foundation for a responsive menu design

Since responsive design is all the rave these days, and becoming a household name, I decided to set out and use WA MenuWriter to create the foundation for a responsive menu. One that adapts to the desktop, tablet device, and smartphone. Its confirmed that MW does not produce a responsive menu out of the box, but with a little post-work and foundation knowledge of how media queries work, its not hard to adapt what MW creates into a responsive menu.

You can test the results of my experiment at responsive-menu.php. Just resize your browser window. For Safari users, I'd like to recommend an invaluable extension that I've started using available at resizer/. It allows you to resize your browser at predetermined sizes with the push of a button.

I've included the source files for anyone who wishes to expand on this, use it for their own project, learn from it, whatever. Let me note that I've implemented Framework Builder and the plugin concept for inserting the menu on the test page. The menu.php file inside the plugins folder can still access the MenuWriter edit mode, so you can change the menu structure to your heart's content. I've also added comments throughout each file to help illustrate what was done. Also, I just want to point out that the the files were produced in XHTML 1.0. Old habits die hard, I guess. This could project could easily be reproduced in HTML 5. I hope this experiment and the supplied files can help anyone on the forum wishing to use WA MenuWriter to build the foundation for a responsive menu.

All the best,
Mike

Attached Files
responsive-menu.zip
Sign in to reply to this post

StephenMartin

Mike that is great and so appreciated, but what about an html site. Do you know of any tutorials regarding html?

Thanks again. That's a huge help!

Stephen

Sign in to reply to this post

MikeyT

Hi Stephen,

The same concept can be easily applied to a plain html site. Just run the MenuWriter wizard on a site definition that's set up to produce standard html files and transfer the css I've included in the original post to your site.

Mike

Sign in to reply to this post

Rood's Media

I would still love to see WA come up with a Bootstrap framework extension and an option for an out of the box solution for RWD within MenuWriter. Most of my website projects utilize the WA MenuWriter extension and because of that I am kind of stuck on still building fixed width 960 grid system layouts.

Sign in to reply to this post

Cheyanne

Does this really work?

I am unconvinced by this approach to responsive menu building. Yes, for the mobile, it converts the horizontal menu to a vertical one. But what about screen sizes in between? It appears that at tablet size, for example, menu items have simply disappeared. Importantly, even if this does work, it is far too simplistic to be used as a commercial reality. I often have menus that have menu headers (as shown in this example), sub menu and sub-sub menus. I cannot see how any reasonably complex menu can be made to be responsive with the example shown.

Sign in to reply to this post

Ray BorduinWebAssist

A popular solution for larger menus on mobile is to hide the menu initially and display a menu icon that can be clicked to reveal it. (see the webassist site for a working example)

The large menu is too big to be shown initially in a mobile design, but full navigation is still possible with multiple sub-menus by clicking to view the menu.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...