Нонче тут

Сейчас 61 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Двухуровневое горизонтальное меню на css

Вначале создаём обычный список

<ul>
<li>
<a href="http://wellte.ru/">Главная</a>
</li>
<li>
<a href="/index/0-13">Корпоративным клиентам</a>
</li>
<li>
<a href="/index/0-12">Туры по Росии</a>
</li>
<li><a href="#">Финляндия</a>
</li>
<li><a href="/index/0-14">Контакты</a></li></ul>


Потом выбираем пункт для вложения и помечаем его стрелочкой ↓
Я выбрала пункт "Финляндия" и приписала к нему ввиде списка выпадающие пункты (они выделены красным)

<ul>
<li>
<a href="http://wellte.ru/">Главная</a>
</li>
<li>
<a href="/index/0-13">Корпоративным клиентам</a>
</li>
<li>
<a href="/index/0-12">Туры по Росии</a>
</li>
<li><a href="#">Финляндия↓</a>
<ul><li> <a href="/index/0-20"><span>Коттеджи в Финляндии</span></a></li>
<li> <a href="/index/0-21"><span>Туры в Скандинавию</span></a></li>
<li><a href="/index/0-19"><span>Виза в Финляндию</span></a></li>
</ul>

</li>
<li><a href="/index/0-14">Контакты</a></li></ul>

Теперь озаботимся стилями и красивостями

Начнём с фона меню в целом: для этого заключим меню в тэг <div> и придадим ему id navBar1, например

 <div id="navBar1"><ul>
<li >
<a href="http://wellte.ru/">Главная</a>
</li>
<li >
<a href="/index/0-13">Корпоративным клиентам</a>
</li>
<li >
<a href="/index/0-12">Туры по Росии</a>
</li>
<li ><a href="#">Финляндия ↓</a>
<ul><li> <a href="/index/0-20"><span>Коттеджи в Финляндии</span></a></li>
<li> <a href="/index/0-21"><span>Туры в Скандинавию</span></a></li>
<li><a href="/index/0-19"><span>Виза в Финляндию</span></a></li>
</ul>

</li>
<li ><a href="/index/0-14">Контакты</a></li></ul></div>

Придумаем имя класса для списка, что бы вправить мозги IE 7. Я выбрала имя .headerList1

 <div id="navBar1"><ul>
<li class="headerList1">
<a href="http://wellte.ru/">Главная</a>
</li>
<li class="headerList1">
<a href="/index/0-13">Корпоративным клиентам</a>
</li>
<li class="headerList1">
<a href="/index/0-12">Туры по Росии</a>
</li>
<li class="headerList1"><a href="#">Финляндия↓</a>
<ul><li> <a href="/index/0-20"><span>Коттеджи в Финляндии</span></a></li>
<li> <a href="/index/0-21"><span>Туры в Скандинавию</span></a></li>
<li><a href="/index/0-19"><span>Виза в Финляндию</span></a></li>
</ul>

</li>
<li class="headerList1"><a href="/index/0-14">Контакты</a></li></ul></div>

Теперь займёмся стилями и спецэфектами: у нас ссылки будут менять цвет и фон при наведении.

это будет фон всего меню
это фон ссылки основного меню при наведении
это фон ссылки выпадающей части
это фон выпадающей ссылки при наведении

Некоторые стили могут повторяться и код не самый ровный, но он выдерживает встречу с IE 6, 7 и 8


/*общий фон меню*/
#navBar1 {
background: url("menu4_bg.png") repeat-x scroll center center transparent;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
height: 33px;
line-height: 30px;
width:90%;
}
/*скрытое выпадающее меню без наведения*/ #navBar1 ul ul {
display: none;
list-style: none outside none;
}
/*убираем маркировки списка*/
#navBar1 ul {
list-style: none outside none;
}
/*задаём расположение списка в строчку*/
#navBar1 ul li {
display: block;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
list-style: none outside none;
}
/*вправляем мозги IE*/
#navBar1 ul {
list-style: none outside none;
margin: 0 !important;
padding: 0 !important;
position: relative;
}
.headerList1 {
list-style: none outside none;
}
/*задаём цвет ссылок основного меню, что бы IE не кошмарило*/
.headerList1 a {
color: #FFFFFF;
list-style: none outside none;
}
/*для нормальных браузеров пишем приличный код*/
#navBar1 ul li a {
color: #FFFFFF;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
height: 33px;
line-height: 30px;
list-style: none outside none;
padding-left: 5px;
padding-right: 8px;
text-decoration: none;
}
/*задаём фон и цвет ссылки основного меню при наведении*/
#navBar1 ul li a:hover {
background: url("menu4_shadow.png") no-repeat scroll center bottom transparent !important;
color: #D2C79A !important;
display: block;
font-size: 13px;
font-style: normal;
font-weight: bold;
height: 33px;
text-decoration: none;
}
/*задаём позицию выпадающего меню, пусть пока оно и спрятано*/
#navBar1 ul ul {
display: none;
position: absolute;
top: 32px;
width: auto;
}
/*покажем выпадающую часть*/
#navBar1 ul li:hover ul {
display: block;
left: 20px;
position: absolute;
}
/*подровняем выпадающий список*/
#navBar1 ul ul li {
padding: 1px 0 2px;
}
/*фон выпадающей части меню без наведения*/
#navBar1 ul ul li a {
background: url("menu4-2.png") repeat-x scroll 0 0 transparent;
border: 1px solid #7086A4;
color: #597490 !important;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
height: 33px;
padding-left: 10px;
width: auto;
word-wrap: break-word !important;
}
/* фон выпадающей части меню при наведении*/
#navBar1 ul ul li a:hover {
background: url("menu4-1.png") repeat-x scroll 0 0 transparent !important;
border: 1px solid #A28E76;
color: #445571 !important;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
height: 33px;
}
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.