Este é um menu relativamente simples e prático, e o mais importante é que ele não precisa fazer referência à biblioteca jQuery. O menu pode ser adaptável na direção vertical. Quando o menu principal estiver próximo à parte superior, o submenu estará abaixo e, quando o menu principal estiver próximo da parte inferior, o submenu estará acima. Usando a função de detecção de toque da Modernizr, podemos fazer a resposta do submenu pairar no PC e clicar no dispositivo de toque. O exemplo também demonstra como ajustar o layout com uma largura relativamente estreita.
Código HTML
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> veggie feito </a> <ul> <li> <a href = "#"> sorrel </a> </li> <li> <li> <a href = "#"> plum salsify </a> </li> <li> <a href = "#"> bok choy CeltuCe </a> </li> <li> <a href = "#"#"> endive </a> <li> <li> <a href ="#"> amargo" alface </a> </li> </li> </li> <li> <a href = "#"> pimenta tatsoi </a> <ul> <li> <a href = "#"> bruxelas couve </a> </li> <li> <a hre = "#"> kakadu lemon </aa> Verde </a> </li> <li> <a href = "#"> frutas de vinho </a> </li> <li> <a href = "#"> alho hortelã </a> </li> <li> <a href = "#"> abrilnisnish </a> </li> <a <a href = "#"> zucchini unnish </a> </li> <a <a href = "#"> abrejinni </a> <li> <a href = "#"> melão doce </a> <ul> <li> <a href = "#"> deserto de azeda </a> </li> <li> <a href = "#"> raisin kakadu </a> </li> <li> <a href = ">"> plumk sals </a> Choy Celtuce </a> </li> <li> <a href = "#"> ceion endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li> </li> </ul>
Código CSS
/ * IconFont feito com icomoon.com */@font-face {Font-Family: 'cbp-tmicons'; src: url ('../ fontes/tmicons/cbp-tmicons.eot'); src: url ('../ fonts/tmicons/cbp-tmicons.eot? #iefix') formato ('incorporado-opentype'), url ('../ fonts/tmicons/cbp-tmicons.woff') formato ('woff), url (' ../ lidas formato ('TrueType'), url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') formato ('svg'); peso-fonte: normal; Fonte no estilo: normal;} /* Redefinir estilo de lista* /. cbp-tm-menu, .cbp-tm-menu ul {estilo list: nenhum;} /* definir o menu Posição; mude aqui para definir para relativamente ou flutuar, etc. */. CBP-TM-Menu {Display: Block; Posição: Absoluto; Z-Index: 1000; Inferior: 0; largura: 100%; Antecedentes: #47A3DA; Alinhamento de texto: à direita; preenchimento: 0 2em; margem: 0; TRANSFORMA DE TEXTO: Capitalize;} / * itens de menu de primeiro nível * /. CBP-TM-MENU> LI {Display: Inline-Block; margem: 0 2.6em; Posição: relativa;} .cbp-tm-menu> li> a {altura de linha: 4em; preenchimento: 0 0.3em; tamanho de fonte: 1.2em; exibição: bloco; Cor: #fff;} .no-touch .cbp-tm-menu> li> a: mouse, .no-touch .cbp-tm-menu> li> a: ativo {color: #02639d;} / * sumbenu com transições * /. exibição: bloco; Visibilidade: escondida; opacidade: 0; preenchimento: 0; Alinhamento de texto: esquerda; Ponteiro-eventos: nenhum; -Webkit-transição: visibilidade 0s, opacidade 0s; -moz-transição: visibilidade 0s, opacidade 0s; Transição: visibilidade 0s, opacidade 0s;} .cbp-tm-show .cbp-tm-submenu {width: 16em; Esquerda: 50%; margem: 0 0 0 -8em; opacidade: 1; visibilidade: visível; Ponteiro-eventos: Auto; -Webkit-transição: visibilidade 0s, opacidade 0,3s; -moz-transição: visibilidade 0s, opacidade 0,3s; Transição: visibilidade 0s, opacidade 0,3s;} .cbp-tm-show-above .cbp-tm-submenu {inferior: 100%; Botting-Bottom: 10px;} .CBP-TM-SHOW-BELOW .CBP-TM-SUBMENU {TOP: 100%; Top-top: 10px;} / * Casos extremos: não há espaço suficiente nas laterais * /. cbp-tm-nospace-right .cbp-tm-submenu {direita: 0; Esquerda: auto;} .cbp-tm-nospace-left .cbp-tm-submenu {esquerda: 0;} /*Último item de menu deve caber na tela* /. cbp-tm-menu> li: last-filho .cbp-tm-submenu {wos: 0;} /*Arrow: dependendo de onde o menu, o menu que o menu será o Menu do Menu do Menno, o Menu do Menno: 0; .cbp-tm-submenu: após {borda: transparente sólido; contente: " "; altura: 0; largura: 0; Posição: Absoluto; Pointer-Events: Nenhum;} .CBP-TM-SHOW-ABOVE .CBP-TM-SUBMENU: APÓS {TOP: 100%; Margin-top: -10px;} .cbp-tm-show-below .cbp-tm-submenu: depois {inferior: 100%; Margin-Bottom: -10px;} .cbp-tm-submenu: após {border-color: transparent; largura de fronteira: 16px; margem -esquerda: -16px; Esquerda: 50%;} .CBP-TM-SHOW-ABOVE .CBP-TM-SUBMENU: APÓS {Border-top-Color: #FFF;} .CBP-TM-SHOW-Below .CBP-TM-Submenu: After {Border-Bottom-Color: #fff;}. Antecedentes: #fff;} .cbp-tm-submenu> li> a {preenchimento: 5px 2.3em 5px 0.6em; / * Papdings superior/inferior em 'em' 'causam um minúsculo "salto" no Chrome On Win */Display: Block; tamanho de fonte: 1.2em; Posição: relativa; Cor: #47A3DA; Fronteira: 4px sólido #fff; -Webkit-transição: todos os 0.2s; -moz-transição: todos os 0.2s; Transição: todos 0.2s;} .no-touch .cbp-tm-submenu> li> a: mouse, .no-touch .cbp-tm-submenu> li> a: ativo {color: #fff; Antecedentes: #47A3DA;} / * Os ícones (ícones do menu de nível principal e ícones de sub-nível) * /. CBP-TM-SUBMENU LI A: Antes, .CBP-TM-Menu> Li> A: Antes da {Font-Family: 'CBP-tmicons'; falar: nenhum; estilo de fonte: normal; peso-fonte: normal; Fonte-variante: Normal; transformação de texto: nenhum; altura de linha: 1; Alinhamento vertical: meio; Margem-direita: 0.6em; -Webkit-font-smanding: AntialiasEd;} .CBP-TM-Submenu li a: antes {posição: absoluto; TOP: 50%; margin -top: -0.5em; à direita: 0.5em;} .cbp-tm-menu> li> a: não (: apenas filho): antes {content: "/f0c9"; tamanho de fonte: 60%; opacidade: 0.3;} .cbp-tm-icon-archive: antes {content: "/e002";} .cbp-tm-icon-COG: antes {content: "/e003";} .cbp-tm-icon-users: antes {content: "/e004";}. .cbp-tm-icon-Location: antes {content: "/e006";} .cbp-tm-icon-mobile: antes {content: "/e007";} .cbp-tm-icon-screen: antes {content: "/e008;} .cbp-tm-icon-mail: {content:" .cbp-tm-icon-contratra: antes {content: "/e00a";} .cbp-tm-icon-lápis: antes de {content: "/e00b";} .cbp-tm-icon-article: antes {content: "/e00c";} .cbp-tm-icon-cock: {content: {content: "/e00c";} .cbp-tm-ice-clock: antes {content: {content: "/e00c";} .cbp-tm-ice-encobert: {content: " .cbp-tm-icon-videos: antes de {content: "/e00e";} .cbp-tm-icon-picture: antes {content: "/e00f";} .cbp-tm-icon-link: antes {content: "e010";} .cbp-tm-icon-link: antes {content: "/e010";}. .cbp-tm-icon-help: antes de {content: "/e012";}/ * consultas de mídia */@tela de mídia e (max-width: 55.6875em) {.cbp-tm-menu {font-size: 80%; }} Screen @media e (Max-Hight: 25.25em), tela e (Max-Width: 44.3125em) {.cbp-tm-menu {font-size: 100%; Posição: relativa; Alinhamento de texto: centro; preenchimento: 0; TOP: AUTO; } .cbp-tm-menu> li {display: block; margem: 0; Bottom de fronteira: 4px Solid #3793CA; } .cbp-tm-menu> li: primeiro filho {border-top: 4px Solid #3793CA; } li.cbp-tm-show> a, .no-touch .cbp-tm-menu> li> a: mouse, .no-touch .cbp-tm-menu> li> a: ativo {color: #fff; Antecedentes: #02639D; } .cbp-tm-submenu {Position: parente; Exibir: Nenhum; largura: 100%; } .cbp-tm-submenu> li {preenchimento: 0; } .cbp-tm-submenu> li> a {preenchimento: 0.6em 2.3em 0.6em 0.6em; fronteira: nenhuma; Bottom de fronteira: 2px Solid #6FBBE9; } .cbp-tm-submenu: após {display: nenhum; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display: block; largura: 100%; Esquerda: 0; margem: 0; preenchimento: 0; Inferior: automático; TOP: AUTO; }}Código JavaScript
/** * cbptooltipmenu.js v1.0.0 * http://www.codrops.com * * licenciado sob a licença do MIT. * http://www.opensource.org/license/mit-license.php * * Copyright 2013, codrops * http://www.codrops.com */; (function (window) {'use strict'; var document = window.document, docelem = document) {'use'; var. if (B.HasownProperty (chave) {a [key] = b [key]; interno; (E.Type! cbptooltipmenu (el, opções) {this.el = el; this.menuitems = documental.QuerySelectorAll ('#' + this.el.id + '> li'); ) {trigger.addeventListener ('clique', function (ev) {self._handleclick (this, eV);}); El.AddeventListener ('MouseOver', função (eV) {if (isMouseleaveRenter (EV, this)) self._openmenu (this);}); ); }, _openmenu: function (el) {var self = this; ClearTimeout (this.omtimeout); this.omTimeout = setTimeout (function () {var submenu = el.QuerySelector ('ul.cbp-tm-submenu'); if (submenu) {el.className = 'cbp-tm-show'; if (self._positionmenu (e el) == 'top') {.cl. el.className += 'CBP-TM-SHOW-BELOW'; }, _closemenu: function (el) {cleartimeout (this.omtimeout); var submenu = el.QuerySelector ('ul.cbp-tm-submenu'); if (submenu) {// baseado em https://github.com/desandro/classie/blob/master/classie.js el.classname = el.classname.replace (new regexp ("(^|/s +)" + "cbp-tm) el.className = el.classname.replace (novo regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.className = el.classname.replace (novo regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.className = el.classname.replace (novo regexp ("(^| // s +)" + "cbp-tm-show-above" + "(// s + | $)"), ''); } }, _handleClick : function( el, ev ) { var item = el.parentNode, items = Array.prototype.slice.call( this.menuItems ), submenu = item.querySelector( 'ul.cbp-tm-submenu' ) // first close any opened one.. if( this.current && items.indexOf( item ) !== this.current ) {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-aberto'); if (isopen === 'true') {this._closemenu (item); submenu.setAttribute ('Data-aberto', 'false'); } else {this._openmenu (item); this.current = items.IndexOf (item); submenu.setAttribute ('Data-open', 'true'); }}}, _PositionMenu: function (el) {// Verificando onde há mais espaço deixado na viewport: acima ou abaixo do elemento var vh = getViewPorth (), OT = getOffset (el), spaceup = ot.top, spacewn = vh - SpaceUp - eL.OffSethEstet; return (Spacewn <= SpaceUp? 'top': 'Bottom'); }} // Adicione ao namespace global window.cbptooltipmenu = cbptooltipmenu; } )( janela );O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.