Dies ist ein relativ einfaches und praktisches Menü, und das Wichtigste ist, dass es nicht auf die Jquery -Bibliothek verweisen muss. Das Menü kann in vertikaler Richtung anpassbar sein. Wenn sich das Hauptmenü oben am oberen Rand befindet, befindet sich das Untermenü unten, und wenn das Hauptmenü in der Nähe von unten liegt, befindet sich das Untermenü oben. Mithilfe der Berührungserkennungsfunktion von Modernizr können wir die Reaktion des Untermenüs auf dem PC durchführen und auf das Touch -Gerät klicken. Das Beispiel zeigt auch, wie das Layout mit einer relativ schmalen Breite angepasst wird.
HTML -Code
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Gemüse gemacht </a> <ul> <li> <a href = "#"> Sorrel-Wüste </li> <li> <a href = "#"> raisin kakadu </li> <a href = " <li> <a href = "#"> Pflaumensifify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#">#">#">#"#"#"#"#"#"#"#"#"#"#"#"#"#"#">#" Salat </a> </li> </li> </li> <li> <a href = "#"> pepper tatsoi </a> <ul> <li> <a href = "#"> brussels sprout </a> </li> <li> <a href = "#"> kakadu lemon </li> <li> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" ju. grün </a> </li> <li> <a href = "#"> Weinfrucht </a> </li> <li> <a href = "#"> Knoblauchminze </a> </li> <li> <a href = "#"> Zucchini -Garnish </a> </li> <a href = " </li> <li> <a href = "#"> süße Melone </a> <ul> <li> <a href = "#"> Sorrel -Wüste </a> </li> <a href = "#"> Raisin kakadu </a> </li> <li> <a href = "#"#"#"> plum href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> onion endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li> </li> </ul> </ul>
CSS -Code
/ * Iconfont mit icomoon.com */@font-face {font-family: 'cbp-tmicons'; SRC: URL ('../ Schriftarten/tmicons/cbp-tmicons.eot'); src:url('../fonts/tmicons/cbp-tmicons.eot?#iefix') format('embedded-opentype'), url('../fonts/tmicons/cbp-tmicons.woff') format('woff'), url('../fonts/tmicons/cbp-tmicons.ttf') Format ('TrueType'), URL ('../ Schriftarten/tmicons/cbp-tmicons.svg#cbp-tmicons') Format ('SVG'); Schriftgewicht: normal; Schriftstil: Normal;} /* Listenstil zurücksetzen* /. Ändern Sie hier, um auf Relative oder Float usw. einzustellen. */. CBP-TM-Menu {Anzeige: Block; Position: absolut; Z-Index: 1000; unten: 0; Breite: 100%; Hintergrund: #47a3da; Text-Align: Recht; Polsterung: 0 2em; Rand: 0; Text-Transformation: Kapitalisieren;} / * Menüelemente der ersten Ebene * /. CBP-TM-Menu> li {Anzeige: Inline-Block; Rand: 0 2.6em; Position: relativ;} .cbp-tm-menu> li> A {Zeilenhöhe: 4EM; Polsterung: 0 0,3em; Schriftgröße: 1.2EM; Anzeige: Block; Farbe: #fff;} .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: aktiv {color: #02639d;} / * Sumbenu mit Übergängen * /. Anzeige: Block; Sichtbarkeit: versteckt; Deckkraft: 0; Polsterung: 0; Text-Align: links; Zeiger-Events: Keine; -Webkit-Übergang: Sichtbarkeit 0s, Opazität 0s; -moz-Übergang: Sichtbarkeit 0s, Opazität 0s; Übergang: Sichtbarkeit 0s, Opazität 0s;} .cbp-tm-show .cbp-tm-submenu {width: 16em; Links: 50%; Rand: 0 0 0 -8em; Deckkraft: 1; Sichtbarkeit: sichtbar; Zeiger-Events: Auto; -Webkit-Übergang: Sichtbarkeit 0s, Deckkraft 0,3s; -moz-Übergang: Sichtbarkeit 0s, Deckkraft 0,3s; Übergang: Sichtbarkeit 0s, Opazität 0,3s;} .cbp-tm-show-Above .cbp-tm-Submenu {unten: 100%; Padding-Bottom: 10px;} .cbp-tm-show-below .cbp-tm-submenu {top: 100%; Padding-Top: 10px;} / * extreme Fälle: Nicht genügend Platz an den Seiten * /. Links: auto;} .cbp-tm-nospace-left .cbp-tm-submenu {links: 0;} /*Letzter Menüelement muss auf den Bildschirm passen. .cbp-tm-subMenu: nach {Grenze: solide transparent; Inhalt: " "; Höhe: 0; Breite: 0; Position: absolut; Zeiger-Events: Keine;} .cbp-tm-show-Above .cbp-tm-submenu: nach {top: 100%; Margin-Top: -10px;} .cbp-tm-show-below .cbp-tm-submenu: nach {unten: 100%; Rand-Bottom: -10px;} .cbp-tm-submenu: nach {Border-Color: transparent; Grenzbreite: 16px; Rand -Links: -16px; Links: 50%;} .cbp-tm-show-Above .cbp-tm-submenu: After {Border-Top-Color: #fff;} .cbp-tm-show-below .cbp-tm-submenu: After {Border-Bottom-Color: #fff; Hintergrund: #fff;} .cbp-tm-submenu> li> a {padding: 5px 2.3em 5px 0,6em; / * obere/untere Paddings in 'em' verursachen einen winzigen "Sprung" in Chrome on Win */Display: Block; Schriftgröße: 1.2EM; Position: Relativ; Farbe: #47a3da; Grenze: 4px Solid #fff; -Webkit-Übergang: Alle 0,2s; -moz-Übergang: Alle 0,2s; Übergang: Alle 0,2s;} .no-touch .cbp-tm-submenu> li> a: hover, .no-touch .cbp-tm-submenu> li> a: aktiv {color: #fff; Hintergrund: #47a3da;} / * Die Symbole (Hauptmeni der Hauptstufe und Sublelvel-Symbole) * /. Sprechen: Keine; Schriftstil: normal; Schriftgewicht: normal; Schriftvariante: normal; Texttransformierung: Keine; Linienhöhe: 1; vertikaler Align: Mitte; Margin-Right: 0,6EM; -Webkit-font-shoothing: Antialias; Top: 50%; Rand: -0,5em; Rechts: 0.5EM;} .cbp-tm-menu> li> a: nicht (: nur Kind): Vor {Inhalt: "/f0c9"; Schriftgröße: 60%; Opazität: 0.3;} .cbp-tm-icon-archive: vor {content: "/e002";} .cbp-tm-icon-cog: vor {Inhalt: "/e003"; .CBP-TM-ICON-LOKATION: Vor {Inhalt: "/e006";} .cbp-tm-icon-mobile: vor {Inhalt: "/e007";} .cbp-tm-iCon-Screen: Vor {Inhalt: "/e008"; .CBP-TM-ICON-Contract: Vor {Inhalt: "/e00a";} .cbp-tm-icon-pence: vor {Inhalt: "/e00b";} .cbp-tm-icon-artikel: vor {content: "/e00c"; .cbp-tm-icon-videos: vor {content: "/e00e";} .cbp-tm-icon-teure: vor {content: "/e00f";} .cbp-tm-icon-link: vor {content: "/e010"; .cbp-tm-icon-help: vor {content: "/e012";}/ * Medienabfragen */@Media Bildschirm und (max. }} @media Bildschirm und (max-Höhe: 25.25em), Bildschirm und (max-Width: 44.3125EM) {.cbp-tm-Menu {Schriftgröße: 100%; Position: Relativ; Text-Align: Mitte; Polsterung: 0; Top: Auto; } .cbp-tm-menu> li {display: block; Rand: 0; Border-Bottom: 4px Solid #3793ca; } .cbp-tm-menu> li: First-Kind {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: aktiv {color: #fff; Hintergrund: #02639d; } .cbp-tm-submenu {Position: relativ; Anzeige: Keine; Breite: 100%; } .cbp-tm-submenu> li {padding: 0; } .cbp-tm-submenu> li> a {padding: 0,6EM 2,3EM 0,6EM 0,6EM; Grenze: Keine; Border-Bottom: 2PX Solid #6fbbe9; } .cbp-tm-submenu: nach {display: keine; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display: block; Breite: 100%; links: 0; Rand: 0; Polsterung: 0; unten: Auto; Top: Auto; }}JavaScript -Code
/** * cbptooltipMenu.js v1.0.0 * http://www.codrops.com * * lizenziert unter der MIT -Lizenz. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, codrops * http://www.codrops.com */; b.hasownProperty (key)) {a [key] = b [key];}} return a; sonst return client; (E.type! = 'Mausout' && E. cbptooltipMenu (el, option) {this.el = el; this.menuitems = document.querySelectorAll ('#' + this.el.id + '> li'); self.touch) {Trigger.AdDeVentListener ('klick', function (ev) {self.handleclick (this, ev);}); }); }}); }, _openMenu: function (el) {var self = this; Clearimeout (this.omTimeout); this.omtimeout = setTimeout (function () {var submenu = el.querySelector ('ul.cbp-tm-submenu'); if (submenu) {el.classname = 'cbp-tm-show'; {El.ClassName += 'cbp-tm-show-below'; }, _closemenu: function (el) {clearimeout (this.omTimeout); var submenu = el.querySelector ('ul.cbp-tm-submenu'); if (submenu) {// basierend auf https://github.com/Desandro/classie/blob/master/classie.js el.classname = el.classname.replace (new Regexp ("(^| // S +)" + " +"). el.className = el.className.replace (neuer regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.className = el.className.replace (neuer regexp ("(^| // s +)" + "cbp-tm-show-below" + "(// s + | $)"), ''); el.classname = el.className.replace (neuer regexp ("(^| // s +)" + "cbp-tm-show-above" + "(// s + | $)"), ''); }}, _handleclick: function (el, ev) {var item = el.parentnode, items = array.prototype.lice.call (this.menuitems), submenu = item.querySelektor ('ul.cbp-tm-submenu') // Erstmals geöffneter. ) {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 ('datenopen'); 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'); }}}. return (Spaceown <= SpaceUp? 'Top': 'unten'); }} // zum globalen Namespace Window.cbptoolTipMenu = cbptoolTipMenu; } )( Fenster );Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.