Меню, що випадає на css3

Відео: Створення меню, що випадає (CSS, JQuery)

Меню, що випадає на CSS3

Можливості CSS3 зможуть додати вашій сайту красиві переходи, анімацію і перетворення. І в цьому уроці ми створимо меню, що випадає на CSS3, і навіть подстрахуем в тому випадку, якщо користувач зайде з браузера Internet Explorer. Існує величезна безліч різних меню, але дане меню відрізняється своєю компактністю.

Відео: Просте меню, що випадає

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

Зверніть увагу на уроки, написані раніше, про те як створити різні види меню. Можливо якийсь із них вам сподобається:

  • Меню в стилі мінімалізм
  • CSS3 навігація з переходами
  • Меню для сайту в стилі акордеона
  • Класне меню для сайту на основі спрайтів
  • Створення висувається меню
  • Випадає горизонтальне меню з пошуком на CSS3 і HTML5
  • Цікаве вертикальне меню на CSS3
  • Красиве горизонтальне меню за допомогою CSS

HTML частина

Весь HTML код з підпунктами я не писав, так як він займе дуже багато місця на сторінці, а залишив лише зразкове меню. Я думаю вам не складе труднощів самостійно за прикладом, який знаходиться в демо, дописати чи видалити непотрібні пункти меню:

Відео: Меню, що випадає тільки на CSS

123456789101112131415161718192021222324
="Menu-wrap"gt;lt;div id="Menu-trigger"gt; Менюlt;/divgt;lt;ul id="Menu"gt;lt;ligt; lt;a href="#"gt; Головнаlt;/agt; lt;/ligt;lt;ligt;lt;a href=""gt; Категоріїlt;/agt;lt;ulgt;lt;ligt;lt;a href=""gt; CSSlt;/agt;lt;ulgt;lt;ligt; lt;a href=""gt; Підпункт 11lt;/agt; lt;/ligt; ....lt;/ulgt;lt;/ligt; .....lt;ligt;lt;a href=""gt; Роботиlt;/agt; .....lt;/ulgt;lt;/ligt;lt;ligt; lt;a href=""gt; Про автораlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Контактиlt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

CSS частина



Спершу пропишемо стилі для відображення меню в браузері:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
a {color: # 2A679F-}#menu, #menu ul {margin: 0-padding: 0-list-style: none-}#menu {width: 960px-margin: 60px auto-border: 1px solid # 222-background-color: # 111-background-image: -moz-linear-gradient(# 444, # 111)-background-image: -webkit-gradient(linear, left top, left bottom, from(# 444), to(# 111))-background-image: -webkit-linear-gradient(# 444, # 111)-background-image: -o-linear-gradient(# 444, # 111)-background-image: -ms-linear-gradient(# 444, # 111)-background-image: linear-gradient(# 444, # 111)--moz-border-radius: 6px--webkit-border-radius: 6px-border-radius: 6px--moz-box-shadow: 0 1px 1px # 777, 0 1px 0 # 666 inset--webkit-box-shadow: 0 1px 1px # 777, 0 1px 0 # 666 inset-box-shadow: 0 1px 1px # 777, 0 1px 0 # 666 inset-}#menu: before,#menu: after {content: ""-display: table-}#menu: after {clear: both-}#menu {zoom:1-}#menu li {float: left-border-right: 1px solid # 222--moz-box-shadow: 1px 0 0 # 444--webkit-box-shadow: 1px 0 0 # 444-box-shadow: 1px 0 0 # 444-position: relative-}#menu a {float: left-padding: 12px 30px-color: # 999-text-transform: uppercase-font: bold 12px Arial, Helvetica-text-decoration: none-text-shadow: 0 1px 0 # 000-}#menu li: hover gt; a {color: #fafafa-}*html #menu li a: hover { / * IE6 тільки * /color: #fafafa-}#menu ul {margin: 20px 0 0 0-_margin: 0- / * IE6 тільки * /opacity: 0-visibility: hidden-position: absolute-top: 38px-left: 0-z-index: 1-background: # 444-background: -moz-linear-gradient(# 444, # 111)-background-image: -webkit-gradient(linear, left top, left bottom, from(# 444), to(# 111))-background: -webkit-linear-gradient(# 444, # 111)-background: -o-linear-gradient(# 444, # 111)-background: -ms-linear-gradient(# 444, # 111)-background: linear-gradient(# 444, # 111)--moz-box-shadow: 0 -1px rgba(255,255,255,.3)--webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3)-box-shadow: 0 -1px 0 rgba(255,255,255,.3)--moz-border-radius: 3px--webkit-border-radius: 3px-border-radius: 3px--webkit-transition: all .2s ease-in-out--moz-transition: all .2s ease-in-out--ms-transition: all .2s ease-in-out--o-transition: all .2s ease-in-out-transition: all .2s ease-in-out-}#menu li: hover gt; ul {opacity: 1-visibility: visible-margin: 0-}#menu ul ul {top: 0-left: 150px-margin: 0 0 0 20px-_margin: 0- / * IE6 тільки * /-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3)--webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3)-box-shadow: -1px 0 0 rgba(255,255,255,.3)-}#menu ul li {float: none-display: block-border: 0-_line-height: 0- / * IE6 тільки * /-moz-box-shadow: 0 1px 0 # 111, 0 2px 0 # 666--webkit-box-shadow: 0 1px 0 # 111, 0 2px 0 # 666-box-shadow: 0 1px 0 # 111, 0 2px 0 # 666-}#menu ul li: Last-child {-moz-box-shadow: none--webkit-box-shadow: none-box-shadow: none-}#menu ul a {padding: 10px-width: 130px-_height: 10px- / * IE6 тільки * /display: block-white-space: nowrap-float: none-text-transform: none-}#menu ul a: hover {background-color: # 0186ba-background-image: -moz-linear-gradient(# 04acec,# 0186ba)-background-image: -webkit-gradient(linear, left top, left bottom, from(# 04acec), to(# 0186ba))-background-image: -webkit-linear-gradient(# 04acec, # 0186ba)-background-image: -o-linear-gradient(# 04acec, # 0186ba)-background-image: -ms-linear-gradient(# 04acec, # 0186ba)-background-image: linear-gradient(# 04acec, # 0186ba)-}#menu ul li: First-child gt; a {-moz-border-radius: 3px 3px 0 0--webkit-border-radius: 3px 3px 0 0-border-radius: 3px 3px 0 0-}#menu ul li: First-child gt; a: after {content: ``-position: absolute-left: 40px-top: -6px-border-left: 6px solid transparent-border-right: 6px solid transparent-border-bottom: 6px solid # 444-}#menu ul ul li: First-child a: after {left: -6px-top: 50%-margin-top: -6px-border-left: 0-border-bottom: 6px solid transparent-border-top: 6px solid transparent-border-right: 6px solid # 3b3b3b-}#menu ul li: First-child a: hover: after {border-bottom-color: # 04acec-}#menu ul ul li: First-child a: hover: after {border-right; color: # 0299d3-border-bottom-color: transparent-}#menu ul li: Last-child gt; a {-moz-border-radius: 0 0 3px 3px--webkit-border-radius: 0 0 3px 3px-border-radius: 0 0 3px 3px-}

Також в демо-прикладі присутні стилі меню для мобільних пристроїв, але щоб не писати статтю складається з коду, я ці стилі не писав.

.... хитрості для Internet Explorer і не тільки

Підключаємо бібліотеку jQuery

1
lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;

І додамо невеликий JS код:

1234567891011121314151617181920
$(function() {if ($.browser.msie  $.browser.version.substr(0,1)lt;7){$(`Li`).has("Ul `).mouseover(function(){$(this).children(`Ul`).css(`Visibility`,`Visible`)-}).mouseout(function(){$(this).children(`Ul`).css(`Visibility`,`Hidden`)-})}/ * Mobile * /$(`# Menu-wrap`).prepend(`
Меню`)-$("# Menu-trigger").on("Click", function(){$("#menu").slideToggle()-})-// iPadvar isiPad = navigator.userAgent.match(/ IPad / i) != null-if (isiPad) $(`#menu ul`).addClass(`No-transition`)-})-

висновок

Ви, напевно, подумаєте що дуже багато стилів, але ефект того вартий :).

Успіхів!

джерело: red-team-design.com

Відео: Уроки javascript Практика # 4 Пишемо меню, що випадає

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!