CSS меню в стиле Web 2.0.

Для создания CSS навигации, нам потребуется 2 графических элемента, которые можно получить из статьи о рисовании web 2.0 менюшек. Это градиентная полоска на всю ширину и маленький треугольник для отметки текущего раздела сайта. Остальное мы создадим с помощью CSS.

Для нашего CSS меню мы используем обычную разметку списка ul с элементами li в качестве пунктов меню.

 

Далее возьмем CSS стили для создания нужного нам внешнего вида меню:

 

Здесь мы помещаем нужный фон-градиент для ul и задаем бордеры снизу и сверху разной толщины для придания нужного эффекта. Каждый элемент li это блок с левым float, тем самым получая полоску в одну строку. Также добавляем некоторые отступы для приятного внешнего вида и необходимых размеров кнопок для каждого раздела. Для активного раздела (#current) мы указываем еще снизу фоном тот самый треугольник. Понадобится определенный php-код на сервере, чтобы после каждого запроса определять текущее положения пользователя на сайте и ставить #current к нужной ссылке.

Можно скачать пример.

Источник:www.web-development-blog.com.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">