Ini adalah menu yang relatif sederhana dan praktis, dan yang paling penting adalah tidak perlu merujuk perpustakaan jQuery. Menu dapat beradaptasi dalam arah vertikal. Ketika menu utama dekat dengan bagian atas, submenu akan berada di bawah, dan ketika menu utama dekat dengan bagian bawah, submenu di atas. Menggunakan fungsi deteksi sentuh Modernizr, kita dapat membuat respons dari submenu melayang di PC dan klik pada perangkat Touch. Contoh ini juga menunjukkan cara menyesuaikan tata letak dengan lebar yang relatif sempit.
Kode HTML
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> sayuran yang dibuat </a> <ul> <li> <a href = "#"> Sorrel </a> </a> <li> <li> <a href = "#"> Sorrel </a> </a> </li> <li> <a href = "#" <li> <a href = "#"> prem salsify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> endive </a> </li> <li> <a href = "#"> Bitter = </a> </li> <li> <a href = "#"> Bitter = Lettuce </a> </li> </li> </li> <li> <a href = "#"> Pepper tatsoi </a> <ul> <li> <a href = "#"> Brussels Sprout </a> </li> <a href = "#"> Kakadu Lemon </a> <li> <a href = "#"> Kakadu Lemon Lemon </a> <li> <a> <a> <a href = "#"> Kakadu Lemon Lemon </a> <li> <a> <a> <a href = "#"> Kakadu Lemon Lemon </a> <li> <a> <a> <a> <a href = "#"> Kakadu Lemon Lemon </a> <li> <a> <a> <a href = "#"> Kakadu Lemon Lemon </a> <a> <a> <a> <a> <a> <a> Hijau </a> </li> <li> <a href = "#"> buah anggur </a> </li> <li> <a href = "#"> Garlic mint </a> </li> <li> <a href = "#"> zucchini garnish </a> </a> </li> <li> <li> <a href = "lia#" lia> </a> </a> </a> </li> <li> <li> <a href = "lia #/a> </a> </a> </li> <li> <li> <a href ="#"LiTE# </li> <li> <a href = "#"> melon manis </a> <ul> <li> <a href = "#"> Sorrel Desert </a> </li> <li> <a href = "#"> Raisin Kakadu </a> </li> <li> <a href = "#"#"#" href = "#"> bok choy Celtuce </a> </li> <li> <a href = "#"> bawang endive </a> </li> <li> <a href = "#"> Bitterleaf </a> </li> </li> </ul>
Kode CSS
/ * Iconfont dibuat dengan icomoon.com */@font-face {font-family: 'cbp-tmicons'; src: url ('../ font/tmicons/cbp-tmicons.eot'); src: url ('../ fonts/tmicons/cbp-tmicons.eot? #iefix') format ('embedded-opentype'), url ('../ fonts/tmicons/cbp-tmicons.woff') format ('woff'), url ('.. format ('truetype'), url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') format ('svg'); Font-Weight: Normal; Font-style: Normal;} /* Reset Daftar Gaya* /. CBP-TM-MENU, .CBP-TM-MENU UL {LIST-STYLE: NOT;} /* SET POSISI MENU; Ubah di sini untuk diatur ke relatif atau float, dll. */. CBP-TM-MENU {display: block; Posisi: Absolute; z-index: 1000; Bawah: 0; Lebar: 100%; Latar Belakang: #47A3DA; Teks-Align: Benar; padding: 0 2em; Margin: 0; Text-Transform: Capitize;} / * Item menu tingkat pertama * /. CBP-TM-MENU> Li {display: inline-block; margin: 0 2.6em; Posisi: relatif;} .cbp-tm-menu> li> a {line-height: 4em; padding: 0 0.3em; Ukuran font: 1.2em; Tampilan: Blok; Warna: #fff;} .no-Touch .cbp-tm-nenu> li> a: hover, .no-touch .cbp-tm-menu> li> a: Active {color: #02639d;} / * sumbenu dengan transisi * /. CBP-TM-SUBMENU {Posisi: Posisi; Tampilan: Blok; Visibilitas: Tersembunyi; Opacity: 0; Padding: 0; Teks-Align: Kiri; Pointer-Events: Tidak Ada; -webkit-transisi: visibilitas 0s, opacity 0s; -Moz-transisi: visibilitas 0s, opacity 0s; transisi: visibilitas 0s, opacity 0s;} .cbp-tm-show .cbp-tm-submenu {width: 16em; Kiri: 50%; Margin: 0 0 0 -8em; Opacity: 1; Visibilitas: terlihat; Pointer-Events: Auto; -webkit-transisi: visibilitas 0s, opacity 0.3s; -Moz-transisi: visibilitas 0s, opacity 0.3s; Transisi: Visibilitas 0s, opacity 0.3s;} .cbp-tm-show-above .cbp-tm-submenu {bottom: 100%; Padding-Bottom: 10px;} .cbp-tm-show-sel .cbp-tm-submenu {top: 100%; Padding-Top: 10px;} / * Kasus Ekstrem: Tidak cukup ruang di sisi * /. CBP-TM-NOSPACE-RIGHT .CBP-TM-SUBMENU {kanan: 0; Kiri: auto;} .cbp-tm-nospace-left .cbp-tm-submenu {kiri: 0;} /*item menu terakhir harus sesuai dengan layar* /. CBP-TM-menu> li: Posisi-Child. .cbp-tm-submenu: setelah {border: solid transparan; isi: " "; Tinggi: 0; Lebar: 0; Posisi: Absolute; Pointer-events: none;} .cbp-tm-show-above .cbp-tm-submenu: setelah {top: 100%; margin-top: -10px;} .cbp-tm-show-bac .cbp-tm-submenu: setelah {bottom: 100%; margin-bottom: -10px;} .cbp-tm-submenu: setelah {border-color: transparent; Perbatasan-lebar: 16px; margin -kiri: -16px; Kiri: 50%;} .cbp-tm-show-above .cbp-tm-submenu: setelah {border-top-color: #fff;} .cbp-tm-show-selow .cbp-tm-submenu: setelah {border-bottom-color: #fff;} .cbp-tm-submenu> {border-bottom: #fff;} .cbp-tm-submenu> {border-bottom: #fff;} .cbp-tm-submenu> {border-bottom: #fff;} .cbp-tm-submenu> {border-bottom: #fff;} .cbp-tm-submenu> {border-bottom: #fff; latar belakang: #fff;} .cbp-tm-submenu> li> a {padding: 5px 2.3em 5px 0.6em; / * padding atas/bawah di 'em' menyebabkan "lompatan" kecil di chrome on win */display: block; Ukuran font: 1.2em; Posisi: kerabat; Warna: #47A3DA; Perbatasan: 4px solid #fff; -webkit-transisi: semua 0.2; -Moz-transisi: semua 0,2S; Transisi: semua 0.2S;}. Tidak ada touch .cbp-tm-submenu> li> a: hover,. tidak ada .cbp-tm-submenu> li> a: aktif {warna: #fff; Latar Belakang: #47A3DA;} / * Ikon (ikon menu tingkat utama dan ikon sublevel) * /. CBP-TM-Submenu li A: Sebelumnya, .cbp-tm-menu> li> a: Sebelum {font-family: 'cbp-tmicons'; Bicaralah: tidak ada; Font-style: Normal; Font-Weight: Normal; Font-Variant: Normal; Teks-transform: tidak ada; Line-Height: 1; Vertikal-Align: tengah; margin-kanan: 0.6em; -webkit-font-smoothing: antialiased;} .cbp-tm-submenu li a: sebelum {position: absolute; Atas: 50%; margin -top: -0.5em; Kanan: 0.5em;} .cbp-tm-menu> li> a: not (: Only-child): sebelum {konten: "/f0c9"; Ukuran font: 60%; opacity: 0.3;} .cbp-tm-icon-archive: sebelum {konten: "/e002";} .cbp-tm-icon-cog: sebelum {konten: "/e003";} .cbp-tm-iCon-users: sebelum {konten: "/e004";} .cbp-tm-icon: Sebelum {konten: "/e004";} .cbp-tm-ic-ic: sebelum {Content: "/e004";} .cbp-tm-ic-ic: sebelum {content: "/e004";} .cbp-tm-ic: .cbp-tm-icon-location: Sebelum {content: "/e006";} .cbp-tm-icon-mobile: sebelum {content: "/e007";} .cbp-tm-icon-screen: sebelum {konten: "/e008";} .cbp-tm-icon-mail: Sebelum {konten: "/e008"; .cbp-tm-icon-kontrak: Sebelum {content: "/e00a";} .cbp-tm-icon-pensil: sebelum {content: "/e00b";} .cbp-tm-icon-artikel: Sebelum {konten: "/e00c";} .cbp-tm-icon-clock: {content: "/e00c"; .cbp-tm-icon-videos: sebelum {content: "/e00e";} .cbp-tm-icon-pictures: Sebelum {konten: "/e00f";} .cbp-tm-icon-link: Sebelum {konten: "/e010";} .cbp-tm-icon-refresher: content: "/e010";} .cbp-tmson-referesher: content: "/e010; .cbp-tm-icon-help: sebelum {content: "/e012";}/ * kueri media */@layar media dan (max-width: 55.6875em) {.cbp-tm-menu {font-size: 80%; }} @media layar dan (max-height: 25.25em), layar dan (max-lebar: 44.3125em) {.cbp-tm-menu {font-size: 100%; Posisi: kerabat; Teks-Align: tengah; Padding: 0; Atas: Otomatis; } .cbp-tm-menu> li {display: block; Margin: 0; Border-Bottom: 4px Solid #3793CA; } .cbp-tm-menu> li: anak pertama {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; Latar belakang: #02639D; } .cbp-tm-submenu {position: relatif; Tampilan: Tidak Ada; Lebar: 100%; } .cbp-tm-submenu> li {padding: 0; } .cbp-tm-submenu> li> a {padding: 0.6em 2.3em 0.6em 0.6em; Perbatasan: Tidak Ada; Border-Bottom: 2px solid #6fbbe9; } .cbp-tm-submenu: setelah {display: none; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display: block; Lebar: 100%; Kiri: 0; Margin: 0; Padding: 0; Bawah: otomatis; Atas: Otomatis; }}Kode JavaScript
/** * cbptooltipmenu.js v1.0.0 * http://www.codrops.com * * dilisensikan di bawah lisensi MIT. * http://www.opensource.org/licenses/mit-license.php * * Hak cipta 2013, codrops * http://www.codrops.com */; (function) {'menggunakan strict'; var document = window.documents.com, docelem = document.document.document b.hasownproperty (key)) {a [key] = b [key]; ) Kembalinya klien; if ife! = 'mouseout' && e.type! = 'mouseOver') Return false; cbptooltipMenu (el, opsi) {this.el = el; This.Menuitems = Document.QuerySelectorAll ('#' + this.el.id + '> li'); {trigger.addeventListener ('klik', function (ev) {self._handleclick (ini, ev);})); el.addeventlistener ('mouseover', function (ev) {if (ismouseleaveorenter (ev, this)) self._openmenu (ini);}); ); }, _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.clapsne {self._positionMenu (el) === 'Top') {el. EL.ClassName += 'CBP-TM-Show-Below'; }, _closemenu: function (el) {clearTimeout (this.omTimeout); var submenu = el.queryselector ('ul.cbp-tm-submenu'); if (submenu) {// berdasarkan https://github.com/desandro/classie/blob/master/classie.js el.classname = el.classname.replace (regexp baru ("(^| // S +)" + "CBP-TM-Show" (///S +); el.classname = el.classname.replace (regexp baru ("(^| // s +)" + "cbp-tm-show-selow" + "(// s + | $)"), ''); el.classname = el.classname.replace (regexp baru ("(^| // s +)" + "cbp-tm-show-selow" + "(// s + | $)"), ''); el.classname = el.classname.replace (regexp baru ("(^| // s +)" + "cbp-tm-show-above" + "(// s + | $)"), ''); }}, _HandleClick: function (el, ev) {var item = el.parentnode, item = array.prototype.slice.call (this.menuitems), submenu = item.querySelector ('ul.cbp-tm-submenu') // pertama tutup satu pun ('Ul.cbp-tm-submenu') // tutup setiap terbuka. {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-terbuka', 'false'); } else {this._openmenu (item); this.current = item.indexOf (item); submenu.setAttribute ('data-terbuka', 'true'); }}}, _positionMenu: function (el) {// Memeriksa di mana lebih banyak ruang yang tersisa di viewport: di atas atau di bawah elemen var vh = getViewPorth (), OT = getoffset (el), spaceUp = oT.top, spacedown = vh - spaceup - el.offsetheight; return (spacedown <= SpaceUp? 'Top': 'Bottom'); }} // Tambahkan ke namespace window.cbptooltipMenu = cbptooltipMenu; }) (jendela);Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.