Меню для сайта на всю ширину экрана

Меню для сайта, автоматически растягивающееся на всю ширину экрана или блока

Всем доброе утро и хорошего настроения. Сегодня пятница, а это значит, что вечер будет незабываемым :) А что может быть лучше самого вечера? Конечно же утро, предвещающее пятничный вечер :) Не пойму, с чего меня на лирику поятнуло, возможно просто хорошее настроение.

Ну да ладно, перейду к делу. Уже очень давно я не выкладывал меню для сайта. Ну собственно сейчас я это и сделаю :) Сразу попрошу перейти к демо версии и посмотреть о чем идет речь. А речь идет о меню для сайта, которое автоматически растягивается по ширине экрана или блока, равномерно распределяя расстояния между пунктами. С помощью этого плагина вы также сможете сделать и меню для мобильных девайсов.

Также обратите внимание на дизайн меню. По мне очень аппетитное, правильное и лаконичное горизонтальное меню для сайта. Работа скриптов этого меню не никак не повлияет на загрузку вашего сайта: они очень мало весят и не делают чего то громоздкого, что способствовало бы торможению сайта.

Как прилепить это чудо меню к сайту

Шаг 1. Скачайте архив и разархивируйте его

Шаг 2. Залейте файл jquery.horizontalNav.js и jquery.horizontalNav.min.js в папку js в корень вашего сайта

Шаг 3. На html странице, на которой будет это меню в раздел <head> вставьте следующий код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="http://sebnitu.com/BaseDemo/bootstrap.js"></script>
<script src="js/jquery.horizontalNav.js"></script>

Это мы подключаем библиотеку jQuery, файл создателя плагина (Sebastian Nitu) и файл jquery.horizontalNav.js, который у нас уже лежит в папке js.

Шаг 4. Туда же (в head) вставим следующий javascript код:

  <!-- JavaScript Test Zone -->
  <script>
  $(document).ready(function() {
    $('.full-width').horizontalNav();
  });
  </script>

Это мы говорим, к какому классу применять плагин. В данном случаем этот класс full-width

Шаг 5. В свой css файл (обычно это style.css) вставьте следующие строки 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;
  }

Шаг 6. Осталось только вставить html код самого меню:

<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>

Ну вот мы и подключили это меню к сайту. Если что то не получилось, просто посмотрите как это сделано в демо версии. На этом все. Спасибо за внимание, до новых постов!

Похожие статьи