Закруглені кути у пунктів меню на CSS
Знову торкнемося теми меню, назва статті говорить сама за себе про що піде сьогодні мова. Є маса способів реалізувати пункти меню з закругленими кутами. Але в цій статті піде мова про те як це зробити без використання скриптів, але з використанням картинок (від них нікуди не дітися). Думаю слід на самому початку розповісти принцип, щоб в подальшому було зрозуміло що ми будемо реалізовувати. В даному прикладі буде розглянуто горизонтальне меню при наведенні на один з пунктів, якого буде з'являтися фон із закругленими краями. Ось приклад. З першого погляду здається нічого складно, просто підкладаємо під пункт меню потрібну картинку за допомогою властивості background і все. В принципі так, але більшість верстальників впадають в ступор, коли кількість символів в пунктах меню значно відрізняються. І як зробити так щоб лівий і правий відступи від країв підкладається картинки були однакові при різній довжині. Спершу приходить думка про те щоб підкладати під кожен пункт меню окрему картинку, але це додаткові картинки, додатковий код і що дуже сумно зовсім динамічне рішення. Рішення є і досить просте. І що найприємніше, нам буде потрібно всього одна картинка. І так ... Картинка повинна мати такий вигляд:
Так, саме така довга, можливо вам і достовірніше буде потрібно.
Меню буде представлено горизонтальним списком (ul), і в пункти-посилання нашого меню ми додамо один невеликий тег
Хоча в XHTML тег не допускає вкладених тегів, тег є винятком. Ви можете сміливо його вставляти в тег , результат виявиться дійсним і пройде валідацію.
over.gif є нашою довгою картинкою. Дивимося що вийшло в кінцевому підсумку - РЕЗУЛЬТАТ. Код є повністю валідним, відповідні значки додаються. Ось так просто і без всяких JS вирішується проблема із закругленими кутами у пунктів меню.
Таким же чином можна виділяти активні пункти меню. Привласнюєте активної посиланням клас (наприклад class = "active") і цього класу відповідні стилі, приклад наводити не буду, думаю розберетеся.
Гість
Ні звичайно, я зберігаю його подалі про сторонніх очей.
Евгуній
Я взагалі розраховував на те, що це просто приклад. На практиці завдання зазвичай бувають складніше, але якщо не знати самого простого, то і до складного підійти буде дуже складно.
Diablo
Неактивного елементу привласнюєте клас, і прописуйте стилі для цього класу.