Перевіривши скрипт на кроссбраузерность, виявлено, що він ідеально працює на всіх нових версіях, є труднощі у браузера Internet Explorer раніше 9 версії, але нічого дивно тут немає, це властиво старим браузерам.
Сподіваюся, Ви вже давно користуєтеся новими.
Перша частина. Підключення стилів і js файлів.
Давайте насамперед підключимо по стандарту всі необхідні стилі і додамо файли js. які потрібні для даного скрипта. Спочатку підключаємо файл стилів demo.css.
Потім підключаємо бібліотеку jquery-latest.min.js і файл menu.js, який буде відповідати за працездатність відступів і стиків в меню, а також за вихідне правильне положення, задане по висоті.
Тут все просто, виводимо меню за стандартом через ul li і робимо оболонку блоковим елементом div. який матиме ідентифікатор menu. взаємодіє, повноцінно з стилями і файлом menu.js.
Переходимо до стилям фіксованого меню і прописуємо основні властивості, які повинні йти обов'язковими! По-перше, прописуємо для ідентифікатора menu. фон, позицію і ширину. По-друге, все це вирівнюємо по центру і задаємо висоту.
Окремі властивості при наведенні, рамки та інше це вже для краси і вважаються необов'язковими.
Тепер у нас найцікавіше. Будемо фіксувати наше меню, на тому рівні, там де воно нам буде потрібно. Пропишемо змінну menu_height, в якій будемо зберігати висоту шапки нашого сайту. Це дозволить при скролінгу сторінки, точно фіксувати меню на потрібній відстані від шапки сайту. В змінної element, ми зберігаємо властивості ідентифікатора menu і задаємо властивість top. вказуючи, що меню буде зверху, і порівнюючи зі змінною menu_top. обчислюємо потрібну відстань від шапки до меню.
На цьому я з Вами прощаюся, до наступного матеріалу. Всього вам найкращого! Вдалих вихідних!)