[ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바

[ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바 · Web/Script, jQuery 2012/ 07/24 21:18. [ jQuery / Menu / Navigation ] jQuery, CSS로 된 메뉴바. 심플하고 ...
 

  * {About the Author}
  * {Documentation}
  * {Download}
HorizontalNav

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.

Example One

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't break the effect.
  * {Demo}
  * {JavaScript}
  * {HTML}
  * {CSS}
Navigation with horizontalNav disabled
  * {Navigation Item}
  * {Work}
  * {Blog}
  * {About}
  * {Contact}

Navigation with horizontalNav enabled
  * {Navigation Item}
  * {Work}
  * {Blog}
  * {About}
  * {Contact}
// When document is ready...
$(document).ready(function() {
 // Call horizontalNav on the navigations wrapping element
 $('.full-width').horizontalNav({});
});
<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>
// 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;
}
Available Options
Key   Default value   Description   
responsive   true   This option will allow the navigation to auto adjust when the window is resized. 
responsiveDelay   100   The amount of time to wait before re-adjusting the navigation on window resize. Value is set in milliseconds. 
tableDisplay   true   Enables modern browsers to use display: table or set to false to manually calculate the widths of list items.  

HorizontalNav is built and maintained by {Sebastian Nitu} and is licensed under a {Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License}. Follow me on {Twitter}, {GitHub} and {Dribbble}.

{[Creative Commons License]}