OrgNavFooter consists of:
Why Implement OrgNavFooter?
- It's really easy! All you have to do is paste a code snippet in your site's HTML template. (Note: If you have a static HTML site that's not based on a content management or templating system, you will have more work to add the code snippet to every page. If you already use server side includes to bring in a footer to every page, just add the code snippet to the end of your server side include file.)
- UCAR Organizational changes will automatically be maintained by UCAR Communications and update automatically on your site without any intervention on your part.
- It's a UCAR Web Advisory Group recommendation to create a sense of continuity as users browse UCAR's web presence, making our sites appear to be a unified family of sites.
How it Works
- Checks to see if jQuery is already installed on your website and if it isn't, downloads it from the Google API website. Web browsers will cache the file making additional downloads of jQuery unnecessary until the browsers cache expires which is user configurable in web browsers. The file size is 77K. jQuery provides functionality like drop down menus and animation. Drupal sites already come with jQuery so this step will be skipped for Drupal sites.
- Downloads a file from https://orgnav.ucar.edu/orgnav.js
When the user moves their cursor over the OrgNav region at the top of the page, you'll notice a progress indicator in the upper left which is meant to let the user know something will happen if they hang out there. If the cursor continues past the OrgNav on the way to the browsers back button for instance, the OrgNav menu will not come up. A user has to hover over an OrgNav menu for 1 second before a menu comes up. Once a menu comes up, hovering over other OrgNav menus results in instantaneous menu popups. If the cursor moves outside of the OrgNav region and stays out for 3 seconds, the hoverIntent behavior will be enabled again, where menus don't come up unless you hover over them for 1 second. This is all by design and is the outcome of WAG consensus.
OrgNavFooter.js was conceived and written by John Fable of the NCAR Directorate. Thanks John!
OrgNavFooter and your CSS Page Layout
OrgNav is 28px high and uses Cascading Style Sheet (CSS) code to push your page content down automatically to accomodate this space. If OrgNav overwrites or appears underneath your page header, try changing your site's CSS to use relative positioning instead of absolute for it's container or header div. Here is some example CSS and HTML code that uses a div tag with an id of "container" to wrap all the web page content in the BODY of your page. If you place the OrgNavFooter script after that div tag and before the end of the body, you should be all set.
How do you add org-nav code to a Drupal site?
1. Go into Blocks and configure the UCAR OrgNavFooter.
3. Save block on your way out.