From ee0bd419715679c70d2a665ca7e906ac14c813af Mon Sep 17 00:00:00 2001
From: andrewmbacon <andrew.bacon@me.com>
Date: Fri, 29 May 2015 15:41:35 -0400
Subject: [PATCH] nav experiments

---
 header.php             |  16 +++-
 inc/nav-drop-multi.php | 179 +++++++++++++++++++++++++++++++++++++++++
 inc/nav-tabs.php       |  15 ++++
 3 files changed, 209 insertions(+), 1 deletion(-)
 create mode 100644 inc/nav-drop-multi.php
 create mode 100644 inc/nav-tabs.php

diff --git a/header.php b/header.php
index 30e4c0a..6cff22d 100644
--- a/header.php
+++ b/header.php
@@ -54,7 +54,21 @@
 		</div>
 		<div id="nav-wrapper">
 			<div class="container">
-				<?php include 'inc/nav.php'; ?>
+				<?php 
+					
+					var_dump($navoption1);
+					var_dump($layoutwidth);
+				
+					/*
+					*	check navigation 'style' from customizer. Load one of these 3 based on option. 
+					*
+					*/
+				
+					//	include 'inc/nav.php';
+					//	include 'inc/nav-drop-multi.php'; 
+					//	include 'inc/nav-tabs.php'; 
+				
+				?>
 			</div>
 		</div>
 	</header>
diff --git a/inc/nav-drop-multi.php b/inc/nav-drop-multi.php
new file mode 100644
index 0000000..79f847a
--- /dev/null
+++ b/inc/nav-drop-multi.php
@@ -0,0 +1,179 @@
+<!-- CSS code from Bootply.com editor -->
+<style type="text/css">
+.marginBottom-0 {
+	margin-bottom: 0;
+}
+.dropdown-submenu {
+	position: relative;
+}
+.dropdown-submenu>.dropdown-menu {
+	top: 0;
+	left: 100%;
+	margin-top: -6px;
+	margin-left: -1px;
+	-webkit-border-radius: 0 6px 6px 6px;
+	-moz-border-radius: 0 6px 6px 6px;
+	border-radius: 0 6px 6px 6px;
+}
+.dropdown-submenu>a:after {
+	display: block;
+	content: " ";
+	float: right;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 5px 0 5px 5px;
+	border-left-color: #cccccc;
+	margin-top: 5px;
+	margin-right: -10px;
+}
+.dropdown-submenu:hover>a:after {
+	border-left-color: #555;
+}
+.dropdown-submenu.pull-left {
+	float: none;
+}
+.dropdown-submenu.pull-left>.dropdown-menu {
+	left: -100%;
+	margin-left: 10px;
+	-webkit-border-radius: 6px 0 6px 6px;
+	-moz-border-radius: 6px 0 6px 6px;
+	border-radius: 6px 0 6px 6px;
+}
+</style>
+
+<nav class="navbar navbar-default" role="navigation">
+	<div class="navbar-header">
+		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+		</div>
+	<div class="collapse navbar-collapse" id="navbar-collapse-1">
+		<ul class="nav navbar-nav">
+			<li class="active"><a href="#">Active Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+				<ul class="dropdown-menu">
+					<li><a href="#">Dropdown Link 1</a></li>
+					<li><a href="#">Dropdown Link 2</a></li>
+					<li><a href="#">Dropdown Link 3</a></li>
+					<li class="divider"></li>
+					<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
+						<ul class="dropdown-menu">
+							<li><a href="#">Dropdown Submenu Link 4.1</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.2</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.3</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.4</a></li>
+						</ul>
+					</li>
+					<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
+						<ul class="dropdown-menu">
+							<li><a href="#">Dropdown Submenu Link 5.1</a></li>
+							<li><a href="#">Dropdown Submenu Link 5.2</a></li>
+							<li><a href="#">Dropdown Submenu Link 5.3</a></li>
+							<li class="divider"></li>
+							<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
+								<ul class="dropdown-menu">
+									<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
+									<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
+									<li class="divider"></li>
+									<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
+										<ul class="dropdown-menu">
+											<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
+										</ul>
+									</li>
+									<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
+										<ul class="dropdown-menu">
+											<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
+										</ul>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</li>
+			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+				<ul class="dropdown-menu">
+					<li><a href="#">Dropdown Link 1</a></li>
+					<li><a href="#">Dropdown Link 2</a></li>
+					<li><a href="#">Dropdown Link 3</a></li>
+					<li class="divider"></li>
+					<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
+						<ul class="dropdown-menu">
+							<li><a href="#">Dropdown Submenu Link 4.1</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.2</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.3</a></li>
+							<li><a href="#">Dropdown Submenu Link 4.4</a></li>
+						</ul>
+					</li>
+					<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
+						<ul class="dropdown-menu">
+							<li><a href="#">Dropdown Submenu Link 5.1</a></li>
+							<li><a href="#">Dropdown Submenu Link 5.2</a></li>
+							<li><a href="#">Dropdown Submenu Link 5.3</a></li>
+							<li class="divider"></li>
+							<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
+								<ul class="dropdown-menu">
+									<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
+									<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
+									<li class="divider"></li>
+									<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
+										<ul class="dropdown-menu">
+											<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
+										</ul>
+									</li>
+									<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
+										<ul class="dropdown-menu">
+											<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
+											<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
+										</ul>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+	<!-- /.navbar-collapse --> 
+	
+</nav>
+
+
+<!-- JavaScript jQuery code from Bootply.com editor  --> 
+
+<script type='text/javascript'>
+        
+            (function($){
+
+	$(document).ready(function(){
+
+		$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
+
+			event.preventDefault(); 
+
+			event.stopPropagation(); 
+
+			$(this).parent().siblings().removeClass('open');
+
+			$(this).parent().toggleClass('open');
+
+		});
+
+	});
+
+})(jQuery);
+        
+        </script> 
diff --git a/inc/nav-tabs.php b/inc/nav-tabs.php
new file mode 100644
index 0000000..1b710c3
--- /dev/null
+++ b/inc/nav-tabs.php
@@ -0,0 +1,15 @@
+<div id="nav-tabs">
+	<div class="visible-xs-block">
+		<?php include('nav-drop-multi.php'); ?>
+	</div>
+	<nav id="tabs" class="visible-sm-block visible-md-block visible-lg-block">
+		<ul class="nav nav-tabs">
+			<li role="presentation" ><a href="#">Home</a></li>
+			<li role="presentation"><a href="#">About</a></li>
+			<li class="active"><a href="#" >Programs</a></li>
+			<li><a href="#">Faculty</a></li>
+			<li><a href="#">Research</a></li>
+		</ul>
+		<?php include('nav-drop-multi.php'); ?>
+	</nav>
+</div>
\ No newline at end of file