ПРОГРАММИРОВАНИЕ! СОЗДАНИЕ САЙТОВ И ИХ ОПТИМИЗАЦИЯ

Главная » Статьи » Программирование » HTML

Вертикальное меню с подменю методами html

Вертикальное меню с подменю методами html
При разработке веб-сайтов очень часто возникает вопрос о проектировании меню. Эти меню могут быть различных типов - вертикальные и горизонтальные, с подкатегориями и без них. Отдельно рассматриваются меню с помощью использования технологий javascript, ajax и flash.

В нашей же статье мы рассмотрим простое меню на html с использванием каскадных таблиц стилей css.

Но, как вы увидите дальше, в реализации этого кода на hmtl нет ничего сложного

Html-код, который формирует меню

item 1

item 2

item 3

item 4

item 5

item 6

item 7

Для оформления меню воспользуемся помощью таблиц стилей CSS
/* main */
#navMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#navMenu {
width: 150px;
}
#navMenu li {
display:inline;
}

/* menu */
#navMenu li a:link, #navMenu li a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 0.6em;
font-weight: bold;
color: White;
height: 12px;
display: block;
background: url(bckMenu.gif);
padding: 5px 0 6px 20px;
}
#navMenu li a:hover {
color: #ACD373;
background: url(bckMenu.gif) 0 -23px;
padding: 5px 0 6px 20px;
}

/* subMenu */
#navMenu li li a:link, #navMenu li li a:visited {
font-weight: normal;
background: url(bckSubMenu.gif);
padding: 2px 0 3px 30px;
}
#navMenu li li a:hover {
background: url(bckSubMenu.gif) 0 -17px;
padding: 2px 0 3px 30px;
}

/* subSubMenu */
#navMenu li li li a:link, #navMenu li li li a:visited {
background: url(bckSubSubMenu.gif);
padding: 0 0 1px 40px;
}
#navMenu li li li a:hover {
background: url(bckSubSubMenu.gif) 0 -13px;
padding: 0 0 1px 40px;

Категория: HTML | Добавил: Merlin (08.12.2009)

Просмотров: 1663 | Рейтинг: 0.0/0

Всего комментариев: 0

Статьи по Оптимизации

ПРОГРАММИРОВАНИЕ! СОЗДАНИЕ САЙТОВ И ИХ ОПТИМИЗАЦИЯ