Este es un menú relativamente simple y práctico, y lo más importante es que no necesita hacer referencia a la biblioteca jQuery. El menú puede ser adaptable en la dirección vertical. Cuando el menú principal está cerca de la parte superior, el submenú estará a continuación, y cuando el menú principal esté cerca de la parte inferior, el submenú está arriba. Usando la función de detección táctil de Modernizr, podemos dar la respuesta del submenú desplazada en la PC y hacer clic en el dispositivo táctil. El ejemplo también demuestra cómo ajustar el diseño con un ancho relativamente estrecho.
código HTML
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> vegetal hecho </a> <ul> <li> <a href = "#"> Sorrel desert </a> </li> <li> <a href = "#"> raisin kakadu </ae> <li> <a href = "#"> Plum salsify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> onion endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li> <a href Lettuce </a> </li> </li> </li> <li> <li> <a href = "#"> Pepper tatsoi </a> <ul> <li> <a href = "#"> green</a></li> <li><a href="#">Wine fruit</a></li> <li><a href="#">Garlic mint</a></li> <li><a href="#">Zucchini garnish</a></li> <li><a href="#">Sea lettuce</a></li> </ul> </li> <li> <a href = "#"> Sweet Melon </a> <ul> <li> <a href = "#"> Sorrel Desert </a> </li> <li> <a href = "#"> raisin kakadu </a> </li> <li> <a href = "#"> salsify </a> </li> <a href Choy Celtuce </a> </li> <li> <a href = "#"> cebolla endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li> </li> </ul>
código CSS
/ * Iconfont hecho con icomoon.com */@font-face {font-familia: 'cbp-tmicons'; src: url ('../ fonts/tmicons/cbp-tmicons.eot'); src: url ('../ fonts/tmicons/cbp-tmicons.eot? #iefix') format ('incredded-opentype'), url ('../ fonts/tmicons/cbp-tmicons.woff') format ('woff'), url ('../ fonts/tmicons/cbp-tmicons.ttf') format ('trueType'), url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') format ('svg'); Font-peso: Normal; estilo fuente: normal;} /* Restablecer estilo de lista* /. CBP-TM-MENU, .CBP-TM-MENU ul {list-style: none;} /* establecer la posición del menú; Cambie aquí para configurar en relativo o flotación, etc. */. CBP-TM-MENU {Display: Block; Posición: Absoluto; Índice Z: 1000; Abajo: 0; Ancho: 100%; Antecedentes: #47A3DA; Text-Align: Right; relleno: 0 2em; margen: 0; text-transform: capitalizar;} / * elementos del menú de primer nivel * /. cbp-tm-Menu> li {display: inline-block; margen: 0 2.6em; posición: relativo;} .cbp-tm-Menu> li> a {línea-height: 4em; relleno: 0 0.3em; tamaño de fuente: 1.2em; Pantalla: bloque; color: #fff;} .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: activo {color: #02639d;} / * Sumbenu con transiciones * /. Cbp-tm-submenu {posición: absoluto; Pantalla: bloque; Visibilidad: oculto; Opacidad: 0; relleno: 0; text-align: izquierda; Pointer-Events: Ninguno; -Webkit-transición: visibilidad 0s, opacidad 0s; -Moz-Transition: visibilidad 0s, opacidad 0s; transición: visibilidad 0s, opacidad 0s;} .cbp-tm-show .cbp-tm-submenu {ancho: 16em; Izquierda: 50%; margen: 0 0 0 -8em; Opacidad: 1; Visibilidad: visible; Pointer-Events: Auto; -Webkit-transición: visibilidad 0s, opacidad 0.3s; -Moz-transición: visibilidad 0s, opacidad 0.3s; Transición: Visibilidad 0s, Opacidad 0.3S;} .CBP-TM-Show-Above .CBP-TM-Submenu {Bottom: 100%; Bottom: 10px;} .cbp-tm-show-below .cbp-tm-submenu {top: 100%; Padding-top: 10px;} / * Casos extremos: no hay suficiente espacio en los lados * /. CBP-TM-Vospace-Right .CBP-TM-Submenu {Right: 0; left: auto;} .cbp-tm-nospace-left .cbp-tm-submenu { left: 0;} /* last menu item has to fit on the screen */.cbp-tm-menu > li:last-child .cbp-tm-submenu { right: 0;} /*arrow: depending on where the menu will be shown, we setthe right position for the arrow*/ .cbp-tm-submenu: después de {borde: sólido transparente; contenido: " "; Altura: 0; Ancho: 0; Posición: Absoluto; Pointer-Events: Ninguno;} .cbp-tm-show-love .cbp-tm-submenu: después {top: 100%; margen-top: -10px;} .cbp-tm-show-below .cbp-tm-submenu: después {fondo: 100%; margen-bottom: -10px;} .cbp-tm-submenu: después de {border-color: transparent; ancho de la frontera: 16px; margen -izquierda: -16px; Izquierda: 50%;} .cbp-tm-show-love .cbp-tm-submenu: después de {border-top-color: #fff;} .cbp-tm-show-below .cbp-tm-submenu: después de {border-bottom-color: #fff;} .cbp-tm-submenu> li {exhibición: block; Antecedentes: #fff;} .cbp-tm-submenu> li> a {relleno: 5px 2.3em 5px 0.6em; / * Rodos superior/inferior en 'em' causa un pequeño "salto" en Chrome en win */display: block; tamaño de fuente: 1.2em; Posición: relativo; Color: #47A3DA; borde: 4px sólido #fff; -WebKit-Transition: todos 0.2s; -Moz-Transition: todos 0.2s; Transición: todos 0.2s;} .no-touch .cbp-tm-submenu> li> a: hover, .no-touch .cbp-tm-submenu> li> a: activo {color: #fff; Antecedentes: #47A3DA;} / * Los iconos (icono de menú de nivel principal e iconos de subblovel) * /. CBP-TM-Submenu Li A: antes, .cbp-tm-Menu> li> a: antes {Font-Family: 'CBP-TMicons'; hablar: ninguno; estilo de fuente: normal; Font-peso: Normal; Font-Variant: Normal; Texto-transformación: ninguno; Línea de altura: 1; Align vertical: medio; margen-derecha: 0.6em; -webkit-font-smoothing: antialiased;} .cbp-tm-sumenu li a: antes {posición: absoluto; arriba: 50%; margen -top: -0.5em; Derecha: 0.5em;} .cbp-tm-Menu> li> a: no (: solo-child): antes {content: "/f0c9"; tamaño de fuente: 60%; opacidad: 0.3;} .cbp-tm-icon-archive: antes {content: "/e002";} .cbp-tm-icon-cog: antes {content: "/e003";} .cbp-tm-icon-users: antes de {content: "/e004";} .cbp-tm-icon-eate: antes {contenido/";"; "; .cbp-tm-icon-ubation: antes {contenido: "/e006";} .cbp-tm-icon-mobile: antes {content: "/e007";} .cbp-tm-icon-screen: antes {content: "/e008";} .cbp-tm-icon-mail: antes de {content: "/e009";};}; .cbp-tm-icon-Contract: antes {contenido: "/e00a";} .cbp-tm-icon-lit: antes de {content: "/e00b";} .cbp-tm-icon-artice: antes {content: "/e00c";} .cbp-tm-icon-clock: antes {content: "/e00d";};} .cbp-tm-icon-videos: antes {contenido: "/e00e";} .cbp-tm-icon-pictures: antes {content: "/e00f";} .cbp-tm-icon-link: antes {content: "/e010";} .cbp-tm-icon-refresh: antes {content: "/e011"; .cbp-tm-icon-help: antes {contenido: "/e012";}/ * consultas de medios */@pantalla de medios y (width max: 55.6875em) {.cbp-tm-menu {font-size: 80%; }} @Media Screen y (Max-Height: 25.25em), pantalla y (max-width: 44.3125em) {.cbp-tm-Menu {font-size: 100%; Posición: relativo; Text-Align: Center; relleno: 0; arriba: auto; } .cbp-tm-Menu> li {display: block; margen: 0; Border-Bottom: 4px Solid #3793CA; } .CBP-TM-MENU> Li: First-Child {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: activo {color: #fff; Antecedentes: #02639D; } .cbp-tm-sbenu {posición: relativo; Pantalla: ninguno; Ancho: 100%; } .cbp-tm-submenu> li {relleno: 0; } .cbp-tm-submenu> li> a {relleno: 0.6em 2.3em 0.6em 0.6em; borde: ninguno; Border-Bottom: 2px Solid #6FBBE9; } .cbp-tm-submenu: después de {display: none; } .CBP-TM-MENU .CBP-TM-SHOW .CBP-TM-Submenu {display: block; Ancho: 100%; Izquierda: 0; margen: 0; relleno: 0; Abajo: auto; arriba: auto; }}Código JavaScript
/** * CBPTOOLTIPMENU.JS V1.0.0 * http://www.codrops.com * * con licencia bajo la licencia MIT. * http://www.opensource.org/licenses/mit-license.php * * copyright 2013, codrops * http://www.codrops.com */; (function (window) {'use strict'; var document.document, doceLem = document.document; function extend (a, b) B.HasownProperty (Key)) {A [Key] = B [Key]; Inner; (E.Type! = 'Mouseout' && CBPTOOLTIPMENU (EL, OPTIONS) {this.el = el; this.Menuitems = document.QuerySelectorAll ('#' + this.el.id + '> li'); Self.Touch) {Trigger.AdDeventListener ('click', function (ev) {self._handleclick (this, ev);}); }); ); }, _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 (el) === 'top') {el.classname += 'cbp-tm-s-show-above'; el.classname += 'cbp-tm-show-below'; }, _Closemenu: function (el) {ClearTimeOut (this.omTimeOut); var submenu = el.Queryselector ('ul.cbp-tm-submenu'); if (submenu) {// basado en 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-love" + "(// s + | $)"), ''); }}, _handleclick: function (el, ev) {var item = el.ParentNode, items = array.prototype.slice.call (this.menuitems), submenu = item.QuerySelector ('ul.cbp-tm-submenu') {this._closemenu (this.el.children [this.current]); this.el.children [this. } if (submenu) {ev.preventDefault (); var isopen = submenu.getAttribute ('data-open'); if (isopen === 'verdadero') {this._closemenu (item); submenu.setAttribute ('data-open', 'falso'); } else {this._openmenu (item); this.current = items.indexof (item); submenu.setAttribute ('data-open', 'verdadero'); }}}, _PositionMenu: function (el) {// Comprobación de dónde queda más espacio en la ventana gráfica: arriba o debajo del elemento var vh = getViewPorth (), ot = getoffset (el), spaceUp = ot.top, sprotewn = vh - spaceUp - el.offsethightight; return (Spacdown <= SpaceUp? 'Top': 'Bottom'); }} // Agregar a la ventana del espacio de nombres global.cbptooltipmenu = cbptooltipmenu; } )( ventana );Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.