VIDEO 3: Responsive Navigation

Responsive Navigation Tutorial

Three things involved when integrating a jQuery plug-in into a project:

1. HTML
2. CSS
3. Javascript

Integrating Jason Weaver’s FlexNav into a responsive web project:
http://jasonweaver.name/lab/flexiblenavigation/

Follow these steps:

1. Download zip file located on GitHub

https://github.com/indyplanets/flexnav
(Save zip file in case you need to go back to original example)

2. Remove <h1> and rest of what is in container.

Don’t remove container.

3. Change HTML.

Change Item #1, Item #2 … etc with the names of your navigation. Also change the sub-navigation text in the HTML

4. Change width.

The navigation on the current example has 5 section so the width is 20%. (100 divided by 5). The prototype has 7 sections, so the width is changed to 14.2857142857143%. (100 divided by 7).

[role='navigation'] li {
 position: relative;
 list-style: none;
 float: left;
 display: block; 
 background-color: #fff; 
 width: 14.2857142857143%; 
 }
5. Modify Colors.

Change color for “background-color” and “borders”
Change #333, #222, #ddd, #000, #111 to #fff (white)

Change “color”: #fff to #000 (black)

Obviously, your navigation menu may be styled with different colors than white and black so change your CSS accordingly.

6. TEST

Preview your file in a browser to make sure it works when full width and smaller.

Integrate the example your modified into the prototype page
7. Copy js folder

Copy js folder from example files to your the “final_web” folder of your prototype folder.

8. Copy CSS file

Copy flexnav.css from CSS folder of example files to your the “CSS” folder in your “final_web” folder of your prototype folder.

You should have 3 CSS files:
reset.css, styles.css and flexnav.css

9. Copy image arrow-down.png

Copy arrow-down.png from images folder of example files to your the “images” folder in your “final_web” folder of your prototype folder.

10. Add links + script.

Add links to the <head> of the index.html of your prototype page.

<link href="css/flexnav.css" rel="stylesheet" type="text/css" / >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexnav.js"></script>

Add script (below) before the closing body tag of the HTML.

<script>
$("[role='navigation']").flexNav();
</script>
11. Add HTML for navigation

Replace the <nav> … </nav> in your prototype HTML with the HTML for the navigation in your sample page.

<div class='menu-button'>Menu</div> 
 <nav> ... </nav>
12. Remove nav CSS.

In your prototype, remove all the CSS from styles.css that is for the nav tag.

Example: http://www.cavanaugh.smcgrdes.com/grdes75/_html5/alima-media-queries-flexnav-final/final_web/

 

 

Leave a Comment