Отже, ми розглянемо всі можливі варіанти того, як створити гумове CSS меню. Почнемо зі створення навігації з малих (inline) елементів.
Горизонтальне гумове текстове меню
Суть зводиться до того, щоб рівномірно розподілити текстові пункти навігації на всю ширину. Ліворуч і праворуч (біля кордонів меню) відступи відсутні, а між окремими словами відстані абсолютно однакові. В основі цього методу лежить використання властивості text-align: justify, яке, як відомо, розподіляє текст по всій ширині за рахунок зміни відстаней між словами, що власне нам і потрібно.
Але якщо рядок одна, як, власне, і має бути коли ми створюємо меню, текст не розподілиться по всій ширині. Буде потрібно невелика хитрість, для того, щоб його змусити. Використовуємо для цього псевдоелемент: before, який згенерує нам додатковий вміст, розмір одного рядка буде перевищено і текст розтягнеться. Цей додатковий контент (в прикладі 1) не видно завдяки обрізку overflow: hidden. Можна додатково приховати його за допомогою height: 0 або visibility: hidden.
Ще нюанси коду: для того, щоб слова в окремих пунктах не розривалися застосовується inline-block замість inline (в правилах для a).
Дивіться код і діючий приклад.
Горизонтальне меню з блоків із однаковими відступами
З використанням Flexible Box Model
Довгий час мене цікавило питання, як же створити навігацію, ширина всіх пунктів якої складалася б з ширини, яка залежить від розмірів вмісту і додаткової ширини, що має однакове значення для кожного пункту. Її браузер повинен обчислювати при зміні розмірів вікна і додавати до блокам меню. Для кращого розуміння погляньте на картинку.
Червоними стрілками показано відстань між текстом і правої рамкою блоку, це як раз ті додаткові відступи, які повинні змінюватися динамічно і бути однаковими для всіх пунктів. Відстань між словами пунктів меню також в такому меню однаково (так як одно подвоєному відступу).
Спробуємо застосувати цю методику на практиці для наших потреб. Спочатку дамо списку ul клас container і задамо йому властивість display: box. Дане значення властивості display є новим і повідомляє браузеру, що даний блок слід розглядати як особливий елемент, званий "гнучким полем". Його дочірні елементи li будуть виводитися горизонтально, завдяки властивості box-orient.
Наступне дуже важлива властивість, яке повинно бути присвоєно пунктам меню - box-flex. Воно задає ступінь гнучкості елементів li. тобто від нього залежить як блоки поділять між собою вільний простір. У прикладі нижче для пунктів меню встановлено значення box-flex: 1. отже вони розділять обсяг пам'яті, доступний в рівній пропорції. Таким чином поставлена задача вирішена.
Далі наводиться код HTML і CSS, а також практичний приклад функціонування меню.
З використанням display: table (або таблиці)
Все було б добре в першому варіанті, якби не істотний мінус - підтримка браузерів залишає бажати кращого, причому для досягнення хоч якоїсь кросбраузерності доводиться застосовувати власні властивості браузерів з префіксами. Такі як -moz (Firefox), -webkit (Chrome і всі браузери на основі Chromium, включаючи останні версії Опери - як відомо розробники відмовилися від використання движка Presto), c підтримкою старих версій Опери і Internet Explorer все ще гірше.
Тому доцільним є використання іншого методу, більш-менш кросбраузерності. Перше, що спадає на думку - таблиці. Але тут нас чекає розчарування: поки пункти приблизно однакової довжини вид меню в принципі нормальний, варто тільки поставити довгий або короткий пункт - таблиця стає потворно непропорційною. У довгого пункту відступи набагато більше, ніж у інших, відповідно він набагато ширше, у короткого пункту найменші відступи - він самий короткий. Мабуть це пов'язано з тим, як таблиця перерозподіляє вільний простір: більше ширина пункту - більше додаткового простору виділяється на нього з наявного. І внаслідок цієї нерівномірності виходить такий негарний перекіс.
Як це вирішити? Наприклад, якщо додати для осередків властивість width: 1%, то ситуація докорінно змінюється. Точного пояснення не можу дати, припущу, що коли ширина осередків однакова і свідомо менше вмісту, вільний простір починає розподілятися між ними порівну. Чим би це не пояснювалося, на виході ми отримуємо результат практично ідентичний використання Flexible Box Model.
Далі наведено код цього варіанту навігації.