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