CSS горизонтальное меню

Красивое CSS меню для сайта

Создание горизонтального CSS меню для сайта

или как сделать красивое меню с помощью CSS атрибутов


Содержание текущей страницы

  1. Создание базового горизонтального CSS меню
  2. Красивое горизонтальное CSS меню для сайта
  3. Красивое горизонтальное CSS меню с подтекстом
  4. Еще одно горизонтальное CSS меню для сайта

Пример 1. Базовое горизонтальное CSS меню для сайта

или как сделать простейшее CSS меню из HTML списка

HTML код меню:

<title>Создание базового горизонтального меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS код меню

Пример 2. Создание меню для сайта CSS методами

или как сделать CSS меню без использования изображения

HTML код меню:

<title>Создание меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS код меню

Пример 3. Красивое горизонтальное CSS меню для сайта

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">О нашем проекте</span>
</a></li>
<li><a href="#">
<span class="text-top">Справочник</span>
<span class="text-bottom">CSS справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS уроки</span>
<span class="text-bottom">Для начинающих</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS меню</span>
<span class="text-bottom">Коллекция CSS меню</span>
</a></li>
</ul>
</div>

Посмотреть CSS код меню

Пример 4. Горизонтальное меню для сайта CSS методами

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание горизонтального CSS меню без изображения</title>
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS код меню

Дата публикации: Апрель 2010 | Обновление: Август 2014

Скругляем CSS углы   Как сделать красивое горизонтальное меню CSS методами

    Сохранить в сервисы и закладки