Создать сайт самому? Не проблема! Все о создании сайтов – как создать дизайн сайта, верстка сайта, уроки HTML, сайт на WordPress, как выбрать хостинг сайтов

Для того, чтобы корректно отобразить раскрывающееся горизонтальное меню навигации для сайта в браузере 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> — вставляем этот код:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" />
<![endif]-->

После этого в браузере 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.  А в следующей статье  еще один вариант горизонтального меню.