Il s'agit d'un menu relativement simple et pratique, et le plus important est qu'il n'a pas besoin de référencer la bibliothèque jQuery. Le menu peut être adaptable dans la direction verticale. Lorsque le menu principal est proche du haut, le sous-menu sera ci-dessous et lorsque le menu principal est proche du bas, le sous-menu est au-dessus. En utilisant la fonction de détection tactile de Modernizr, nous pouvons faire la réponse du survol du sous-menu sur le PC et cliquer sur l'appareil tactile. L'exemple montre également comment ajuster la disposition avec une largeur relativement étroite.
code html
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Veggie Made </a> <ul> <li> <a href = "#"> Sorrel Desert </a> </li> <li> <a href = "#"> Raisin kakadu <li> <a href = "#"> Plum Salsify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> oignon endive </a> </li> <li> <a href = "#"> amerlea </a> laitue </a> </li> </li> </li> <li> <a href = "#"> Pepper tatsoi </a> <ul> <li> <a href = "#"> Brussels Sprout </a> </li> <li> <a href = "#"> Kakadu </a> </li> <li> Vert </a> </li> <li> <a href = "#"> Fruit à vin </a> </li> <li> <a href = "#"> Mint à l'ail </a> </li> <li> <a href = "#"> Garnish zucchini </a> </li> <li> <a href = "#"> Sea Lettuce </a> <li> <a href = "#"> melon doux </a> <ul> <li> <a href = "#"> désert de Sorrel </a> </li> <li> <a href = "#"> Raisin kakadu </a> </li> <li> <a href = "#"> bok </a> </li> <li> Choy Celtuce </a> </li> <li> <a href = "#"> ENVIDE ONION </a> </li> <li> <a href = "#"> Bitterleaf </a> </li> </li> </ul>
Code CSS
/ * Iconfont fabriqué avec iComoon.com * / @ font-face {font-family: 'cbp-tmicons'; src: url ('../ polices / tmicons / cbp-tmicons.eot'); src: url ('../ fonts / tmicons / cbp-tmicons.eot? #iefix') format ('embedded-opentype'), url ('../ fontts / tmicons / cbp-tmicons.woff') format ('woff'), url ('.. les fonte / tmicons / cbp-tmicons.tff. format ('trueType'), URL ('../ Fonts / tmicons / cbp-tmicons.svg # cbp-tmicons') format ('svg'); Police-poids: normal; Style de police: normal;} / * réinitialiser le style de liste * /. CBP-TM-MENU, .CBP-TM-MENU UL {list-style: Aucun;} / * set Menu Position; Changez ici pour définir sur relatif ou flotter, etc. * /. CBP-TM-MENU {affichage: bloc; Position: absolue; Z-Index: 1000; en bas: 0; Largeur: 100%; Contexte: # 47A3DA; Texte-aligne: à droite; rembourrage: 0 2em; marge: 0; Text-transform: capitaliser;} / * Éléments de menu de premier niveau * /. CBP-TM-MENU> LI {affichage: Block en ligne; marge: 0 2.6em; Position: relative;} .cbp-tm-menu> li> a {line-height: 4em; rembourrage: 0 0.3em; taille de police: 1.2EM; Affichage: bloc; Couleur: #fff;} .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: active {couleur: # 02639d;} / * sumbenu avec transitions * /. cbp-tm-subMenu {position: absolue; Affichage: bloc; Visibilité: cachée; Opacité: 0; rembourrage: 0; Texte-aligne: gauche; Pointer-Events: Aucun; -Webkit-Transition: Visibility 0s, Opacity 0s; -moz-transition: visibilité 0s, opacité 0s; transition: visibilité 0s, opacité 0s;} .cbp-tm-show .cbp-tm-submenu {width: 16em; Gauche: 50%; marge: 0 0 0 -8em; Opacité: 1; Visibilité: visible; Pointer-Events: Auto; -Webkit-transition: visibilité 0s, opacité 0.3S; -Moz-transition: visibilité 0s, opacité 0.3S; Transition: visibilité 0s, opacité 0.3s;} .cbp-tm-show-above .cbp-tm-submenu {bottom: 100%; Padding-Bottom: 10px;} .cbp-tm-show-below .cbp-tm-submenu {top: 100%; padding-top: 10px;} / * Cas extrêmes: pas assez d'espace sur les côtés * /. CBP-TM-Nospace-droite .cbp-tm-subMenu {droite: 0; gauche: auto;} .cbp-tm-nospace-left .cbp-tm-subMenu {gauche: 0;} / * Le dernier menu L'élément doit s'adapter à l'écran * /. CBP-TM-MENU> LI: Last-Child .Cbp-Tm-SubMenu {Right: 0;} / * Arrow: Dépendant où le menu sera montré, nous avons mis en place la position droite pour la position * / .cbp-tm-subMenu: après {bordure: transparent solide; contenu: " "; hauteur: 0; Largeur: 0; Position: absolue; Pointer-Events: Aucun;} .cbp-tm-show-above .cbp-tm-submenu: après {top: 100%; marge-top: -10px;} .cbp-tm-show-below .cbp-tm-submenu: après {en bas: 100%; marge-fond: -10px;} .cbp-tm-submenu: après {border-color: transparent; largeur frontalière: 16px; marge-gauche: -16px; Left: 50%;} .cbp-tm-show-above .cbp-tm-subMenu: après {border-top-color: #fff;} .cbp-tm-show-below .cbp-tm-sub-tm-subMenu> li {affiche: #fff;} .cbp-tm-subMenu> li {affiche: block; Contexte: #fff;} .cbp-tm-submenu> li> a {padding: 5px 2.3em 5px 0.6em; / * Top / Bottom Paddings in 'Em' Cause un minuscule "saut" dans Chrome sur Win * / Display: Block; taille de police: 1.2EM; Position: relative; Couleur: # 47A3DA; Border: 4px solide #fff; -Webkit-Transition: Tous 0,2 s; -Moz-transition: tous 0,2 s; transition: tous 0,2s;} .no-touch .cbp-tm-submenu> li> a: hover, .no-touch .cbp-tm-submenu> li> a: active {colore: #fff; Contexte: # 47A3DA;} / * Les icônes (icônes de menu de niveau principal et icônes de sous-niveau) * /. CBP-TM-subMenu li a: avant, .cbp-tm-menu> li> a: avant {Font-Family: 'cbp-tmicons'; parler: aucun; Style de police: normal; Police-poids: normal; Font-Variant: Normal; Text-transform: aucun; hauteur de ligne: 1; Adigne vertical: milieu; marge droite: 0,6EM; -Webkit-Font-Soothing: AntialilaSed;} .cbp-tm-submenu li a: avant {position: absolue; en haut: 50%; marge: -0,5em; Droite: 0.5em;} .cbp-tm-menu> li> a: pas (: only-child): avant {contenu: "/ f0c9"; taille de police: 60%; Opacité: 0.3;} .cbp-tm-icon-archive: avant {contenu: "/ e002";} .cbp-tm-icon-cog: avant {contenu: "/ e003";} .cbp-tm-icon-users: avant {contenu: "/ e004";}. .cbp-tm-icon-location: avant {contenu: "/ e006";} .cbp-tm-icon-mobile: avant {contenu: "/ e007";} .cbp-tm-icon-screen: avant {contenu: "/ e008";} .cbp-tm-icon-Mail: avant {contenu: "/ e009";}; .cbp-tm-icon-contrat: avant {contenu: "/ e00a";} .cbp-tm-icon-pocil: avant {contenu: "/ e00b";} .cbp-tm-icon-article: avant {contenu: "/ e00c";} .cbp-tm-iconlock: avant {contenu: "/ e00d";}; .cbp-tm-icon-videos: avant {contenu: "/ e00e";} .cbp-tm-icon-pictures: avant {contenu: "/ e00f";} .cbp-tm-icon-link: avant {contenu: "/ e010";} .cbp-tm-icon-réfresh: avant {contenu: "/ e011"; .cbp-tm-icon-help: avant {contenu: "/ e012";} / * requêtes multimédias * / @ screp et (max-width: 55.6875em) {.cbp-tm-menu {Font-size: 80%; }} @media Screen and (max-height: 25.25em), écran et (max-width: 44.3125em) {.cbp-tm-menu {font-size: 100%; Position: relative; Texte-aligne: Centre; rembourrage: 0; Top: Auto; } .cbp-tm-menu> li {display: block; marge: 0; Border-Bottom: 4px solide # 3793CA; } .cbp-tm-menu> li: premier-enfant {border-top: 4px solide # 3793ca; } li.cbp-tm-show> a, .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: active {couleur: #fff; Contexte: # 02639d; } .cbp-tm-subMenu {position: relative; Affichage: aucun; Largeur: 100%; } .cbp-tm-subMenu> li {padding: 0; } .cbp-tm-submenu> li> a {padding: 0.6em 2.3em 0.6em 0.6em; Border: aucun; Border-Bottom: 2px solide # 6FBBE9; } .cbp-tm-subMenu: après {affichage: aucun; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {affiche: bloc; Largeur: 100%; à gauche: 0; marge: 0; rembourrage: 0; En bas: automatique; Top: Auto; }}code javascript
/ ** * cbptooltipmenu.js v1.0.0 * http://www.codrops.com * * sous licence MIT. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, codrops * http://www.codrops.com * /; (function (window) {'use strict'; var document = window.Document, Doculem = document.DocumentElement; function prolonge B.HasownProperty (Key)) {A [Key] = B [Key]; Client; 'Mouseout' && e.type! = 'Mouseover') False; El, options) {this.el = el; Document.QuerySelector ('#' + this.el.id + '> li'); Trigger.AddeventListener ('click', fonction (ev) {self._handleclick (this, ev);});} else {Trigger.addeventListener ('clique El.AddeventListener ('MouseOver', fonction (ev) {if (IsmouseEaveAnter (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 (el) === 'top') {el.classname + = 'cbp-tm-show-bow-above') {el.classname + = ' el.classname + = 'cbp-tm-show-below';}}}, this.touch? }, _closeMenu: function (el) {cleartimeout (this.omtimeout); var subMenu = el.QuerySelector ('ul.cbp-tm-submenu'); if (subménu) {// basé sur 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.menutems), submenu = item.queryselect ) {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-ou ouvert», «false»); } else {this._openMenu (item); this.current = items.indexof (item); submenu.setAttribute («data-ou ouvert», «true»); }}}, _PositionMenu: fonction (el) {// Vérification où est plus d'espace dans la fenêtre: au-dessus ou en dessous de l'élément var vh = getViewporth (), ot = getoffset (el), spaceup = ot.top, Spacedown = vh - SpaceUp - el.offsetheight; return (Spacedown <= SpaceUp? 'TOP': «en bas»); }} // Ajouter à Global Namespace Window.cbptoolTipMenu = cbptoolTipMenu; } )( fenêtre );Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.