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

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

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

Создание базового горизонтального CSS меню
Красивое горизонтальное CSS меню для сайта
Красивое горизонтальное CSS меню с подтекстом
Еще одно горизонтальное 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 код меню

или как сделать 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 код меню

или как сделать 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 код меню

или как сделать 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 | Обновление: Ноябрь 2018

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

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

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

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

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

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

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

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

Автор проекта - Вася Митин | Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018