Продвижение сайтов
Контекстная реклама
Таргетинговая реклама
Digital Agency
SERM
Выпадающее меню на CSS

30 октября 2007


Выпадающее меню со временем стало неотъемлемой частью многоструктурированных сайтов, и JavaScript выпадающее меню теперь неактуально. С приходом Web 2.0, меню создается с помощью XHTML и CSS. Это позволяет сделать навигацию сайта кроссбраузерной, независимой от JavaScript, и более четкой, оперативной.

1. Создание структуры выпадающего меню на CSS

Первым этапом в создании меню является построение его структуры. Лучше всего использовать маркированный список, ведь он позволяет реализовать понятное и грамотно структурированное меню.

[code]
<ul id="nav">
     <li>
          <a href="#null">О компании</a>
          <ul>
               <li><a href="#null">Вакансии</a></li>
               <li><a href="#null">Пресс-центр</a></li>
               <li><a href="#null">История</a></li>
           </ul>
     </li>
     <li>
          <a href="#null">Блог</a>
          <ul>
               <li><a href="#null">Маркетинг</a></li>
               <li><a href="#null">Реклама</a></li>
               <li><a href="#null">Мотивация</a></li>
          </ul>
     </li>
     <li>
          <a href="#null">Контакты</a>
          <ul>
               <li><a href="#null">Написать письмо</a></li>
               <li><a href="#null">Карта проезда</a></li>
          </ul>
     </li>
</ul>
[/code]

2. Прописываем стили CSS и :hover

Весь процесс самого выпадения меню реализуется с помощью любимого "hover" селектора . То есть при наведении на содержимое тега "li" становится виден его дочерний элемент, в нашем случае дочерним элементом является еще один список.

[code]
<style type="text/css">
body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #000000;
}

#nav li {
    list-style-type: none;
    margin: 5px;
    padding:  3px;
    border: 1px solid #999999;
    width: 200px;
}

#nav {
    padding: 0px;
    margin: 0px;
    width: 250px;
}

body ul li ul {
    display: none;
}

body ul li:hover ul {
    padding-top: 0px;
    margin-top: 0px;
    display: block;
    position: absolute;
    margin-left: 164px;
    margin-top: -24px;
}

#nav li:hover {
    background-color: #999999;
    border: 1px solid #000000;
}
</style>
[/code]

3. JavaScript обработчик меню для браузера Internet Explorer 6

В данный момент выпадающее меню не полностью реализуется только с помощью XHTML и CSS, из-за не поддержки IE 6 "li:hover". Ниже приведена функция смены класса элемента, которая автоматически запускается после загрузки страницы и устанавливает события на элементах меню.

[code] <!--[if lte IE 6]>
<script type="text/javascript">
startList = function() {
  if (document.all && document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i = 0; i < navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName == "LI") {
        node.onmouseover = function() {  // Функция замены css класса
          this.className += " over"; 
        }
        node.onmouseout = function() {  // Функция замены css класса
          this.className = this.className.replace(" over", ""); 
        }
    }
    }
  }
}
window.onload = startList;
</script>
<style type="text/css">
.over ul {
    display: block;
}
</style>
<![endif]-->[/code]

Наши клиенты

FitHealth
ActiveFitness
Airline
БалтАвтоТрейд BMW
Мостострой №6
FunJump
Emex
БалтАвтоТрейд Volkswagen
Fun City
iShop

Санкт-ПетербургМосква

  • Звоните!

    +7 (812) 318-40-34 +7 (499) 288-15-30
  • Пишите!

    info@webering.ru
  • Приезжайте!

    Пожалуйста, предварительно позвоните нам и договоритесь о времени встречи.

  • г. Санкт-Петербург, ул. Седова, д. 11, лит. А, оф. 815 БЦ «Эврика»Скоро открытие! г. Москва, ул. Бутлерова, д. 17, оф. 315 БЦ «NEO GEO»

  • Наш офис расположен в 5 минутах от станции метро «Елизаровская» в бизнес-центре «Эврика».

Отправить заявку

Бюджет: 20000 Р