Это относительно простое и практическое меню, и самое главное, что ему не нужно ссылаться на библиотеку jQuery. Меню может быть адаптировано в вертикальном направлении. Когда главное меню находится близко к вершине, подменю будет внизу, а когда главное меню находится близко к дну, подменю выше. Используя функцию обнаружения сенсорных моментов Modernizr, мы можем сделать ответ подменю на ПК и нажать на сенсорное устройство. Пример также демонстрирует, как регулировать макет с относительно узкой шириной.
HTML -код
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Veggie Made </a> <ul> <li> <a href = "#"> Desert Sorrel </a> </li> <li> <a href = "#"> raisin kakadu </a> </li> <li> <a href = "#" <li> <a href = "#"> slum salsify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> Onion Endive </a> </li> <li> <a href = "#"> Bitterief </a> </li> <a href = "> Bitterief </a> </li> <a href =" салат </a> </li> </li> </li> <li> <a href = "#"> Pepper Tatsoi </a> <ul> <li> <a href = "#"> Brussels Croprout </a> </li> <li> <a href = "#"> kakadu lemon </a> </li> <li> Зеленый </a> </li> <li> <a href = "#"> винный фрукт </a> </li> <li> <a href = "#"> Чеснок Mint </a> </li> <li> <a href = "#"> Zucchini Garnish </a> </li> <li> <a href = "#"> seatce </a> </li> <li> <a href = "# </li> <li> <a href = "#"> сладкая дыня </a> <ul> <li> <a href = "#"> Desert Sorrel </a> </li> <li> <a href = "#"> raisin kakadu </a> </li> <li> <a href = "#"> raisin kakadu </a> </li> <li> <a href = "#" href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> Onion Endive </a> </li> <li> <a href = "#"> Bitterleaf </a> </li> </li> </ul>
CSS -код
/ * Iconfont, сделанный с icomoon.com */@font-face {font-family: 'cbp-tmicons'; src: url ('../ fonts/tmicons/cbp-tmicons.eot'); src: url ('../ fonts/tmicons/cbp-tmicons.eot? #iefix') format ('incedded-opentype'), url ('../ fonts/tmicons/cbp-tmicons.woff') формат ('woff'), url ('../ fonts/tmicons/cbp'). format ('trueType'), url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') format ('svg'); шрифт-вес: нормальный; Стиль шрифта: нормальный;} /* Сброс списка Стиль* /. CBP-TM-MENU, .CBP-TM-MENU UL {СПИСКИЙ СТИЛ: NONE;} /* Установить позицию меню; изменить здесь, чтобы установить на относительный или плавающий и т. Д. */. CBP-TM-MENU {Display: Block; позиция: абсолютно; Z-Index: 1000; Внизу: 0; Ширина: 100%; Фон: #47A3DA; Текст-альбом: верно; Заполнение: 0 2em; поля: 0; Текст-трансформация: заглавная способность;} / * пункты меню первого уровня * /. CBP-TM-Menu> li {Display: Inline Block; Поле: 0 2.6EM; позиция: относительно;} .cbp-tm-menu> li> a {line-hight: 4em; Заполнение: 0 0,3 эм; размер шрифта: 1.2 эм; дисплей: блок; Цвет: #fff;} .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: active {color: #02639d;} / * sumbenu с переходами * /. CBP-TM-SubMenu {position: Absolute; дисплей: блок; видимость: скрыта; непрозрачность: 0; Заполнение: 0; Текст-альбом: слева; Указатель-события: нет; -Вобкит-транзиция: видимость 0s, непрозрачность 0s; -Моз-транзиция: видимость 0s, непрозрачность 0s; Переход: видимость 0s, непрозрачность 0s;} .cbp-tm-show .cbp-tm-submenu {width: 16em; Слева: 50%; Полевая: 0 0 0 -8em; непрозрачность: 1; видимость: видимая; Указатель-события: Авто; -Вобкит-трансляция: видимость 0s, непрозрачность 0,3S; -Моз-трансляция: видимость 0s, непрозрачность 0,3 с; Переход: видимость 0s, непрозрачность 0,3S;} .cbp-tm-show-above .cbp-tm-submenu {внизу: 100%; Padding-bottom: 10px;} .cbp-tm-show-below .cbp-tm-submenu {top: 100%; надоеволок: 10px;} / * Чрезвычайные случаи: недостаточно места на боковых сторонах * /. CBP-TM-NOSPACE-Right .CBP-TM-SUBMENU {справа: 0; Слева: auto;} .cbp-tm-nospace-left .cbp-tm-submenu {слева: 0;} /* .CBP-TM-SUBMENU: After {Border: Solid Transparent; содержание: " "; высота: 0; Ширина: 0; позиция: абсолютно; Указатель-эвоги: none;} .cbp-tm-show-above .cbp-tm-submenu: после {top: 100%; Margin-top: -10px;} .cbp-tm-show-below .cbp-tm-submenu: после {внизу: 100%; Margin-Bottom: -10px;} .cbp-tm-submenu: After {Border-Color: Transparent; ширина границы: 16px; Мяглевая маржа: -16PX; Слева: 50%;} .cbp-tm-show-above .cbp-tm-submenu: после {border-top-color: #fff;} .cbp-tm-show-below .cbp-tm-submenu: после {border-bottom-color: #fff;} .cbp-tm-submenu> li {отображать: #fff;} .cbp-tm-submen фон: #fff;} .cbp-tm-submenu> li> a {padding: 5px 2,3em 5px 0,6em; / * Верхние/нижние пополнения в «EM» вызывают крошечный «прыжок» в Chrome on Win */Display: Block; размер шрифта: 1.2 эм; позиция: относительно; Цвет: #47A3DA; Граница: 4px solid #fff; -Вебкит-трансляция: все 0,2 с; -Моз-трансляция: все 0,2 с; Переход: все 0,2S;} .NO-touch .cbp-tm-submenu> li> a: hover, .no-touch .cbp-tm-submenu> li> a: active {color: #fff; Предпосылки: #47A3DA;} / * Значки (значок меню основного уровня и значки повлажного вещества) * /. CBP-TM-Submenu Li A: до, .cbp-tm-menu> li> a: до {font-family: 'cbp-tmicons'; Говорите: нет; в стиле шрифта: нормальный; шрифт-вес: нормальный; Фонт-вариант: нормальный; Текст-трансформация: нет; высота линии: 1; Вертикальная атака: средняя; Право маржи: 0,6 эм; -Webkit-font-smothing: intialiased;} .cbp-tm-submenu li a: до {position: Absolute; Верх: 50%; маржинальная версия: -0,5ем; Справа: 0.5em;} .cbp-tm-menu> li> a: not (: только-деть): до {content: "/f0c9"; размер шрифта: 60%; Непрозрачность: 0.3;} .cbp-tm-iCon-archive: до {content: "/e002";} .cbp-tm-iCon-cog: до {content: "/e003";} .cbp-tm-icon-users: до {content: "/e004";} .cbp-tm-iCon-erth: {до {ebold: "/e004"; .CBP-TM-ICON-location: до {Content: "/e006";} .CBP-TM-ICON-MOBILE: до {Content: "/e007";} .CBP-TM-ICON-SCREEN: до {Content: "/e008";} .cbp-tm-mail: до {content: "/e009"; .CBP-TM-ICON-CONTRACT: до {Content: "/e00a";} .CBP-TM-ICON-PENCILSE: До {Content: "/E00B";} .CBP-TM-ICON-ATARTICLE: до {Content: "/E00C";} .CBP-TM-ICON-CLOCK: до {Content: "/e00c"; .CBP-TM-ICON-VIDEOS: до {Content: "/e00e";} .CBP-TM-ICON-PICTURES: до {Content: "/e00f";} .CBP-TM-ICON-LINK: до {Content: "/E010";} .CBP-TM-ICON-REFRESH: До {Content: "/E011 .CBP-TM-ICON-HELP: до {Content: "/e012";}/ * СМИ Запросы */@СМИ СМИ и (макс-ширина: 55.6875EM) {.cbp-tm-menu {font-size: 80%; }} @Media Screen и (Max-Height: 25.25em), экран и (max-width: 44.3125em) {.cbp-tm-menu {font-size: 100%; позиция: относительно; Текст-альбом: Центр; Заполнение: 0; Верх: Авто; } .cbp-tm-menu> li {display: block; поля: 0; Пограничный подъем: 4PX SOLID #3793CA; } .cbp-tm-menu> li: первый ребенок {border-top: 4px solid #3793ca; } li.cbp-tm-show> a, .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: active {color: #fff; Фон: #02639d; } .cbp-tm-submenu {position: относительно; дисплей: нет; Ширина: 100%; } .cbp-tm-submenu> li {padding: 0; / граница: нет; Пограничный подклад: 2PX SOLID #6FBBE9; } .cbp-tm-submenu: после {display: none; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display: block; Ширина: 100%; слева: 0; поля: 0; Заполнение: 0; Внизу: Авто; Верх: Авто; }}код JavaScript
/** * cbptooltipmenu.js v1.0.0 * http://www.codrops.com * * Лицензирован по лицензии MIT. * http://www.opensource.org/licenses/mit-license.php * * copyright 2013, codrops * http://www.codrops.com */; (function (window) {'strict'; var document = window.document, docelem = documentelem B.hasasownproperty (Key)) {a [key] = b [Key]; Inner; (e.type! = 'Mouseout' && e.type! CBPTOOLTIPMENU (EL, опции) {this.el = el; Modernizr.touch; ); }}); }}); }, _openmenu: function (el) {var self = this; ClearTimeOut (this.omTimeOut); this.omtimeout = settimeout (function () {var sumnu = el.queryselector ('ul.cbp-tm-submen el.classname += 'cbp-tm-show-below'; }, _closemenu: function (el) {cleartimeout (this.omtimeout); var Sumenu = el.queryselector ('ul.cbp-tm-submenu'); if (sumenu) {// основан на https://github.com/desandro/classie/blob/master/classie.js el.classname = el.classname.replace (new Regexp ("(^| // s +)" + "cbp-tm-show" + "(// s + | $)"), '); el.classname = el.classname.replace (new Regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.classname = el.classname.replace (new Regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.classname = el.classname.replace (new Regexp ("(^| // s +)" + "cbp-tm-show-above" + "(// s + | $)"), ''); }}, _handleclick: function (el, ev) {var item = el.parentnode, items = array.prototype.slice.call (this.menuitems), sumen {this._closemenu (this.el.children [this.current]); this.el.children [this.current] .queryselector ('ul.cbp-tm-submenu') .setattribute ('data-open', 'false'); } if (submenu) {ev.preventdefault (); var isopen = submenu.getattribute ('data-open'); if (isopen === 'true') {this._closemenu (item); Submenu.setattribute ('Data-Open', 'false'); } else {this._openmenu (item); this.current = items.indexof (item); Submenu.setattribute ('Data-Open', 'true'); }}}, _positionMenu: function (el) {// Проверка, где больше места осталось в точке зрения: выше или под элементом var vh = getViewporth (), ot = getOffset (el), spaceUp = ot.top, specamed = vh - spaceUp - el.oftsetheetheate; вернуть (растяжение города <= SpaceUp? 'Top': 'Bottom'); }} // Добавить в глобальное пространство имен window.cbptooltipmenu = cbptooltipmenu; }) (окно);Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.