Если Вы создаете сайт сами, то вам не помешает вот такой еще вариант, с помощью которого можно создать выпадающее меню навигации для сайта:
В этом примере показаны две кнопки.
Первая, с надписью Европа, содержит раскрывающееся меню с кнопками стран Европы, что видно из указателя в форме белого треугольника на ней. В свою очередь некоторые кнопки стран так же содержат раскрывающееся меню с городами этих стран, на что указывают такие же белые треугольники.
Вторая копка, скажем так, «пустая». Естественно, из таких кнопок можно комбинировать различные виды выпадающих меню навигации по сайту. Единственный недостаток – более сложный код такого меню навигации. Но если очень захотеть и внимательно поработать, то все можно сделать. А я вам постараюсь помочь.
Выпадающее меню навигации для сайта
Итак, начнем, пожалуй, с таблицы стилей. В редакторе Dreamweaver вам нужно создать новую страницу и к ней таблицу стилей с названием menuh. Открыть таблицу и вставить сюда вот такой код:
#menuh-container {
position: absolute;
top: 1em;
left: 1em;
}
#menuh {
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a {
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active {
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover {
color: white;
background-color: #a3c7f8;
text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover {
background-image: url(1.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover {
background-image: url(2.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul {
list-style:none;
margin:0;
padding:0;
float:left;
width:9em;
}
#menuh li {
position:relative;
min-height: 1px;
vertical-align: bottom;
}
#menuh ul ul {
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
top:0;
left:100%;
}
div#menuh li:hover {
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}И сохранить таблицу. Откроем создаваемую страницу и привяжем к ней созданную таблицу стилей нашего выпадающего меню. Затем между тегами <body> и </body> вставим такой код:
<div id="menuh-container"> <div id="menuh"> <ul> <li><a class="top_parent">Европа</a> <ul> <li><a>Германия</a></li> <li><a class="parent">Франция</a> <ul> <li><a>Париж</a></li> <li><a>Лион</a></li> <li><a>Марсель</a></li> <li><a>Брест</a></li> </ul> </li> <li><a>Албания</a></li> <li><a class="parent">Италия</a> <ul> <li><a>Рим</a></li> <li><a>Неаполь</a></li> <li><a href="black.html">Турин</a></li> <li><a>Венеция</a></li> </ul> </li> <li><a class="parent">Россия</a> <ul> <li><a>Москва</a></li> <li><a>Ростов</a></li> <li><a>Смоленск</a></li> <li><a>Тула</a></li> <li><a>Краснодар</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><a>Азия</a></li> </ul> </div> </div>
На этом можно было бы и закончить, если бы не все те же проблемы с браузером Internet Explorer. Можете проверить, в этом браузере меню не работает. И если в первых двух вариантах, когда мы создавали выпадающее меню навигации для сайта, эта проблема решалась с помощью условных комментариев и дополнительной таблицы стилей, то в этом случае с помощью, так называемого поведения.
Что за поведение? В теории, поведение, это что-то вроде таблиц стилей css, только не для правил оформления страницы сайта, а для web сценариев. Короче, теорию можно почитать в книжке. В нашем случае, поведение – это просто тестовый файл с расширением htc. Сделать такой файл, если есть готовый код, очень легко.
Как это делается а так же о том как редактировать код меню — в статье Как редактировать выпадающее меню на css