- Stand-alone solution: GLOBAL-NAV
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.10.0 (10/08/21)
Stand-alone global navigation
For displaying the cookie policy, masthead, site switching, country/language selection, primary navigation, search, login/logout and footer on a site that does not use or uses and older version of the Abeille Assurances DESY Framework to aid in migration.
Examples
Interactive examples
Logged out state
Logged in state
Code example
<!DOCTYPE html>
<html lang="en-GB" class="no-js">
<head>
<!-- INSERT DEFAULT HEAD SETTINGS --> <script>
document.documentElement.classList.remove( 'no-js' );
document.documentElement.classList.add( 'js' );
</script> <link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/global-nav.css" rel="stylesheet" />
<link media="print" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/print.css" rel="stylesheet" /> <!-- INSERT ALL OTHER CSS STYLES -->
</head><body itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="name" content="[ Website name ]" />
<meta itemprop="url" content="[ Root website URL ]" />
<div class="l-whole-page">
<div class="framework-wrapper">
<!-- INSERT COOKIE POLICY -->
<header>
<!-- INSERT MASTHEAD HEADER CONTENT -->
</header>
</div>
<div class="l-page-wrapper">
<div id="main" class="l-main-content" role="main"> <!-- INSERT YOUR PAGE CONTENT --> </div>
<div class="framework-wrapper">
<div class="o-masthead-navigation u-clear--inner">
<!-- INSERT MASTHEAD NAVIGATION CONTENT -->
</div>
<footer class="m-footer t-accent-dark">
<!-- INSERT FOOTER CONTENT -->
</footer>
</div>
</div>
</div> <!-- INSERT REQUIRE JS SCRIPT -->
</body>
</html>Development and test
Notes for developers
To be able to use this stand-alone code the following is required:
- Web font loading - The Framework uses Source Sans Pro with the following names:
'source_sans_pro'and'font-sourcesanspro-vf'. The CSS from the front-end Framework will load the font files required in from the CDN, but be sure that these files are not loaded multiple times once combined with other CSS files. - RequireJS - RequireJS must be used to load in the JavaScript for any of the components used from the front-end Framework. A cut down version of the Frameworks standard init is available for use if needed
/assets/themes-managed/[ release version ]/shared/js/stand-alone-init.js.
Documentation for components included
data-module
Where data-module is set within a component that is part of the stand-alone build, prefix the module name with /assets/themes-managed/[ release version ]/shared/js/standalone/ eg.
<div class="o-masthead u-clear--inner" data-module="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/stand-alone/o-masthead">Styling
The styling for the stand-alone global navigation has been restricted by wrapping all components within a div with the class name framework-wrapper. This prevents the styling from affecting any styles within the rest of the page. Fixes for locally-styled components may be required, as we can not guarantee that the styles supplied within the stand-alone build will be specific enough to override all possible local styling.
Locale settings
Locale settings are required for the global masthead. If the stand-alone global nav is being applied alongside a previous release of the front-end Framework, be sure include the following in your locale settings file:
en: {
oMasthead : {
menuText : 'Menu',
closeText : 'Close',
loadingText : 'Please wait',
switcherInitial : 'Select your preferred option',
switcherSelection : 'You are on {option}',
},
},Note tht the default close text for the main menu link can be changed for a particular locale. For more information on setting the locale when using the front-end Framework, see our page on how to change locale settings within JavaScript.
If not being applied alongside a previous release, include the following as a global variable before the your RequireJS script.
FRAMEWORK.locale = {
settings: {
oMasthead : {
menuText : 'Menu',
closeText : 'Close',
loadingText : 'Please wait',
switcherInitial : 'Select your preferred option',
switcherSelection : 'You are on {option}',
},
},
};CORS
To ensure proper CORS handling, the crossorigin attribute should be set to 'anonymous' on the script HTML that requestes the init.js file.
<script async id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" crossorigin="anonymous"></script>It is also possbile to enable cross-origin on files included using RequireJS. To enable cross-origin on non-framework script files and modules loaded in via RequireJS, follow the guide on CORS on RequireJS modules.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- updated: It is recommended that all landmark elements have a unique label to aid assistive technology users with their understanding of the page they are viewing and its structure. Masthead has been updated to include aria on the primary navigation element, see Masthead for details of the changes.
- fixed: Fix for masthead not supporting the logged in menu without any logged out menu items. The locale file now contains an additional entry ('menuText') for the masthead menu link label for if no menu link is provided within the markup.