Навігація та меню
Малобюджетні сайти.
Просування веб-сайту.
Навігація та меню. Створення вкладок
Вкладки один з елементів навігації, улюблений як користувачами сайту за їхню наочність та очевидність дії, так і дизайнерами за те, що вкладкам можна надавати будь-який відповідний вигляд, без втрати їхньої функціональності. До того ж, цей елемент добре виділяється на веб-сторінці і відразу стає зрозумілим, що вкладки потрібні для переходу між розділами сайту. На рис. 1 показаний один із можливих варіантів створення вкладок.
Мал. 1 Варіант створення та розміщення вкладок
| Чебурашка | Крокодил Гена | Шапокляк | Пацюк Лариса |
Мал. 2. Приклад вкладок, створених за допомогою стилів
Для створення вкладок знадобиться таблиця із шести осередків. Чотири з них утворюють самі вкладки, а два крайні осередки потрібні більше для краси, вони формують горизонтальну лінію і служать для відступу від країв.
Потрібно лише два селектори, один змінює стиль поточної вкладки, назвемо його open, а другий селектор з ім'ям close керуватиме виглядом неактивної вкладки. Рамка створюється за допомогою атрибута border, він дозволяє одночасно задати стиль рамки, її товщину та колір. Щоб не утворювалася подвійна рамка у місцях стикування осередків, слід кордон праворуч прибрати. Для цього використовується параметр border-right: none. Для поточної вкладки (селектор open) слід заховати також нижню межу. Стиль правої і лівої осередків можна описати прямо в тегу TD, але при частому використанні вкладок на сайті, краще створити окремий клас.
Приклад 1. Використання таблиці