Совет 1: Как сделать раскрывающееся меню

Раскрывающееся меню на страницах сайтов используется для экономии пространства и логически обоснованного представления структуры веб-ресурса. Способов реализовать этот элемент много, один из наиболее простых приведен ниже.
Вам понадобится
  • Базовые знания языков HTML и CSS
Инструкция
1
HTML-код меню использует вложенные друг в друга элементы списков (UL и LI), внутрь которых помещены ссылки на страницы. Никаких сложных конструкций он не содержит. Динамика реализована средствами CSS, блок описания которого помещен непосредственно в исходный код страницы. В нем тоже нет чего-то особенного, кроме того в тексте есть некоторые пояснения назначения тех или иных стилевых блоков.
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
<title>Раскрывающееся меню</title><style type="text/css"> * {
font-family: Verdana;
font-size: 14px;
} ul,li,a {
padding: 0;
display: block;
border: 0;
margin: 0;
} ul {
border: 1px solid #AAA;
width: 150px;
list-style: none;
background: #FFF;
} li {
background-color: #AAA;
position: relative;
z-index: 9;
padding: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
position: absolute;
top: 5px;
left: 111px; /* для браузеров IE */
}
li.folder>ul {left: 140px;} /* для остальных браузеров */ a {
padding: 2px;
border: 1px solid #FFF;
text-decoration: none;
width: 100%; /* для браузеров IE */
color: #000;
font-weight: bold;
}
li>a {width: auto;} /* для остальных браузеров */ li a {
width: 140px;
display: block;
} li a.submenu {
background-color: yellow;
} /* Ссылки */
a:hover {
border-color: gray;
background-color: #FF0000;
color: black;
}
li.folder a:hover {
background-color: #FF0000;
} /* Папки */
ul ul, li:hover ul ul {display: none;}
li.folder:hover {z-index: 10;}
li:hover ul, li:hover li:hover ul {display: block;} </style></head><body bgcolor="Teal"> <ul id="menu">
<li><a href="page1.0.html">1. Страница</a></li>
<li class="folder">
<a href="page2.0.html" class="submenu">2. Папка</a>
<ul>
<li><a href="page2.1.html">2.1 Страница</a></li>
<li class="folder">
<a href="page2.2.html" class="submenu">2.2 Папка</a>
<ul>
<li><a href="page2.2.1.html">2.2.1 Страница</a></li>
<li><a href="page2.2.2.html">2.2.2 Страница</a></li>
<li><a href="page2.2.3.html">2.2.3 Страница</a></li>
</ul>
</li>
<li><a href="page2.3.html">2.3 Страница</a></li>
</ul>
</li>
<li class="folder">
<a href="page3.0.html" class="submenu">3. Папка</a>
<ul>
<li><a href="page3.1.html">3.1 Страница</a></li>
<li><a href="page3.2.html">3.2 Страница</a></li>
<li><a href="page3.3.html">3.3 Страница</a></li>
</ul>
</li>
<li><a href="page4.0.html">4. Страница</a></li>
</ul></body>
</html>
3
В этот код можно добавить поддержку устаревших версий браузеров Internet Explorer - она реализована с использованием JavaScript-сценария (автор - Peter Nederlof). Вам нужно скачать файл с нужным кодом, например по этой ссылке - http://peterned.home.xs4all.nl/htc/csshover3.htc. Его надо поместить в ту же папку, где лежит основная страница. А в описание стилей основной страницы добавьте ссылку на него - ее можно разместить непосредственно после открывающего тега стилей:/* для старых браузеров IE */
body {behavior: url("csshover3.htc");}

Совет 2: Как создать раскрывающееся меню

Раскрывающееся меню является одним из наиболее удобных решений в оформлении веб-страницы и использовании ее свободного места. Его можно сделать разными способами.
Вам понадобится
  • - HTML-редактор.
Инструкция
1
Скачайте и установите на ваш компьютер программу-редактор веб-страниц. Вы также можете воспользоваться стандартной программой для редактирования текста, но намного проще работать с HTML-кодом в специально предназначенных для этого редакторах. Если вы не можете сориентироваться в их выборе, отдайте предпочтение обычным русскоязычным программам с интуитивно понятным интерфейсом и минимальным набором функций. Выполните загрузку программного обеспечения с официального сайта его разработчика и инсталлируйте его на ваш компьютер, следуя указаниям пунктов меню. Запустите его и выберите в меню создание файла с расширением .css , назовите его style.
2
Откройте редактирование недавно созданного вами файла с расширением .css и пропишите в нем следующий код, который необходим для выполнения операций по редактированию и настройке раскрывающегося списка меню. Вы можете использовать для этого специальные шаблоны, которые доступны для скачивания в интернете или написать код самостоятельно. В случае использовании вами шаблона выполните детальную настройку вашего выпадающего меню касательно фонового цвета, цвета шрифта, настройте ширину меню, его высоту, выравнивание текста и так далее. Введите код для применения указанных вами настроек выпадающего меню.
3
Создайте ненумерованный список позиций выпадающего меню для редактируемой вами веб-страницы. Для этого также используйте готовый или написанный вами код. Это и будет основой вашего выпадающего меню.
4
Если вы не хотите применять HTML-код для создания раскрывающегося меню веб-страницы, скачайте Java-скрипт и вставьте его в редакторе. Используйте для этого готовые шаблоны с предпросмотром, которые выкладываются в интернет. Выберите среди них наиболее подходящий по стилю вашей страницы шаблон, после чего проверьте его на наличие вредоносного кода.
Видео по теме
Совет полезен?
Не забывайте также пользоваться скриптами.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500