Від автора: Часто буває так, що на одній сторінці необхідно розмістити текст великого обсягу – якусь наукову статтю або щось в цьому роді. При цьому може виникнути вимога відмовитися від поділу статті на сторінки в силу технічних обмежень або специфіки тексту. Здавалося б – і що в цьому такого? Невеликий дискомфорт викликає необхідність постійно повертатися (прокручувати вгору сторінки для того, щоб дістатися до навігації сайту і перейти у відповідний розділ. Спробуємо вирішити цю проблему. Створимо горизонтальне анімоване меню з фіксованою позицією на сторінці засобами CSS і jQuery.
Засобами CSS можна створити навігаційне меню, яке буде мати фіксоване положення у вікні браузера, незалежно від прокручування вмісту документа. Цей навчальний матеріал крок за кроком показує процес створення такого меню. Отже, давайте створимо горизонтальне меню для сайту.
Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.
Також завантажте вихідні коди собі на комп’ютер!
Шаг1. Розмітка HTML
Для початку визначимося, що ми хочемо бачити на навігаційній панелі, і як вона буде працювати. Нехай у лівій частині вікна, прямо біля краю сторінки, буде розташовуватися щось на зразок закріпленого «ярлика», який буде плавно «виїжджати» коли користувач буде наводити на нього курсор.
На навігаційній панелі буде стандартний набір: посилання на основні розділи сайту, виконані у вигляді пунктів меню і проста форма для пошуку по сайту. Розмітка для всього цього буде приблизно такою:
Все повинно виглядати приблизно так:
Як бачимо, пункти навігаційного меню зібрані в невпорядкований (маркірований список. Далі йде проста форма пошуку з однією кнопкою і одним полем для введення тексту (форма «упакована» в додатковий блок div – це може знадобитися для CSS). Наприкінці йде елемент span, який містить текст для «ярлика». Все це укладена в «контейнер»
Крок 2. CSS
Стилі почнемо прописувати, починаючи з головного «контейнера» навігаційній панелі
#main_menu {
float: left;
position: fixed;
left: 0px;
top: 30px;
padding-right: 10px;
background: #454545;
background: -moz-linear-gradient(top, #454545, #737373);
background: -webkit-gradient(linear, center top, bottom center from(#454545,), to(#737373));
opacity: 0.9;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-radius: 0px 10px 10px 0px;
border: 1px solid #eee;
-moz-box-shadow: 0px 0px 2px #444;
-webkit-box-shadow: 0px 0px 2px #444;
box-shadow: 0px 0px 2px #444;
}
Спочатку ми задаємо фіксовану позицію контейнера position: fixed; – це ключовий момент для усієї конструкції. Тепер меню буде на одному місці, незважаючи на прокручування сторінки. Властивості left і top задають жорстке позиціонування контейнера щодо країв клиенской області браузера. Дві властивості background: -moz-linear-gradient(top, #454545, #737373); background: -webkit-gradient(linear, center top, bottom center from(#454545,), to(#737373)); дозволяють зробити задній фон панелі градієнтним, перед цим ми визначаємо властивість background: #454545; щоб забезпечити сумісність з браузерами без підтримки CSS3. Наступне властивість CSS3 – border-radius. З його допомогою ми робимо нижній і верхній праві кути закругленими з радіусом закруглення 10 пікселів. Визначивши за допомогою властивості border зовнішню кордон (рамку) товщиною 1 піксель, далі за допомогою CSS3-властивостей box-shadow створю зовнішню тінь від панелі – таким чином, досягаючи більш ефектного обрамлення.
Далі прописуємо властивості списку елементів навігаційної панелі
#navigation {
list-style: none;
margin: 0;
padding: 0;
float: left;
margin-left: 80px;
border-left: 1px solid #333;
}
#navigation li {
float: left;
}
Той, хто хоча б раз у житті перетворював маркований HTML-список в горизонтальне навігаційне меню за допомогою CSS, повинен зрозуміти призначення цих визначень стилів. Властивість margin-left носить «підлаштування» характер – з його допомогою можна «підганяти» лівий край першого елемента меню до лівої границі області вмісту сторінки. Використання border-left в даному конкретному випадку носить спірний характер – про нього ми поговоримо трохи пізніше.
Далі задаємо стилі посилань усередині елементів навігаційного меню – грубо кажучи, робимо з посилань кнопки на панелі:
#navigation li a {
float: left;
padding: 20px 0px;
width: 100px;
text-decoration: none;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
border-right: 1px solid #333;
border-left: 1px solid #888;
text-align: center;
color: #dede5d;
text-shadow: 3px 1px 3px #111;
}
Це в принципі звичайні правила CSS для посилальних елементів горизонтального навігаційного меню. Може здатися дивним, що скрізь використовується властивість float: left.
З допомогою цієї властивості можна видерти елемент із загального потоку відображення HTML-сторінки і змусити його поводитися так, як потрібно нам. В даному випадку нам треба, щоб посилання, які є за замовчуванням малими (inline) елементами вели себе як блокові елементи (block) щоб ми могли задати для них ширину і висоту, а також внутрішні поля і зовнішні відступи. Властивості border-right і border-left дозволяють імітувати ефектну кордон – вона наче викарбувана на панелі; це досягається за рахунок різниці кольорів кордонів сусідніх елементів. Але тут виникає проблема – крайні елементи меню ліворуч і праворуч будуть мати тільки одну границю:
(зверніть увагу на праву межу крайнього праворуч елемента меню)
Для крайньої правої кордону це можна вирішити просто – відразу за нею буде йти блок з формою пошуку, для нього можна поставити ліву кордон як для елемента меню, і на цьому справа, здавалося б, у капелюсі, але крайній лівий елемент перший у списку, до нього немає жодного елемента, якому можна було б поставити праву межу border-right: 1px solid #333; але кордон можна задати для лівого краю самого списку – пам’ятайте, для селектора #navigation ми ставили правило border-left: 1px solid #333; — тепер вам має бути зрозуміло його призначення. Рішення, як я вже говорив, спірне, але нічого не заважає нам його застосувати, поки список та його верхній (в меню – лівий) елемент не мають зовнішніх відступів і полів. За допомогою псевдокласу CSS :hover створюємо ефект візуального виділення пункту меню при наведенні на нього курсора:
#navigation li a:hover{
background: #555;
background: -moz-linear-gradient(top, #555, #333 50%, #222 95%, #454545);
background: -webkit-gradient(linear, center top, bottom center from(#333,), to(#454545));
color: #ededed;
text-shadow: -3px -1px 3px #555;
}
Ось що виходить при наведенні курсору миші на пункт меню:
Далі прописуємо стилі для форми пошуку:
#searchbar {
float: left;
padding: 15px 10px;
border-left: 1px solid #888;
}
#searchform {
float: left;
}
#searchform input {
float: left;
}
Прийоми, знайомі з попередніх кроків. Як бачимо з скріншоту, форма пошуку тепер стала в один ряд з пунктами меню. Для завдання стилів кнопці і текстового поля використовуємо контекстні селектори за значенням атрибута HTML-тега:
#searchform input[type=’text’] {
height: 24px;
width: 200px;
border: 1px solid #fff;
border-right: none;
background-color: #ccc;
padding-left: 5px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 18px;
color: #999;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
-moz-box-shadow: inset 0px 0px 1px #444;
-webkit-box-shadow: inset 0px 0px 1px #444;
box-shadow: inset 0px 0px 1px #444;
}
#searchform input[type=’submit’] {
border: 1px solid #fff;
border-left: none;
height: 28px;
width: 28px;
background: #999 url(search.png) no-repeat center center;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
Повна картина поки виглядає ось так:
За допомогою цих правил, ми ставимо чіткі розміри елементів пошуку. Для кнопки використовується невелика іконка. У визначенні box-shadow з’явилося значення inset, за допомогою якого можна зробити тінь внутрішньої (за замовчуванням тінь відображається зовні елемента).
Ну і в кінці визначаємо властивості текстового ярлика. Ми хочемо, щоб відобразити текст вертикально:
#menu_label {
float: left;
-moz-transform: rotate(270deg);
-moz-transform-origin: 83% 60%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 83% 60%;
color: #fff;
text-shadow: 0px 0px 3px #000;
font-weight: bold;
}
За допомогою визначення властивості -moz-transform і -webkit-transform ми встановлюємо кут повороту елемента – 270 градусів (практично те ж саме, що і -90) Властивість transform-origin дозволяє задати позиціонування «трансформованого» елемента, грубо кажучи для обертання ця властивість задає точку повороту. Якщо задати transform-origin: 50% 50%; то обертання відбуватиметься навколо центру елемента.
Крок 3. JavaScript
Першим ділом викачуємо і підключаємо свіжу бібліотеку jquery-1.5.js:
Використовувати нові «фішки» з останньої версії цієї бібліотеки ми не будемо, тому можна використати більш ранні версії. Перед закриваючим тегом додаємо наступне:
$(function(){
$(“#main_menu”).stop().animate({‘margin-left’:’-960px’, ‘opacity’:’0.4′},1000);
$(“#main_menu”).hover(function(){
$(this).stop().animate({‘margin-left’:’0px’, ‘непрозорість’:’0.9′},
500,
‘linear’,
function(){
$(“#menu_label”).css({‘display’:’none’});
});
}, function(){
$(this).stop()
.animate({‘margin-left’:’-960px’, ‘непрозорість’:’0.4′},
500,
‘linear’,
function(){
$(“#menu_label”).css({‘display’:’block’});
});
})
})
Нічого складного. Замість звичного $(document).ready() ми використовуємо $(function(){…}), що також чудово працює. Першим ділом ми за допомогою методу animate() прибираємо панель відразу ж після завантаження сторінки і залишаємо тільки один ярлик з текстом «МЕНЮ». Далі методом-події hover ми в якості параметрів передаємо дві функції – перша запускається, коли користувач наводить курсор на вкладку, друга – коли користувач прибирає курсор з навігаційної панелі. Розглянемо детальніше першу з цих функцій, а саме частина.
$(this).stop().animate({‘margin-left’:’0px’, ‘непрозорість’:’0.9′},
500,
‘linear’,
function(){
$(“#menu_label”).css({‘display’:’none’});
});
Метод stop() припиняє будь-яку анімацію з поточним об’єктом, після чого запускається метод animate(). Перший параметр – це карта CSS-властивостей анімації, другий параметр (500) – це час тривалості анімації. Далі йде параметр ‘linear’ – ім’я функції, яка обчислює параметри анімації, ‘linear’ використовується за замовчуванням, тому без неї можна було обійтися. Потім слід останній параметр – це функція зворотного виклику. Ця функція спрацьовує тоді, коли анімація повністю завершилася. В даному випадку ми просто прибираємо текстовий ярлик з лівого краю панелі. У другій функції ми повертаємо цей ярлик на місце, коли панель повністю відкладена вправо:
$(this).stop()
.animate({‘margin-left’:’-960px’, ‘непрозорість’:’0.4′},
500,
‘linear’,
function(){
$(“#menu_label”).css({‘display’:’block’});
});
Крок 4. Тест-драйв
Для перевірки працездатності меню можна додати після закриваючого тега div id=”main_menu” блок
#content {
margin-left: 80px;
margin-right: 300px;
margin-top: 95px;
text-align: justify;
}
За допомогою властивостей margin-left margin-right можна «підрівняти» краю тексту з краями нашої навігаційної панелі.
Тепер, якщо прокрутити сторінку вниз, то побачимо наступне:
Як ми і планували – меню «ховається» за лівий край вікна браузера, при цьому не заважає читати текст, і доступно в будь-яку секунду – досить лише навести курсор на вкладку «МЕНЮ»:
Висновок
Отже, ми створили досить незвичайне меню, яке не заважає читати довгий текст на сторінці, і в той же час доступно в будь-який момент без необхідності прокрутки сторінки вгору. На рішення самим розумним читачам можна залишити одну з проблем даного меню, а саме – споконвічне «переховування» його відразу ж після завантаження сторінки. Кожен може запропонувати варіант – як можна прибрати меню при початку прокручування сторінки вниз, або ж при початку «наползания» навігаційної панелі на вміст сторінки. Удачі!
E-mail: [email protected]
Популярні
