Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
275 lines (242 sloc) 9.787 kb
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie9 ie8 ie7 ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="ie9 ie8 ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie9 ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<head>
<title>BaseDemo - HorizontalNav</title>
<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<!--
INCLUDE BASEWEB
BaseDemo is a code demoing tool for displaying demos the easiest way possible
It is not required for the demo to work and should not be included in your
implementation of the demoed code on your projects.
For more on BaseDemo here: https://github.com/sebnitu/BaseDemo
-->
<script src="http://sebnitu.com/BaseDemo/bootstrap.js"></script>
<!-- Demo Plugin -->
<script src="jquery.horizontalNav.js"></script>
<!-- CSS Test Zone -->
<style>
/**
* Base styles for horizontal navigation
*/
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #128F9A;
float: left;
text-align: center;
border-radius: 6px;
border: 1px solid #0e7079;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255,255,255, 0.25);
border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<!-- JavaScript Test Zone -->
<script>
$(document).ready(function() {
$('.full-width').horizontalNav();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="page">
<nav class="nav">
<ul>
<li><a href="http://sebnitu.com">About the Author</a></li>
<li><a href="https://github.com/sebnitu/HorizontalNav">Documentation</a></li>
<li class="download"><a href="https://github.com/sebnitu/HorizontalNav/zipball/master">Download</a></li>
</ul>
</nav>
<header class="header">
<h1>HorizontalNav</h1>
<p>HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy and adds support for IE7.<p>
<div class="custom-nav"></div>
</header>
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="demo" id="demo-one">
<div class="description">
<h2>Example One</h2>
<p>This is an example so you can see the difference between a horizontal navigation with no fixed widths and then with a navigation that has the plugin applied to it. There are no requirements to how you style the navigation and adding padding, margins or borders to any of the elements won&rsquo;t break the effect.</p>
</div><!-- .description -->
<nav class="subnav tabs">
<ul>
<li class="active"><a href="#panel-1">Demo</a></li>
<li><a href="#panel-2">JavaScript</a></li>
<li><a href="#panel-3">HTML</a></li>
<li><a href="#panel-4">CSS</a></li>
</ul>
</nav>
<div class="panels">
<div class="panel clearfix" id="panel-1">
<p>Navigation with horizontalNav disabled</p>
<nav class="horizontal-nav clearfix">
<ul>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<br>
<p>Navigation with horizontalNav enabled</p>
<nav class="horizontal-nav full-width">
<ul>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div><!-- .panel -->
<div class="panel" id="panel-2">
<pre>// When document is ready...
$(document).ready(function() {
// Call horizontalNav on the navigations wrapping element
$('.full-width').horizontalNav({});
});</pre>
</div><!-- .panel -->
<div class="panel" id="panel-3">
<pre>&lt;nav class=&quot;horizontal-nav full-width horizontalNav-notprocessed&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation Item&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</pre>
</div><!-- .panel -->
<div class="panel" id="panel-4">
<pre>// There is no required CSS for this plugin to work properly
// but here is what is being used to style this demo
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #128F9A;
float: left;
text-align: center;
border-radius: 6px;
border: 1px solid #0e7079;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255,255,255, 0.25);
border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}</pre>
</div><!-- .panel -->
</div><!-- .panels -->
</div><!-- .demo -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="options">
<div class="description clearfix">
<h2>Available Options</h2>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Key</th>
<th width="18%">Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>responsive</code></td>
<td><code>true</code></td>
<td>This option will allow the navigation to auto adjust when the window is resized.</td>
</tr>
<tr>
<td><code>responsiveDelay</code></td>
<td><code>100</code></td>
<td>The amount of time to wait before re-adjusting the navigation on window resize. Value is set in milliseconds.</td>
</tr>
<tr>
<td><code>tableDisplay</code></td>
<td><code>true</code></td>
<td>Enables modern browsers to use <code>display: table</code> or set to <code>false</code> to manually calculate the widths of list items.</td>
</tr>
<tr>
<td><code>minimumItems</code></td>
<td><code>0</code></td>
<td>The minimum number of menu items required before auto adjusting the widths. 0 = always. Useful to prevent one or two items being huge.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="fallback">
<div class="description clearfix">
<h2>Fallback</h2>
<p>If you add the <code>horizontalNav-notprocessed</code> class to your HTML menu then this class will be removed when HorizontalNav runs and a <code>horizontalNav-processed</code> class will be added.</p>
<p>This provides an excellent fallback if HorizontalNav does not run either because of JavaScript being disabled or <code>minimumItems</code> being set and allows you to style your menu items manually under these conditions using the <code>horizontalNav-notprocessed</code> class.</p>
</div><!-- .description -->
</div><!-- .fallback -->
</div><!-- .page -->
<footer class="footer">
<p>HorizontalNav is built and maintained by <a href="http://sebnitu.com">Sebastian Nitu</a> and is licensed under the MIT License (MIT). Follow me on <a href="http://twitter.com/sebnitu">Twitter</a>, <a href="https://github.com/sebnitu">GitHub</a> and <a href="http://dribbble.com/sebnitu">Dribbble</a>.</p>
</footer>
</div><!-- .wrapper -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.