Горизонтальное выпадающее меню для сайта | Как создать свой сайт

Как сделать горизонтальное выпадающее меню для сайта

Фев-6-2010 Автор: VeryOldMan

Эта статья зародилась в ответ на комментарий, который ДАниил  оставил в гостевой книге. Суть его состоит в том, что автор коммента выражает пожелание увидеть урок по созданию горизонтального выпадающего меню для сайта.

Не знаю чем так привлекательны эти раскрывающиеся меню для сайта, но если народ хочет – то пожалуйста!  Создание сайта — процесс творческий. Единственное предостережение. Здесь надо будет хоть немного знать язык 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»> вставляем этот код:

 

Что мы сейчас сделали. Мы в контейнер header вставили контейнер menu с кодом меню навигации. Если сейчас переключить редактор в режим Проект, то можно увидеть вот что:

 горизонтальное выпадающее меню для сайта

Проверте браузером. И все. Меню навигации для сайтаготово. Нравится? Понравится, может если вы проверяли любым браузером, кроме Internet Explorer. С этим же сплошные проблемы. Народ давно с ним мучается и в процессе этих мучений придумал кое-какие контрмеры.

Как редактировать горизонтальное меню для сайта

Для того, чтобы корректно отобразить горизонтальное выпадающее меню для сайта в браузере IE  мы вставили в код панели навигации, так называемые условные комментарии, но кроме этого нужно создать еще одну таблицу стилей, специально для IE, которую также нужно подключить к странице с помощью условных комментариев. Начнем с таблицы. Тут все просто. Создаем новую таблицу и назовем ееie. Вставим в эту таблицу вот такой код:

.menu ul li a.hide, .menu ul li a:visited.hide{
    display:none
}
.menu ul li a:hover{
    color:#fff;
    background:#36f
}
.menu ul li a:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li a:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li a:hover ul li a:hover{
    background:#6fc;
    color:#000
}

Сохраним таблицу. Перейдем к создаваемой странице. В режиме Код, в код страницы сразу за метатегом <title>Документ без названия</title> — вставляем этот код:

После этого в браузере IE все должно работать.

Теперь разберемся как  редактировать  горизонтальное выпадающее меню для сайта. Итак, рассмотри варианты:

1. Вам необходимо увеличить число кнопок-разделов. Если внимательно посмотреть на код этого горизонтального меню для сайта, то можно увидеть, что он состоит из двух практически одинаковых блоков. Отличаются они только содержанием надписей на кнопках разделов и страниц. Каждый из них, первый например, начинается тегом <li><a class=»hide» href=»»>Европа</a> и заканчивается тегом </li> . Каждый такой блок – это кнопка раздела с содержащимися в нем страницами. Если вам нужно добавить кнопку-раздел, до достаточно просто скопировать любой такой блок и вставить его за последним блоком после тега </li>. Естественно, вручную, изменить содержание надписей. Не забывайте при этом увеличить ширину контейнера menu в таблице стилей panel.
2. Если вам необходимо увеличить число страниц в разделе, то достаточно скопировать строку, например <li><a href=»» title=»»>Франция</a></li> и вставить в этот же список меду тегами <ul> и </ul> и изменить содержание надписи на нужное вам. Естественно, уменьшить число страниц можно просто удаляя ненужные строки.
3. Навигация по страницам. Для перехода на нужную страницу достаточно вставить ее адрес в строку списка. Например, вы создали страницу, посвященную Франции и дали ей имя franse.html. Тогда строка в списке будет выглядеть так: <li><a href=»franse.html» title=»»>Франция</a></li>
4. Расположение панели навигации в хедере можно редактировать с помощью таблицы стилей panel, изменяя отступы в стиле menu.
5. Шрифт и его параметры, цвет фона кнопок разделов и отдельных страниц задаются в стилях таблицы стилей panel.

Ну, вроде бы и все. Как видите ничего сложного и создать выпадающее горизонтальное меню для сайта можнолегко, особенно для тех, кто хоть немного знаком с языком html и знает как создавать и редактировать стили css в редакторе Dreamweaver.  






Комментариев (0)

Добавить комментарий