Адаптивная горизонтальная навигация

Реализация адаптивной горизонтальной навигации по ширине окна браузера — HorizontalNav

Как реализовать:

1. Разметка html

<nav class="horizontal-nav full-width">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Работы</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</nav>

2. Стили CSS

.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;
}

3. Подключаем в шапку сайта jQuery и javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.horizontalNav.js"></script>
<script>
    $(document).ready(function() {
        $('.full-width').horizontalNav();
    });
</script>

Список стандартных опций:

Готово!