<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="jQuery-Scrollbar.css">
</head>
<body>
<h1>Horizontal navigation bar with jQuery Scrollbar</h1>
<h2>One style</h2>
<div class="horizontal-container scrollbar-outer">
<ul class="nav content">
<li role="presentation" class="active"><a href="#" title="Home">Home</a></li>
<li role="presentation"><a href="#" title="Profile">Profile</a></li>
<li role="presentation"><a href="#" title="Messages">Messages</a></li>
<li role="presentation"><a href="#" title="Forum">Forum</a></li>
<li role="presentation"><a href="#" title="Prices">Prices</a></li>
<li role="presentation"><a href="#" title="Contact">Contact</a></li>
<li role="presentation"><a href="#" title="Whatever">Whatever</a></li>
<li role="presentation"><a href="#" title="Random">Random</a></li>
<li role="presentation"><a href="#" title="Some rather long string, to test ellipsis">Some rather long string, to test ellipsis</a></li>
<li role="presentation"><a href="#" title="This is a long name for whatever-fits">This is a long name for whatever-fits</a></li>
<li role="presentation"><a href="#" title="About">About</a></li>
</ul>
</div>
<h2>Alternative style</h2>
<div class="horizontal-container-2 scrollbar-outer">
<ul class="nav content">
<li role="presentation" class="active"><a href="#" title="Home">Home</a></li>
<li role="presentation"><a href="#" title="Profile">Profile</a></li>
<li role="presentation"><a href="#" title="Messages">Messages</a></li>
<li role="presentation"><a href="#" title="Forum">Forum</a></li>
<li role="presentation"><a href="#" title="Prices">Prices</a></li>
<li role="presentation"><a href="#" title="Contact">Contact</a></li>
<li role="presentation"><a href="#" title="Whatever">Whatever</a></li>
<li role="presentation"><a href="#" title="Random">Random</a></li>
<li role="presentation"><a href="#" title="Some rather long string, to test ellipsis">Some rather long string, to test ellipsis</a></li>
<li role="presentation"><a href="#" title="This is a long name for whatever-fits">This is a long name for whatever-fits</a></li>
<li role="presentation"><a href="#" title="About">About</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.prod.gkfx.com/shared/js/jquery.scrollbar.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function ()
{
$('.horizontal-container').scrollbar();
$('.horizontal-container-2').scrollbar();
});
.horizontal-container
{
/* width: 100%; */
overflow: auto;
}
.horizontal-container .content
{
table-layout: fixed;
border-spacing: 4px 0;
border-collapse: separate;
/* width: 100%; */
}
.horizontal-container .content li
{
display: table-cell;
min-width: 150px;
max-width: 150px;
border: 1px solid #88F;
}
.horizontal-container .content li a
{
text-align: center;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.horizontal-container .content li.active
{
background-color: #88F;
}
.horizontal-container .content li.active a
{
color: white;
}
.horizontal-container .content li a:hover, .horizontal-container .content li.active a:hover
{
color: #55F;
}
.horizontal-container-2
{
/* width: 100%; */
overflow: auto;
}
.horizontal-container-2 > .content
{
table-layout: fixed;
/* width: 100%; */
}
.horizontal-container-2 > .content > li
{
display: table-cell;
min-width: 150px;
max-width: 150px;
}
.horizontal-container-2 > .content > li > a
{
text-align: center;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #00617F;
padding-left: 5px;
padding-right: 5px;
}
.horizontal-container-2 > .content > li.active
{
background-color: #84BD00;
}
.horizontal-container-2 > .content > li.active > a
{
color: white;
}
.horizontal-container-2 > .content > li > a:hover,
.horizontal-container-2 > .content > li.active > a:hover
{
color: #00617f;
}
# Horizontal navigation bar with Bootstrap and jQuery Scrollbar
Shows an horizontal navigation bar with Bootstrap, using the jQuery Scrollbar plugin to show a nice slim scrollbar.
/** Base styles for jQuery Scrollbar **/
.scroll-wrapper
{
overflow: hidden !important;
padding: 0 !important;
position: relative;
}
.scroll-wrapper > .scroll-content
{
border: none !important;
box-sizing: content-box !important;
height: auto;
left: 0;
margin: 0;
max-height: none;
max-width: none !important;
overflow: scroll !important;
padding: 0;
position: relative !important;
top: 0;
width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar
{
height: 0;
width: 0;
}
.scroll-element
{
display: none;
}
.scroll-element, .scroll-element div
{
box-sizing: content-box;
}
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible
{
display: block;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow
{
cursor: default;
}
/** Outer scrollbar styles for jQuery Scrollbar **/
.scrollbar-outer > .scroll-element,
.scrollbar-outer > .scroll-element div
{
border: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 10;
}
.scrollbar-outer > .scroll-element
{
background-color: #ffffff;
}
.scrollbar-outer > .scroll-element div
{
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.scrollbar-outer > .scroll-element.scroll-x
{
bottom: 0;
height: 12px;
left: 0;
width: 100%;
}
.scrollbar-outer > .scroll-element.scroll-y
{
height: 100%;
right: 0;
top: 0;
width: 12px;
}
.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }
.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }
.scrollbar-outer > .scroll-element .scroll-element_outer,
.scrollbar-outer > .scroll-element .scroll-element_track,
.scrollbar-outer > .scroll-element .scroll-bar
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
/* scrollbar height/width & offset from container borders */
.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; }
.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }
/* update scrollbar offset if both scrolls are visible */
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }
.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }