При прокручуванні сторінки вниз - меню завжди залишається вгорі і трохи тьмяніє. При наведенні мишки на меню він стає активним.
В даному меню ми розмістимо кілька посилань меню, форму пошуку, а також посилання "Вгору" та "Вниз", за допомогою яких можна швидко переміщатися в початок або кінець сайту / документа.
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> #nav <
height: 35px;
border-bottom: 1px solid #ddd;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
background: #fff url (http # 58; // megascripts.ru/demo/fiks_menu/images/nav.png#41; repeat-x center left;
z-index: 999999;>
#nav ul <
height: 25px;
list-style: none;
margin: 6px auto 0px auto;
width: 690px;>
#nav ul li <
display: inline;
float: left;
margin: 0px 2px;>
#nav a <
font-size: 11px;
font-weight: bold;
float: left;
padding: 2px 4px;
color: # 999;
text-decoration: none;
border: 1px solid #ccc;
cursor: pointer;
background: transparent url (http # 58; // megascripts.ru/demo/fiks_menu/images/overlay.png#41; repeat-x center left;
height: 16px;
line-height: 16px;>
#nav a: hover <
background: # D9D9DA none;
color: #fff;>
#nav a.top span, #nav a.bottom span <
float: left;
width: 16px;
height: 16px;>
/ * Форма пошуку * /
#nav ul li.search
#nav input # 91; type = "text"] <
float: left;
border: 1px solid #ccc;
margin: 0px 1px 0px 50px;
padding: 2px 2px 2px 2px;>
input.searchbutton <
border: 1px solid #ccc;
padding: 1px;
cursor: pointer;
width: 30px;
height: 22px;
background: # E8E9EA url (http # 58; // megascripts.ru/demo/fiks_menu/images/search.png#41; no-repeat center center;>
Навігація завжди буде в самому верху, так як ми її "приклеюємо" за допомогою position: fixed і top: 0px. Фонове зображення буде напівпрозорий фон в стилі кнопки з невеликим 3D-ефектом. Оскільки він повністю прозорий, ви можете спробувати змінити колір фону за замовчуванням замість білого (#ffffff).
Ми виставляємо також високий z-index, так як хочемо, щоб цей блок був поверх всіх елементів.
У списку фіксована ширина 690 пікселів, і він позиціонується строго по центру. Щоб вирівняти щодо позиційований елемент досить вказати правий і лівий відступ (margin) - auto.
Елементи списку йдуть один за одним завдяки display: inline.
У посилань також буде напівпрозорий фон. Знову ж тут можна поекспериментувати з кольором фону.
При наведенні на елемент посилання, ми прибираємо фон і змінюємо фоновий колір.
Ось і все зі стилями!
200? '200px': '' + (this.scrollHeight + 5) + 'px'); "> $ (document # 41; .ready (function (# 41;<
// Обробка натискання на кнопку "Вгору"
$ ( "# ScrollBottom" # 41; .click (function (# 41;<
// Необхідно прокрутити в початок сторінки
var curPos = $ (document # 41; .scrollTop (# 41 ;;
var scrollTime = curPos / 1.73;
$ ( "Body, html" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
// Обробка натискання на кнопку "Вниз"
$ ( "# ScrollTop" # 41; .click (function (# 41;<
// Необхідно прокрутити в кінець сторінки
var curPos = $ (document # 41; .scrollTop (# 41 ;;
var height = $ ( "body" # 41; .height (# 41 ;;
var scrollTime = (height-curPos # 41; /1.73;
$ ( "Body, html" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
> # 41 ;;
Ось і все готово! користуйтеся