The CSS and JavaScript for Portfolio template

Having enhanced the navigation buttons for the template I thought it was time to move the JavaScript and styling into external files.

On an on-going basis this will allow me to simplify the template and place the supporting code in single files so that changes to these will apply instantly to new and edited files/pages. This will allow me to change the colours and other style elements on the website by making changes in one place.

The addition of the "Sticky Button" (above) should improve the navigation on mobile screens. It was observered that the menu button scrolls off the top of the mobile screen and unless the visitor scroll back up to the top they may be unable to find other pages. Not that they will be interested in any case.

Drop-down/Accordian control functions

The control functions for the menus on this design template (based on the Nature Portfoilio sample) are now in a seperate .js file.

function myAccFunc() and function myAccFunc2() contol the two accordians in the Overlay menu.

The dropdowns in the top menu, seen on medium and large screens are based on the W3.css Framework and their control code can be found in the w3.css file. Looking at this code it would appear that the Framework functionality does not use service JavaScript functions, which probably means I could have designed the Overlay Accodians in a different way!

Developing off-line

I might as well move the code linking the W3.css Framework, Awesome Fonts icons and Google fonts to the support files

This didn't work when I tried it so it is going to be placed in the "too hard basket".

Searching for "linking stylesheet from stylesheet" doesn't really return anything.

On another train of research (formating of lists with added space between items) I discovered the W3.org spec for this and the @import rule.