Skip to content

Commit

Permalink
nav experiments
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewmbacon committed May 29, 2015
1 parent 5eeeacb commit ee0bd41
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 1 deletion.
16 changes: 15 additions & 1 deletion header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
179 changes: 179 additions & 0 deletions inc/nav-drop-multi.php
View file
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions inc/nav-tabs.php
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit ee0bd41

Please sign in to comment.