Привет всем! В этой статье я хочу научить Вас создавать собственное красивое раздвижное меню для сайта.
В качестве примера возьму код меню с этой страницы.
Вот код красивого раздвижного меню для сайта.
Этот код состоит из трёх пунктов меню.
1 пункт - содержит в себе 7 подпунктов;
2 пункт - 2 подпункта;
3 пункт - 1 подпункт;
Code
<div style="width: 175px;">
<style type="text/css" media="all">
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
.menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}
.menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}
</style>
<div style="width: 175px;">
<style type="text/css" media="all">
.menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}
.menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}
.menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}
</style>
<span class="menu"><a onclick="$('#1').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Пункт меню 1</a></font></span> <BR>
<div id="1" style="display:none"><span class="menu1">
<a href="http://адрес страницы">Подменю 1</a><BR>
<a href="http://адрес страницы">Подменю 2</a><BR>
<a href="http://адрес страницы">Подменю 3</a><BR>
<a href="http://адрес страницы">Подменю 4</a><BR>
<a href="http://адрес страницы">Подменю 5</a><BR>
<a href="http://адрес страницы">Подменю 6</a><BR>
<a href="http://адрес страницы">Подменю 5</a> <BR>
<a href="http://адрес страницы">Подменю 7</a> <BR>
</span> </div>
<span class="menu"><a onclick="$('#2').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 2</a></FONT></span><BR>
<div id="2" style="display:none"><span class="menu1">
<a href="http://адрес страницы">Подменю 1</a> <BR>
<a href="http://адрес страницы">Подменю 2</a> <BR>
</span></div>
<span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR>
<div id="3" style="display:none"><span class="menu1">
<a href="адрес страницы">Подменю 1</a> <BR>
</span></div>
Итак, начнём разбираться что к чему!
Разделим этот код на две части.
1. Оформление.
Code
<div style="width: 175px;">
<style type="text/css" media="all">
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
.menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}
.menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}
</style>
<div style="width: 175px;">
<style type="text/css" media="all">
.menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}
.menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}
.menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}
</style>
Разберём этот код меню по частям
1.1. Этот код задаёт внешний вид пункту меню.
Code
<div style="width: 175px;"> - отвечает за ширину основного меню.
<style type="text/css" media="all">
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
.menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}
.menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}
</style>
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
height:10px; - ширина основного меню;
width: 175px; - длина основного меню;
font: normal 10px Arial, Helvetica, sans-serif; - стили текста;
text-align: left; - выравнивание текста основного меню (слева, справа, по ширине)
margin-top:1px; - Устанавливает величину отступа от верхнего края элемента.
1.2. Этот код задаёт внешний вид подпункту меню.
Code
<div style="width: 175px;">
<style type="text/css" media="all">
.menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}
.menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}
.menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}
</style>
Всё то же самое как и пункте 1.1.
2. Код отвечающий за количество пунктов и подпунктов меню
1.1 Код пункта меню:
Каждое новый пункт меню следует создавать по такому шаблону
Code
<span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR>
<div id="3" style="display:none"><span class="menu1">
<a href="адрес страницы">Подменю 1</a> <BR>
</span></div>
каждый следующий подпункт (подменю) создаётся кодом:
<a href="адрес страницы">Подменю 1</a> <BR>
таких подпунктов может быть сколько угодно!
Вот и всё! По-моему ничего сложного тут нет!
Для создания нескольких блоков меню на сайте просто переименуйте названия стилей меню .menu и .menu1
напирер на .m и .m1.
Материалы на эту же тему:
Создание абзаца в тексте
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу