Мега меню с выскальзывающими панелями на CSS3
Мегаменю на CSS3 - выскальзывающие панели со списками ссылок. Для анимации используются трансформации, которые работают только в новейших браузерах Firefox, Chrome, Safary, IE9, Opera10. Меню будет работать и в старых браузерах но без анимации.
Разметка HTML
<!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
.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://feedproxy.google.com/~r/ruseller/CdHX/~3/9ADgHlKjh8c/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
"Я думаю, что много людей первоначально думало, что "e" в электронной коммерции было более важным, чем бизнес." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.