Мега меню с выскальзывающими панелями на CSS3

Скрипты меню 2012-Май-31 OkJkeee 4.7k 157 6

Мегаменю на CSS3 - выскальзывающие панели со списками ссылок. Для анимации используются трансформации, которые работают только в новейших браузерах Firefox, Chrome, Safary, ID9, Opera10. Меню будет работать и в старых браузерах но без анимации.
Что бы увидеть всю красоту,а также функционал меню смотрите демо.
Данное меню может подойти для студий,сайтов с большим кол-вом информации.
Ставим следующий код в новую страницу сайта:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <title>Выскальзываюшее меню CSS3 | Материалы сайта RUSELLER.COM</title>
  <meta charset="utf-8">
</head>
<body>
<div class="example">
  <ul class="menu">
  
  <li class="main"><a target="_blank" href="http://www.ruseller.com/">Главная</a></li>
  <li class="main" id="has-sub1"><a target="_blank" href="http://www.ruseller.com/">Уроки</a></li>
  <li class="main" id="has-sub2"><a target="_blank" href="http://www.ruseller.com/">Ресурсы</a></li>
  <li class="main" id="has-sub3"><a target="_blank" href="#">Меню #4</a></li>
  <li class="main" id="has-sub4"><a target="_blank" href="#">Меню #5</a></li>
  <li class="main"><a target="_blank" href="http://www.ruseller.com/">О нас</a></li>
  <li class="main"><a target="_blank" href="http://www.ruseller.com/">Назад</a></li>

  
  <li class="sub" id="sub1">
  <table><tr>
  <td>
  <dl>
  <dt>Ссылки #1</dt>
  <dd><a target="_blank" href="http://www.ruseller.com/">HTML / CSS</a></dd>
  <dd><a target="_blank" href="http://www.ruseller.com/">JS / jQuery</a></dd>
  <dd><a target="_blank" href="http://www.ruseller.com/">PHP</a></dd>
  <dd><a target="_blank" href="http://www.ruseller.com/">MySQL</a></dd>
  <dt>Ссылки #2</dt>
  <dd><a target="_blank" href="http://www.ruseller.com/">XSLT</a></dd>
  <dd><a target="_blank" href="http://www.ruseller.com/">Ajax</a></dd>
  <dd><a target="_blank" href="http://www.ruseller.com/">HTML / CSS</a></dd>
  </dl>
  </td>
  <td>
  <dl>
  <dt>Ссылки #3</dt>
  <dd><a target="_blank" href="#">Ссылка 31</a></dd>
  <dd><a target="_blank" href="#">Ссылка 32</a></dd>
  <dd><a target="_blank" href="#">Ссылка 33</a></dd>
  <dd><a target="_blank" href="#">Ссылка 34</a></dd>
  <dd><a target="_blank" href="#">Ссылка 35</a></dd>
  <dd><a target="_blank" href="#">Ссылка 36</a></dd>
  <dd><a target="_blank" href="#">Ссылка 37</a></dd>
  <dd><a target="_blank" href="#">Ссылка 38</a></dd>
  </dl>
  </td>
  <td>
  <dl>
  <dt>Ссылки #4</dt>
  <dd><a target="_blank" href="#">Ссылка 41</a></dd>
  <dd><a target="_blank" href="#">Ссылка 42</a></dd>
  <dt>Ссылки #5</dt>
  <dd><a target="_blank" href="#">Ссылка 51</a></dd>
  <dd><a target="_blank" href="#">Ссылка 52</a></dd>
  <dt>Ссылки #6</dt>
  <dd><a target="_blank" href="#">Ссылка 61</a></dd>
  <dd><a target="_blank" href="#">Ссылка 62</a></dd>
  </dl>
  </td>
  </tr></table>
  </li>

  . . .

  </li>
  </ul>

  <div style="clear:both"></div>
</div>
</body>
</html>

Следующий код ставим в ваш css:

Code

.menu {
  font-family:Verdana, sans-serif;
  list-style:none;
  margin:0;
  min-height:35px;
  padding:0;
  position:relative;
  width:100%
}
.menu li.main {
  float:left;
  padding-right:1px
}
.menu li.main a {
  background-color:#000;
  color:#fff;
  display:block;
  font-size:13px;
  font-weight:700;
  height:35px;
  line-height:35px;
  padding:0 25px;
  text-decoration:none
}
.menu li.sub {
  background-color:#444;
  border:0;
  clear:both;
  float:left;
  height:0;
  overflow:hidden;
  position:relative;
  width:100%;

  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;

  -moz-transition: height 0.5s ease-in-out;
  -ms-transition: height 0.5s ease-in-out;
  -o-transition: height 0.5s ease-in-out;
  -webkit-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;

  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.menu li.sub table {
  width:100%
}
.menu li.sub dl {
  background-color:#fff;
  height:195px;
  margin:5px 5px 0 0;
  padding:10px;

  -moz-border-radius:8px;
  border-radius:8px
}
.menu li.sub dt {
  border:1px solid #000;
  color:#000;
  font-size:14px;
  font-weight:700;
  line-height:18px;
  margin:1px 0;
  padding:0 10px;

  border-radius:5px;
  -moz-border-radius:5px
}
.menu li.sub dt:hover {
  background-color:#ccc
}
.menu li.sub dd {
  margin:0;
  padding:0
}
.menu li.sub dd a {
  color:#666;
  display:block;
  font-size:12px;
  line-height:20px;
  padding-left:30px;
  text-decoration:none;

  -moz-border-radius:5px;
  border-radius:5px
}
.menu li.sub dd a:hover {
  background-color:#ccc;
  color:#444
}
.menu li#has-sub1:hover ~ li#sub1,
.menu li#has-sub2:hover ~ li#sub2,
.menu li#has-sub3:hover ~ li#sub3,
.menu li#has-sub4:hover ~ li#sub4 {
  height:240px;

  -moz-transition: height 0.5s ease-in-out 0.2s
  -ms-transition: height 0.5s ease-in-out 0.2s
  -o-transition: height 0.5s ease-in-out 0.2s
  -webkit-transition: height 0.5s ease-in-out 0.2s
  transition: height 0.5s ease-in-out 0.2s
}
li#sub1:hover,
li#sub2:hover,
li#sub3:hover,
li#sub4:hover {
  height:240px;

  -moz-transition: height 0.5s ease-in-out 0.2s
  -ms-transition: height 0.5s ease-in-out 0.2s
  -o-transition: height 0.5s ease-in-out 0.25
  -webkit-transition: height 0.5s ease-in-out 0.2s
  transition: height 0.5s ease-in-out 0.2s
}

Все.

Скачать Демо

Источник: http://ruseller.com/