The Menus you are viewing are for Desktop Displays

Phone Menu

Tablet Menu

The menu you see at the top of this page is an "Expandable Drop-down".
It will not be displayed on a mobile phone - on a mobile phone you will not see the dropdown but you will see the Overlay Menu when you click "Menu" on the top bar.

How this menu operates:

If you click or hover your cursor over the "More " button on the top bar the "Expandable" menu will display.
The menu displayed is animated and the colours indicate whether the menu options are pointing to a new page or to a bookmark on the current page.

Blue Items are to new (other) pages on this website - the page will be a different page
Yellow to items on the page - another location of this page.

You cannot see the expandable menu on the device you are viewing this page.

If you want to see an example of my implementation of the expandable menu please view it on a tablet or computer.

An expandable dropdown Overlay menu will display if you click on "Menu" on the top bar or the "More" button below.

This menu was added to provide extra menu options to my design based on the Nature Portfolio template from the W3 Schools website.

It is an additional "complication" to the Overlay Menu design.

The menu is a topbar (w3-top class) with w3-bar that are both containers for a w3-dropdown-hover class element.

The w3-dropdown-hover class element contains w3-bar-item w3-button class elements

Analysis of the code

This has been seperated from the Overlay menu code analysis as that page was complicated enough!

No expandable menus on a mobile phone

The expandable drop-downs will not display on moble phone. This is by design as I have determined that it does not make sense as the operation of these menus is best suited to a larger display. While the expandable drop-downs will work on a touch screen, a tablet for example, a phone user is more likely to be confused by such a menu.

Menu colours

A further enhancement (not yet fully implemented as it could be too confusing) is to make items on the expadable dropdown different colours depending on their destination. By default the button background colour is blue, this is retained for links to other pages on the website. This is overwritten for links to sections of the current page which are w3-pale-yellow.

Adding a link to the top button

As I was playing around with the new design I thought it might be a good idea to make the buttons on the top menu actually have targets.

Originally the top buttons were just of the class "w3-dropdown-hover", the buttons within this class were "w3-dropdown-content" with no anchor tag. Adding an anchor tag to this button and setting the text-decoration to none gives the required target.

On this page the target is this section. On the Index page the targets will be the main pages for the sections.

On other pages other than the index page the "More" button can be linked to this page (and section) or the main page associated with the page.

A question would be how does this work on a touch screen?

Although I did get this to work it generated a validation error when pages were validated
The links are being removed from this button.