Now that you can create Responsive Designs in Adobe Muse and make our websites mobile-friendly, you have to think about the importance of the mobile elements like the menu.
On most desktop sites you find a horizontal menu that drop downs showing subpages. These menus are not thumb-friendly (which means that you are viewing the site with a tablet or phone). A “nav sandwich” or “nav burger” or the three horizontal lines is what we identify as a mobile menu.
We have designed a Responsive Elegant Mobile Menu Widget where you can include all your site pages and even external links. The menu opens and disappears with a gentle effect. You can customise the colours and the fonts and even the “nav burger” colours to match your website design.
1. Start selecting a background color for your menu. A color selector will be displayed to help you.
2. Then choose the menu icon color, the color for the three lines that represent the mobile menu.
3. Add up to seven pages and external links
4. Name all your Muse pages. This is important because you have to write down the exact name of the page for the link, using lower case, followed by .html. For example, if you have named a page “services”, you must write “services.html”
5. You do not need to edit “index.html” as this will always be your homepage. You can rename the item if you want
Adobe Muse Responsive Menu Widget created by Responsive Muse.
- UPDATE: ELEGANT MENU V2 – Now working with anchor links, check anchor preview here
- UPDATE: ELEGANT MENU V3 – Now it lets you select if links will open in current or new window
- UPDATE: ELEGANT MENU V4 – Now you can customize menu text font and color.
- UPDATE: ELEGANT MENU V5 – Now you can set “Default” font and use any Typekit or web font selected in Adobe Muse.
Problems positioning overlayed widgets? read this