Вообще-то раскрывающееся меню, или как его еще называют, выпадающее меню для сайта можно создать разными способами. Покопавшись, я нашел у себя в загашнике, штук пять. И это только те, которые выполнены с помощью html и css. Я пока выбрал три. Первое уже было, так что перейдем ко второму. Чем это меню навигации отличается от предыдущего? Основное отличие в том, что у него нет дополнительной таблицы стилей css, которую мы делали для браузера Internet Explorer, поэтому код значительно проще. Да, еще я ввел в код, в title, вы сами увидите, где именно, поясняющую надпись — Страна в Европе. Естественно только для примера. Вы ее можете благополучно выбросить, или сделать любую свою. После всего этого меню навигации будет иметь такой вид:
Итак, непосредственно, создаем раскрывающееся меню:
Откроем редактор Dreamweaver. Создаем новую страницу. Между тегами <body> и </body> вставляем такой код:
<div class="menu"> <ul> <li><a>Европа<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul> <li><a title="Страна в Европе">Франция</a></li> <li><a title="Страна в Европе">Италия</a></li> <li><a title="Страна в Европе">Греция</a></li> <li><a title="Страна в Европе">Албания</a></li> <li><a title="Страна в Европе">Германия</a></li> <li><a title="Страна в Европе">Чехия</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> <li><a>Азия<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul> <li><a>Япония</a></li> <li><a>Китай</a></li> <li><a>Индия</a></li> <li><a>Непал</a></li> <li><a>Пакистан</a></li> <li><a>Израиль</a></li> <li><a>Иран</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> <li><a>Америка<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul> <li><a>США</a></li> <li><a>Мексика</a></li> <li><a>Канада</a></li> <li><a>Бразилия</a></li> <li><a>Перу</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> <li><a>Африка<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul> <li><a>Марокко</a></li> <li><a>ЮАР</a></li> <li><a>Конго</a></li> <li><a>Сомали</a></li> <li><a>Гвинея</a></li> <li><a>Алжир</a></li> <li><a>Того </a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> </ul> </div>
Если вы хотите сделать раскрывающееся меню для сайта в хедере готовой страницы, то и вставлять данный код нужно в контейнере хедера. Как в первом варианте. Это еще не все. Привяжем сразу к создаваемой странице таблицу стилей. Вставим в код страницы между тегами <head> и </head> вот такой код:
Создаем таблицу стилей под названием menu, открываем ее и вставляем в эту таблицу вот такой код:
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
.menu li{
float:left;
position:relative;
z-index:100;
}
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
.menu a, .menu :visited {
display:block;
font-size:12px;
width:150px;
color:#000;
text-decoration:none;
margin-right:2px;
text-align:center;
background-color: #66CCFF;
font-family: Arial, Helvetica, sans-serif;
padding-top: 7px;
padding-right: 0;
padding-bottom: 7px;
padding-left: 0;
border: 1px solid #0033CC;
margin-top: 2px;
}
.menu :hover{
color:#444;
background-color: #99FFFF;
}
.menu ul ul {
visibility:hidden;
position:absolute;
width:150px;
height:0;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}Вот в принципе и все! ! Раскрывающееся меню готово. Количество кнопок, число страниц, редактируется точно так же как и в первом варианте раскрывающегося меню для сайта. Размеры кнопок, цвет, шрифты и все такое прочее легко редактируются в таблице стилей.
Такой вот такой вариант раскрывающееся меню навигации для сайта. Может этот вам подойдет больше. Над ним можно и нужно поэкспериментировать. Например, сделать рамку вокруг кнопок и увеличить расстояние между кнопками:
Неплохо? Есть у меня в запасе еще одно раскрывающееся меню. Интересный вариант, о котором в следующей статье.