Для початку намалюємо дві картинки:
Це дві частини однієї закладки меню. Права робиться такий довжини, щоб при зменшеному розмiрi шрифту, на зображенні містилося найдовше слово з усього списку розділів. Ну, наприклад, «супермегакулфорумблінваще!». Кожна з картинок складається з двох частин, одна під інший. Верхня частина - початковий стан, нижня - активна, при наведенні мишки.
Принцип досить простий і витончений: в листі стилів ми поставимо різним станам різні координати зображення. Тобто, картинка завантажується вся цілком, але на сторінці ми спочатку бачимо тільки верхню частину. Коли ми підводимо до кнопки мишку, то як би «вискакує» нижня частина.
Отже, картинки готові. У листі стилів запишемо наступний код:
#menu width: 860px;
height: 39px;
margin: 0 auto;
background: # 69c;
font: 90% «Comic Sans MS", Verdana, Arial, sans-serif;
line-height: 1.8em;
clear: both;
>
#menu ul padding: 5px 10px 0 30px;
list-style: none;
>
#menu li display: inline;
>
#menu a float: left;
background: url (images / tableft.gif) no-repeat left top;
padding: 0 0 0 4px;
>
#menu a span float: left;
background: url (images / tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
color: #fff;
>
#menu a: hover span color: # FF9834;
>
#menu a: hover background-position: 0% -42px;
>
#menu a: hover span background-position: 100% -42px;
>
#menu li.active float: left;
color: # FF9834;
background: url (images / tableft.gif) no-repeat left top;
background-position: 0% -42px;
padding: 0 0 0 4px;
>
#menu li.active span float: left;
background: url (images / tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
background-position: 100% -42px;
>
Розберемо запис докладно. Ширина блоку меню 860 пікселів, висота 39px, авто-вирівнювання по центру монітора, синій фон і очищення з обох сторін, щоб ні праворуч, ні ліворуч більше нічого зайвого не вилізло.
Далі задамо списку ul поля і заборонимо відображення маркерів. Тому список у нас і називається немаркованих.
Далі ми вкажемо пунктам списку li розташування «в лінію», інакше за замовчуванням браузери завжди складають їх в стовпчик.
А от наступні два правила вельми цікаві. В обох вказані стилі для відображення посилань, але в другому з'явилося дивне слово span. Навіщо це?
Справа в тому, що нам потрібно прив'язати наші зображення кнопок до тегами у вигляді фону. В даному випадку тег у нас один - . Прив'язувати фон можна тільки до стартового тегом. До вже нічого не прив'яжеш. Тому ми і ввели додатковий тег span. Його ще називають нейтральним. тому як він може бути використаний скрізь і сам по собі не несе будь-якої значущої навантаження.
Таким чином, ми прив'язали першу картинку (як фон) до Тегу a. а другу до span. Причому для першої вказали розташування зліва вгорі і заборонили їй повторюватися, а другий - справа вгорі, і теж без повтору.
Поля тут теж задані не аби як. Спочатку ми вказали лівій картинці відступити від лівого краю на 4 пікселі, тобто якраз на ширину картинки. Якщо цього не зробити, то права картинка, яка свідомо ширше, просто «з'їсть» ліву, тому що назви розділів у нас все-таки не дуже довгі.
Що стосується полів для правого картинки, то ми їх поставили такими, щоб одразу після назви розділу залишалося стільки ж простору, скільки і зліва (а інакше браузер «підібгає» слово під обріз). Вобщем експериментуйте і побачите. )
Для посилань задали білий колір (білий на зеленому - обожнюю просто!). А для активних - помаранчевий на білому.
Наступні два правила якраз наказують нашим картинкам заховати верх і показати низ при наведенні на них мишкою. Зроблено це за допомогою позиціонування. Для лівої картинки ми вказали позицію в 0% (тобто крайнє ліве положення) і мінус 42 пікселя. Тобто ми просто «забрали» у неї верхню частину. А так як картинка спочатку завантажена на сторінку повністю, то вона і покаже нам нижню частину. Для правої картинки ми вказали, відповідно, 100% позицію (крайню праворуч) і теж мінус 42 пікселя.
Виникає питання: чому ми відразу не бачимо на сторінці цілі картинки? А тому, що на самому початку для нашого блоку менюшек ми задали висоту всього в 39 пікселів (можна і 42, але так як браузери по різному вважають відступи, то ми трохи перестрахувалися). Щось на зразок віконця. Пам'ятайте радянські фільми про Шерлока Холмса? Там на самому початку йдуть хитромудрі титри у вигляді цілого поля літер? На них наводиться чорний трафарет з прорізами, і виходять осмислені слова. Ось приблизно на такому ж принципі зроблено і наше меню. Все просто. )
Два інших правила ми написали для активного розділу. Це теж зрозуміло - активний розділ не повинен бути посиланням, але повинен ясно показувати, що він в даний момент активний. Тобто виглядати так, немов на посилання навели мишку. Тут ми теж наказуємо картинкам хитро визирати нижньою частиною, але пристебнули їх вже не до тегами посилань, а до тегами рядків списку - li.
Не забуваємо всюди вказувати обтікання зліва - (float: left;). Інакше глюки неминучі.
Ось начебто і все. Але IE все-таки браузер з характером, і наше гарне меню, як-то не дуже гарно спотворює. (В даному уроці не видно, але ось на зібраної цілком сторінці виходила така собі щілинка між меню і основним блоком. Це як раз відбувається тому, що IE (на відміну від інших браузерів) по-своєму вираховує розміри полів і відступів. На таке неподобство хитрі верстальники придумали не менше хитрий болт, званий хаком. тобто спецом для IE в листі стилів робиться приписка (найчастіше із зазначенням версії IE): «... сему поганці показувати мою геніальну менюху ось так: (і тут додаткове правило) ...».
Такий хак можна вписати в основний аркуш стилів, а можна пристебнути окремим листом, давши на нього відповідне посилання. Ми так і зробимо, і пристебніть до сторінки ще один css. обізвавши його просто ie.css. У ньому ми запишемо наступне:
#menu a span padding: 4px 20px 4px 10px;
>
#menu li.active span padding: 4px 20px 4px 10px;
>
Як бачите, на відміну від основного листа, тут ми вказали нижнє поле на один піксель менше (4 замість 5). Ось і вся трабла.
Ну і нарешті код самої сторінки (тут тільки менюха, всі інші, покладені для сторінки теги, опущені):