Эта статья зародилась в ответ на комментарий, который ДАниил оставил в гостевой книге. Суть его состоит в том, что автор коммента выражает пожелание увидеть урок по созданию раскрывающегося меню навигации для сайта.
Не знаю чем так привлекательны эти раскрывающиеся меню для сайта, но если народ хочет – то пожалуйста! Создание сайта — процесс творческий. Единственное предостережение. Здесь надо будет хоть немного знать язык html. Хотя я постараюсь, как можно более доступно показать, как делается такое меню. Итак, я сделал вот такое раскрывающееся меню в хедере web страницы:
Суть его проста. Вы видите две кнопки с названиями континентов. При наведении курсора – открывается список со ссылками на страны этого континента. Каждой стране соответствует своя страница, на которую и можно перейти.
Итак, как делается меню навигации для сайта. Если у вас есть готовая web-страница – вы можете ее открыть или сделайте новую, как это сделал я. На этой новой странице вставляем плавающий контейнер для хедера. Как мы не раз уже делали. Сразу же создаем стиль этого контейнера под названием header в таблице стилей под названием panel, в котором задаем ширину контейнера хедера 990 пикселей и высоту 100. Фон вот такой как вы видите на картинке. Естественно он может быть любым, в том числе вы можете вставить и фоновое изображение. Привязываем таблицу стилей к странице, а стиль header к контейнеру хедера. Я сделал еще стиль к тегу body чтобы задать такой вот серенький фон, но это не обязательно. В эту же таблицу стилей вставляем вот этот код:
.menu{
font-family:arial, sans-serif;
width:230px;
height:25px;
position:relative;
font-size:11px;
z-index:100;
top: 75px;
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
line-height:20px;
font-size:11px;
overflow:hidden;
background-color: #003300;
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#fff;
background:#36f
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li:hover ul li a:hover{
color:#000;
background-color: #FFFFFF;
}Ну и сохраним эту таблицу.
Теперь переключимся на создаваемую страницу, переходим в режим Код и в код страницы сразу за метатегом <div class="header"> вставляем этот код:
<div class="menu"> <ul> <li><a class="hide">Европа</a> <!--[if lte IE 6]> <a href="">Европа <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> </ul> <!--[if lte IE 6]></td> </tr> </table> </a> <![endif]--></li> <li><a class="hide">Азия</a> <!--[if lte IE 6]> <a href="">Азия <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> </ul> <!--[if lte IE 6]></td> </tr> </table> </a> <![endif]--></li> </ul> </div>
Что мы сейчас сделали. Мы в контейнер header вставили контейнер menu с кодом меню навигации. Если сейчас переключить редактор в режим Проект, то можно увидеть вот что:
Проверте браузером. И все. Меню навигации для сайта готово. Нравится? Понравится, может если вы проверяли любым браузером, кроме Internet Explorer. С этим же сплошные проблемы. Народ давно с ним мучается и в процессе этих мучений придумал кое-какие контрмеры. О том, как обмануть браузер IE, как сделать любое количество кнопок, как менять их цвет, шрифт и все такое прочее в следующей статье.