The Friends template
Summary
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.
Dropdowns in Side Menu
Will be based on w3_css_drop
The code from the file above is being placed in the sidebar.
The HTML code will be posted here using the w3-code class
The HTML showing the Sub-Menu
<div class="w3-bar-item w3-button" onclick="myAccFunc()">
<i class="fa fa-cogs fa-fw w3-margin-right"></i>Sub Menu <i class="fa fa-caret-down"></div>
<div id="demoAcc" class="w3-hide w3-white">
<a href="#dropdown" onclick="w3_close()" class="w3-bar-item w3-button w3-padding">
<i class="fa fa-th fa-fw w3-margin-left"></i>
Dropdown Coding
<a href="#example" onclick="w3_close()" class="w3-bar-item w3-button w3-padding">
<i class="fa fa-th fa-fw w3-margin-left"></i>
Example</a>
<a href="friends_anomolies.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding">
<i class="fa fa-th fa-fw w3-margin-left"></i>
Anomalies</a>
The code shown above is also another example of the W3 Frameworks use of the w3-code container with highlighting.
The JavaScript for the Sub-Menu
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x..className.replace(" w3-green", "");
}
}
I must admit that I don't really understand what is going on here. The JavaScript deems to involve a transversal of a DOM object using the previousElementSibling property. The implementation for the integration here was taken from the example for the Sidebar Accordion
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.
Icons
Awesome Icons/Font Awesome - fa Classes
The information on what icons and fonts that are available for use can be found at https://fontawesome.com/v4.7/. 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.
Colours
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.
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.
Links
- W3 Framework Lists
- The W3.css Framework
- Friends Photos
- Image handling on the Friends pages
- An example of the W3-code Class
- W3 Dropdown and expanding menus - this code is used to add the Dropdown to the side menu
- Device Dependent Event Handler
- Anomalies
External