ВНИМАНИЕ! Опубликовано расписание занятий на 2017-2018 уч. год Подробнее
Toggle Bar

БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

jQuery. Как создать неисчезающее главное меню

В этом уроке я покажу, как, с помощью jQuery можно закрепить главное меню на странице сайта так, что бы при прокрутке оно не исчезало, а всегда находилось в верхней части экрана браузера.

Это бывает необходимо, когда страницы Web-сайта большие и приходится часто переходить по ссылкам. Пользователю будет удобно нажать на нужный ему пункт меню не возвращаясь в начало страницы.

demo        skachat

 Для того, что бы закрепить меню Web-страницы на экране браузера можно воспользоваться стандартной библиотекой jQuery и модулем stiky и добавляем CSS класс в ото место страницы, где находится меню.

Как это сделать:

  1. Скачайте по ссылке архив с рабочим примером и распакуйте его. 
  2. Скрпируйте папку JS в корневую папку вашего сайта.
  3. В разделе HEAD вашей Web-страницы вставьте код подключения библиотеки jQuery и нужного модуля:

    <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
     <script src="/js/jquery.sticky.js" type="text/javascript"></script>

  4. В этом же разделе вставьте скрипт следующего содержания:

    <script type="text/javascript">
        $(window).load(function(){
            $(".navigation").sticky({ topSpacing: 0, center:true, className:"hey" });
        });
     </script>


    Параметр topSpacing в третьей строке скрипта определяет отступ удерживаемого меню от верхней границы экрана. В данном случае он = 0, т.е. всегда должен оставаться у самого края страницы.

  5. При необходимости измените параметры скрипта, сохраните страницу и проверте рабту.
Добавить комментарий
  • Комментарии не найдены
 
Our website is protected by DMC Firewall!