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

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

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

Редактировать выпадающее вертикальное меню для сайта начнем с создания файла поведения. Откройте Блокнот Windows и вставьте в него вот этот код:

<script type="text/javascript"><!--mce:0--></script>

Сохраните файл как csshover.htc и скопируйте его в корень сайта. Туда же нужно скопировать графические файлы с указателями-треугольниками. Такие файлы легко сделать в фотошопе.

Откроем создаваемую страницу и вставим между тегами <head> и </head> вот такой код:

  <!--[if lt IE 7]>
<mce:style type="text/css" media="screen"><! #menuh{float:none;} body{behavior:url(csshover.htc); font-size:100%;} #menuh ul li{float:left; width: 100%;} #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;} -->

Вот теперь все должно работать. Но это не самая сложная часть меню на css, сложнее разобраться, как редактировать код, чтобы создавать любые комбинации кнопок в панели навигации по сайту. Но мы и в этом разберемся.
Откроем создаваемую страницу в редакторе Dreamweaver в режиме Код. Я долго пытался описать содержание кода с помощью слов, но и сам запутался окончательно и боюсь и вас запутать. На помощь пришел проверенный в «бою» Photoshop. И вот что получилось:

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

Как видите, код непосредственно меню на css находится в контейнере menuh выделенном зеленым цветом, а тот в свою очередь во внешнем контейнере menuh-container — коричневый цвет. Код кнопки Европа находится в списке-контейнере, выделенном синим цветом. Сама кнопка Европа, желтый цвет, содержит список-контейнер выделенный красным цветом, в котором находится код одиночных кнопок Германия и Албания а так же код кнопок Франция, Италия, Россия, которые содержат списки-контейнеры с кнопками городов. В конце кода вы видите в контейнере menuhодиночную кнопку Азия. Кажется все понятно. Даже не знаю что тут еще объяснять. Так, что просто пара советов.

Если вы хотите добавить в вертикальное меню кнопку со сложным меню, то, по-моему, проще будет скопировать меню кнопки Европа, синий контейнер, и вставить его в нужное место. А после «шерстить» внутренний код как вам нужно. И не забывайте проверяться в каком-либо браузере. И, обязательно, в IE.






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

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