Giter VIP home page Giter VIP logo

omni-nav's Introduction

Overview

Omni-Nav is a navigation bar that provides access to all content and services across our Chapman University websites. It offers universal navigation of our core services; it offers an in-page search box powered by Google; and it offers quick access to log in to other Chapman services.

Adding Omni-Nav to a web page

Copy and paste the following HTML tags into the <head> of your page.

<link href="//www2.chapman.edu/omni-nav/dist/omni-nav.min.css" rel="stylesheet">
<script src="//www2.chapman.edu/omni-nav/dist/omni-nav.min.js"></script>

Use a server-side include* to pull in this HTML file right before the closing <body> tag:

//www2.chapman.edu/omni-nav/dist/omni-nav.html (5kb)

It is highly recommended to use server-side caching when including this file in order to increase performance. If the file is unreachable, the server should be configured to serve the cached asset indefinitely.

Companion Bar

To add a companion bar to your site, use this HTML code anywhere on the page:

<div id="cu_companion_bar">
    Loyal Companion Bar
</div>

Developing Omni-Nav

Modify the files located in the /src/ directory:

src/js/omni-nav.js
src/sass/omni-nav.scss
src/omni-nav.svg
src/omni-nav.html

Use grunt or grunt watch in the terminal to compile assets into the /dist/ directory.

Click here to learn how to set up grunt on your machine

You can then open /index.html in your browser and with grunt watch and live reload you will see your changes live on your development machine as you save assets in the /src/ directory.

Deploying

Assets should be published to: //www2.chapman.edu/omni-nav/ and all servers should reference these files. This ensures that all versions of the nav bar are updated across all of our web assets in real-time.

omni-nav's People

Contributors

sharissis-brei avatar bcole808 avatar jameskerr avatar mikeescobedo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.