Belchamp Walter logo Menu

The Friends template


This is a another take on the Friends template

To create a new page a copy of the template will be modified. Seeing as I am still adding functionality I won't create an empty template yet.

I am working on the principle that the more experiments that I perform on the format before I create a proper template the better. The reformatting of the empty template to allow the addition of content is also key. This is part of my strategy of not using a CMS.

Top Menu

How this menu system could be used

This is an example of a section accessed from a dropdown. The menu option is hidden unless the sub-menu is expanded.

Actually W3 contruct is an Accordian. This means it pushes the menu items below down the page as opposed to a drop-down which will overlay items below. The dropdown is only really okay in a top bar where the page content below/under is likely not to be more menu.

The multiple item menu should be placed high in the sidebar menu so that when items are pushed down the screen they still display.

Placing too many menu items in the drop-down forces the side bar to create a scroll bar which changes the size of the elements. This is probably due to the responsive nature of the sidebar container. I think that this is just a fact of life and there is likely to be a scroll bar on a mobile screen.

Top Menu


Awesome Icons/Font Awesome - fa Classes

The information on what icons and fonts that are available for use can be found at The free version is 4.7 but there is a verson 5 and a new version 6.

Google Fonts - Raleway

The Portfolio template, taken from the W3 Schools site and adapted here, used the Raleway font.

Looking at the Google Fonts page it is not easy to select another font but it may be an idea for the future.

Top Menu


Colours for menu items and section backgrounds.

The W3 colours are detailed in the W3 Schools page: W3.CSS Colors.

The W3 colours can be customised, see my "development" page for examples.

This section uses a custom colour the I defined as w3-tracking. The class definition is placed in the style section in the header of this page.

The colour below is W3-food-peach.

Menu Colours

The colour of the sub-menu when it is expanded was green.

Is is determined by the function myAccFunc() { ...... I changed it to w3-sand. The function for the dropdown does not need to be in this example.

Top Menu

More on Top/Menu Controls

Time will tell if this is "overkill" or not. I will have to see how it works out on mobile devices. That is if anyone actually visits the "Friends" pages.

Uploading and seeing how I find them and how they work for me will be a first step.

Top Menu

Site design by Tempusfugit Web Design -