close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

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 MikeyT | 2854 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

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...