CSS3 горизонтальное выпадающее меню в стиле web 2.0

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 4-06-2011, 14:35
CSS3 горизонтальное выпадающее меню в стиле web 2.0Стильная CSS3 горизонтальная выпадающая навигация в стиле web 2.0
Представляю вашему вниманию замечательный пример реализации горизонтального выпадающего меню чисто на css.
Эффект плавного выпадания меню реализован при помощи css3 свойств transition и opacity, градиентная заливка ссылок категорий реализована css3 свойством gradient, тень текста свойством text-shadow никаких картинок нет, всё только на css.

Реализация меню не сложная, поэтому приведу сразу готовый код:

HTML реализация проста - маркированный список меню с вложенными в него маркированными списками категорий:

<ul class="nav">
   <!--CSS3 горизонтальное выпадающее меню от http://megaweb.su/-->
   <li>
    <a href="http://megaweb.su/">Меню 1</a>
    <ul class="sub1">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
     <li class="p4">
      <a href="http://megaweb.su/">Категория 4</a>
     </li>
     <li class="p5">
      <a href="http://megaweb.su/">Категория 5</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 2</a>
    <ul class="sub2">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 3</a>
    <ul class="sub3">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
     <li class="p4">
      <a href="http://megaweb.su/">Категория 4</a>
     </li>
     <li class="p5">
      <a href="http://megaweb.su/">Категория 5</a>
     </li>
     <li class="p6">
      <a href="http://megaweb.su/">Категория 6</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 4</a>
    <ul class="sub4">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 5</a>
    <ul class="sub5">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
  </ul>
  <div class="clear"></div>


CSS реализация тоже простая:

/*CSS3 горизонтальное выпадающее меню от http://megaweb.su/*/
.nav, .nav ul {
padding:0;
margin:0;
list-style:none;
}

.nav {
position:relative;
width:540px;
margin:0 auto;
}

.nav ul {
position:absolute;
top:37px;
left:0;
height:0;
overflow:hidden;
}

.nav li {
float:left;
position:relative;
background:transparent;
}

.nav li a {
display:block;
line-height:35px;
padding:0 20px;
border:1px solid #444;
border-bottom-color:#000;
color: #999;
text-shadow: 1px -1px 1px #000;
text-decoration:none;
font-size:12px;
font-weight:bold;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}

.nav li:hover > a {
background:#666;
border-color:#888 #777 #444 #555;
color:#fff;
}

.nav li:hover ul.sub1 {
width:180px;
height:185px;
}

.nav li:hover ul.sub2 {
width:150px;
height:111px;
}

.nav li:hover ul.sub3 {
width:130px;
height:222px;
}

.nav li:hover ul.sub4 {
width:150px;
height:111px;
}

.nav li:hover ul.sub5 {
width:160px;
height:111px;
}

.nav ul li {
width:100%;
opacity:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

.nav li ul li.p1 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li ul li.p2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li ul li.p3 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li ul li.p4 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li ul li.p5 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li ul li.p6 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li:hover ul li {
opacity:1;
}

.nav li:hover ul li.p1 {
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

.nav li:hover ul li.p2 {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}

.nav li:hover ul li.p3 {
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}

.nav li:hover ul li.p4 {
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}

.nav li:hover ul li.p5 {
-webkit-transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
}

.nav li:hover ul li.p6 {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}

.nav ul li a {
background:#666;
border-color:#888 #777 #444 #555;
color:#bbb;
line-height:1px;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
}

.nav li:hover ul li a {
line-height:35px;
}

.nav ul li a:hover {
background:#09c;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 25, 0));
}

* html .nav a {
border-color:#444 #444 #000 #444;
height:35px;
float:left;
}

.nav a:hover {
background:#666;
border-color:#888 #777 #444 #555;
color:#fff;
}

.nav a:hover ul.sub1 {
width:180px;
height:185px;
}

.nav a:hover ul.sub2 {
width:150px;
height:111px;
}

.nav a:hover ul.sub3 {
width:130px;
height:222px;
}

.nav a:hover ul.sub4 {
width:150px;
height:111px;
}

.nav a:hover ul.sub5 {
width:160px;
height:111px;
}

.nav a:hover ul li a {
line-height:35px;
height:35px;
float:none;
}

.clear {
clear:both;
height:0;
line-height:1px;
margin:0;
padding:0;
}


HTML код меню валидный DTD XHTML 1.0 Strict, меню корректно работает во всех современных браузерах поддерживающих прямо или через хаки (Что такое CSS хаки или Вендорные префиксы) css3 свойства transition, opacity, gradient и text-shadow.

Посмотреть пример CSS3 горизонтальное выпадающее меню
Версия для печати
  • 100
     Просмотров: 13 487      Комментариев: 6   

Понравилась новость CSS3 горизонтальное выпадающее меню в стиле web 2.0 на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на CSS3 горизонтальное выпадающее меню в стиле web 2.0 из категории Меню навигации

№ 6 Автор: Admin 22 декабря 2012 20:18

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: morff
что вы можете посоветовать нащёт рекламы на сайт.

Очень сложный вопрос. Я перепробовал много видов самой разнообразной рекламы и остановился на advmaker.ru - три года я с ними сотрудничаю и проблем никаких, рекомендую.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 5 Автор: morff 22 декабря 2012 18:42

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
спс.я уже разобрался.в сss размер окон подменю был рассчитан на 3 выпадающих окна.поменял размер и все заработало)) Admin такой вопрос: что вы можете посоветовать нащёт рекламы на сайт.Хотелось бы что бы он сам себя кормил.Посещаемость около 1000чел.Ну это с учётом того что сайту пара месяцев,прирост я думаю еще будет.

  • Нравится
  • 0
    

№ 4 Автор: Admin 22 декабря 2012 13:59

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
morff, Попробуйте в правиле
.nav {
position:relative;
width:990px
margin:0 auto;
}

Поменять position:relative; на position:absolute;


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 3 Автор: morff 21 декабря 2012 23:05

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
понятно,все печально( ну эти ошибки исправил а "валидатор" это для меня конечно тяжеловато.ну посмотрим.спасибо за быстрый отзыв wink

  • Нравится
  • 0
    

№ 2 Автор: Admin 21 декабря 2012 14:38

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
morff, Вам очень серьёзно нужно работать над сайтом, странно как он вообще работает. Вот что говорит валидатор по поводу Вашего сайта. Там до меню с сайтом ещё работать и работать. Для начала - у Вас не закрыт тег html , тега body вообще нет, таблицы CSS в движке DLE через @import url подключать не хорошо, CSS подключается вот так , ну а код меню Вы вложили в тег head - этого делать нельзя, код должен быть в теге body или, как в Вашем случае в контейнер div id="wrapper" или div id="header"
В общем делов у Вас там хватает.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: morff 21 декабря 2012 02:02

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
Доброго времени суток!Установил это меню, все работает.Спасибо!И как всегда есть один баг.При открытии подменюшки заползают под слайдер и меню.Как можно исправить?вот мой сайт wotrandom.ru

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус