นี่เป็นเมนูที่ค่อนข้างง่ายและใช้งานได้จริงและสิ่งที่สำคัญที่สุดคือไม่จำเป็นต้องอ้างอิงห้องสมุด jQuery เมนูสามารถปรับได้ในทิศทางแนวตั้ง เมื่อเมนูหลักอยู่ใกล้กับด้านบนเมนูย่อยจะอยู่ด้านล่างและเมื่อเมนูหลักอยู่ใกล้กับด้านล่างเมนูย่อยจะอยู่ด้านบน ด้วยการใช้ฟังก์ชั่นการตรวจจับการสัมผัสของ Modernizr เราสามารถตอบกลับของเมนูย่อยบนพีซีและคลิกที่อุปกรณ์สัมผัส ตัวอย่างยังแสดงให้เห็นถึงวิธีการปรับเลย์เอาต์ด้วยความกว้างที่ค่อนข้างแคบ
รหัส HTML
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> veggie ทำ </a> <ul> <li> <a href = "#" <li> <a href = "#"> plum salsify </a> </li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> endive </a> </li> <li> ผักกาดหอม </a> </li> </li> </li> <li> <a href = "#"> พริกไทย tatsoi </a> <ul> <li> <a href = "#"> brussels Sprout </a> </li> <li> สีเขียว </a> </li> <li> <a href = "#"> ผลไม้ไวน์ </a> </li> <li> <a href = "#"> กระเทียมมิ้นต์ </a> </li> <li> <a href = "#"> Zucchini garnish </a> </li> <li> <a href = "#"> แตงโมหวาน </a> <ul> <li> <a href = "#"> ทะเลทราย Sorrel </a> </li> <li> <a href = "#"> Raisin Kakadu </a> </li> <li> href = "#"> bok choy celtuce </a> </li> <li> <a href = "#"> หัวหอม endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li>
รหัส CSS
/ * iconfont ทำด้วย icomoon.com */@font-face {font-family: 'cbp-tmicons'; SRC: URL ('../ FONTS/TMICONS/CBP-TMICONS.EOT'); SRC: url ('../ fonts/tmicons/cbp-tmicons.eot? #iefix') รูปแบบ ('Embedded-opentype'), url ('../ fonts/tmicons/cbp-tmicons.woff') ('woff'), url ('.. รูปแบบ ('truetype'), url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') รูปแบบ ('svg'); Font-Weight: ปกติ; รูปแบบ FONT: ปกติ;} /* รีเซ็ตรูปแบบรายการ* /. CBP-TM-MENU, .CBP-TM-MENU UL {รายการสไตล์: ไม่มี;} /* ตั้งตำแหน่งเมนู; เปลี่ยนที่นี่เพื่อตั้งค่าเป็นญาติหรือลอย ฯลฯ */. CBP-TM-MENU {Display: Block; ตำแหน่ง: สัมบูรณ์; z-index: 1,000; ด้านล่าง: 0; ความกว้าง: 100%; ความเป็นมา: #47A3DA; TEXT-ALIGING: ถูกต้อง; Padding: 0 2EM; มาร์จิ้น: 0; Text-transform: ใช้ประโยชน์;} / * รายการเมนูระดับแรก * /. CBP-TM-Menu> li {display: inline-block; มาร์จิ้น: 0 2.6em; ตำแหน่ง: ญาติ;} .cbp-tm-menu> li> a {line-height: 4em; Padding: 0 0.3em; ขนาดตัวอักษร: 1.2EM; แสดง: บล็อก; สี: #fff;} .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: แอคทีฟ {color: #02639d;} / * sumbenu ที่มีการเปลี่ยนแปลง * /. cbp-tm-submenu แสดง: บล็อก; ทัศนวิสัย: ซ่อน; ความทึบ: 0; Padding: 0; TEXT-ALIGN: ซ้าย; Eventer-events: ไม่มี; -webkit-transition: การมองเห็น 0s, ความทึบ 0s; -MOZ-TRANSITION: การมองเห็น 0S, Opacity 0S; การเปลี่ยนแปลง: การมองเห็น 0S, ความทึบ 0S;} .CBP-TM-Show .CBP-TM-SUBMENU {WIDTH: 16EM; ซ้าย: 50%; มาร์จิ้น: 0 0 0 -8EM; ความทึบ: 1; ทัศนวิสัย: มองเห็นได้; Eventer-events: อัตโนมัติ; -webkit-transition: ทัศนวิสัย 0s, ความทึบ 0.3s; -MOZ-TRANSITION: การมองเห็น 0S, ความทึบ 0.3S; การเปลี่ยนแปลง: การมองเห็น 0S, ความทึบ 0.3S;} .CBP-TM-Show-ABove .CBP-TM-SUBMENU {ด้านล่าง: 100%; Padding-bottom: 10px;} .cbp-tm-show-below .cbp-tm-submenu {top: 100%; Padding-Top: 10px;} / * กรณีสุดขั้ว: พื้นที่ไม่เพียงพอที่ด้านข้าง * /. CBP-TM-NOSPACE-RIGHT .CBP-TM-SUBMENU {ขวา: 0; ซ้าย: auto;} .cbp-tm-nospace-left .cbp-tm-submenu {ซ้าย: 0;} /*รายการเมนูสุดท้ายต้องพอดีกับหน้าจอ* /. cbp-tm-menu> li: last-child .cbp-tm-submenu {ขวา: 0;} .CBP-TM-SUBMENU: หลังจาก {ชายแดน: ทึบโปร่งใส; เนื้อหา: " "; ความสูง: 0; ความกว้าง: 0; ตำแหน่ง: สัมบูรณ์; Eventer-events: ไม่มี;} .CBP-TM-Show-Above .CBP-TM-SUBMENU: หลังจาก {TOP: 100%; ระยะขอบด้านบน: -10px;} .cbp-tm-show-below .cbp-tm-submenu: หลังจาก {ด้านล่าง: 100%; ขอบด้านล่าง: -10px;} .CBP-TM-SUBMENU: หลังจาก {สีชายแดน: โปร่งใส; ความกว้างของชายแดน: 16px; ขอบซ้าย: -16px; ซ้าย: 50%;} .CBP-TM-Show-ABOVE .CBP-TM-SUBMENU: หลังจาก {border-top-color: #FFF;} .CBP-TM-Show-Below .CBP-TM-SUBMENU: หลังจาก {border-bottom-color: #FFF; ความเป็นมา: #FFF;} .CBP-TM-SUBMENU> LI> A {padding: 5PX 2.3EM 5PX 0.6EM; / * Paddings ด้านบน/ล่างใน 'em' ทำให้ "กระโดด" เล็ก ๆ ใน Chrome บน win */display: block; ขนาดตัวอักษร: 1.2EM; ตำแหน่ง: ญาติ; สี: #47A3DA; ชายแดน: 4px Solid #FFF; -webkit-transition: 0.2s ทั้งหมด; -MOZ-TRANSITION: 0.2S ทั้งหมด; การเปลี่ยนแปลง: 0.2s ทั้งหมด;} .no-touch .cbp-tm-submenu> li> a: hover, .no-touch .cbp-tm-submenu> li> a: แอคทีฟ {color: #fff; ความเป็นมา: #47A3DA;} / * ไอคอน (ไอคอนเมนูระดับหลักและไอคอนย่อย) * /. CBP-TM-SUBMENU LI A: ก่อนหน้า, .CBP-TM-MENU> LI> A: ก่อน {FONT-FAMILY: 'CBP-TMICONS'; พูด: ไม่มี; สไตล์ฟอนต์: ปกติ; Font-Weight: ปกติ; Font-Variant: ปกติ; การเปลี่ยนข้อความ: ไม่มี; ความสูงบรรทัด: 1; แนวตั้ง-แนว: กลาง; มาร์จิ้น-ขวา: 0.6em; -webkit-font-smoothing: antialiased;} .cbp-tm-submenu li a: ก่อน {ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ระยะขอบด้านบน: -0.5em; ขวา: 0.5EM;} .CBP-TM-MENU> LI> A: ไม่ (: เด็กเท่านั้น): ก่อน {เนื้อหา: "/F0C9"; ขนาดตัวอักษร: 60%; ความทึบ: 0.3;} .cbp-tm-icon-archive: ก่อน {เนื้อหา: "/e002";} .cbp-tm-icon-cog: ก่อน {เนื้อหา: "/e003";} .cbp-tm-icon-users: ก่อน {เนื้อหา: "/e004"; .CBP-TM-ICON-LOCATION: ก่อน {เนื้อหา: "/E006";} .CBP-TM-ICON-MOBILE: ก่อน {เนื้อหา: "/E007";} .CBP-TM-ICON-SCREEN: ก่อน {เนื้อหา: "/e008"; .cbp-tm-icon-contract: ก่อน {เนื้อหา: "/e00a";} .cbp-tm-icon-pencil: ก่อน {เนื้อหา: "/e00b";} .cbp-tm-icon-article: ก่อน {เนื้อหา: "/e00c"; .CBP-TM-ICON-VIDEOS: ก่อน {เนื้อหา: "/E00E";} .CBP-TM-ICON-PICTURES: ก่อน {เนื้อหา: "/e00f";} .CBP-TM-ICON-LINK: ก่อน {เนื้อหา: "/e010"; .CBP-TM-ICON-HELP: ก่อน {เนื้อหา: "/e012";}/ * การสืบค้นสื่อ */@Media Screen และ (Max-Width: 55.6875EM) {.CBP-TM-MENU {FONT-SIZE: 80%; }} @media หน้าจอและ (สูงสุด-สูง: 25.25em), หน้าจอและ (สูงสุด-ความกว้าง: 44.3125em) {.cbp-tm-menu {ตัวอักษรขนาด: 100%; ตำแหน่ง: ญาติ; TEXT-ALIGN: CENTER; Padding: 0; ด้านบน: อัตโนมัติ; } .cbp-tm-menu> li {display: block; มาร์จิ้น: 0; ขอบด้านล่าง: 4px Solid #3793CA; } .cbp-tm-menu> li: เด็กคนแรก {ชายแดนด้านบน: 4px solid #3793ca; } li.cbp-tm-show> a, .no-touch .cbp-tm-menu> li> a: hover, .no-touch .cbp-tm-menu> li> a: แอคทีฟ {color: #fff; ความเป็นมา: #02639D; } .CBP-TM-SUBMENU {ตำแหน่ง: ญาติ; แสดง: ไม่มี; ความกว้าง: 100%; } .cbp-tm-submenu> li {padding: 0; } .cbp-tm-submenu> li> a {padding: 0.6em 2.3em 0.6em 0.6em; ชายแดน: ไม่มี; ขอบด้านล่าง: 2px Solid #6FBBE9; } .CBP-TM-SUBMENU: หลังจาก {display: none; } .CBP-TM-MENU .CBP-TM-Show .CBP-TM-SUBMENU {DISPLAY: block; ความกว้าง: 100%; ซ้าย: 0; มาร์จิ้น: 0; Padding: 0; ด้านล่าง: อัตโนมัติ; ด้านบน: อัตโนมัติ; -รหัส JavaScript
/** * cbptooltipmenu.js v1.0.0 * http://www.codrops.com * * ได้รับอนุญาตภายใต้ใบอนุญาต MIT * http://www.opensource.org/licenses/mit-license.php * * ลิขสิทธิ์ 2013, codrops * http://www.codrops.com */; (ฟังก์ชั่น (หน้าต่าง) b.hasownproperty (คีย์)) {a [key] = b [key];}} return a; ภายใน; (E.Type! = 'Mouseout' && E.Type! cbptooltipmenu (el, ตัวเลือก) {this.el = el; this.menuitems = document.querySelectorall ('#' + this.el.id + '> li'); self.touch) {trigger.addeventListener ('คลิก', ฟังก์ชั่น (ev) {self._handleclick (นี่, ev);}); }}); - }, _openmenu: ฟังก์ชั่น (el) {var self = this; ClearTimeout (this.omtimeout); this.omtimeout = settimeout (function () {var submenu = el.QuerySelector ('ul.cbp-tm-submenu'); ถ้า (submenu) {el.classname = 'cbp-tm-show'; if (self._positionmenu (el) === 'top') El.ClassName += 'CBP-TM-Show-Below'; }, _closemenu: ฟังก์ชั่น (el) {cleartimeout (this.omtimeout); var submenu = el.QuerySelector ('UL.CBP-TM-SUBMENU'); if (submenu) {// ขึ้นอยู่กับ https://github.com/desandro/classie/blob/master/classie.js el.classname = el.classname.replace (ใหม่ regexp ("(^| // s +)" + "CBP-tm-show" el.className = el.className.replace (ใหม่ regexp ("(^| // s +)" + "CBP-tm-show-below" + "(// s + | $)"), ''); el.className = el.className.replace (ใหม่ regexp ("(^| // s +)" + "CBP-tm-show-below" + "(// s + | $)"), ''); el.className = el.className.replace (ใหม่ regexp ("(^| // s +)" + "CBP-TM-Show-Above" + "(// s + | $)"), ''); }}, _handleclick: ฟังก์ชั่น (el, ev) {var item = el.parentNode, item = array.prototype.slice.call (this.menuitems), submenu = item.querySelector ('ul.cbp-tm-submenu') // {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 (รายการ); Submenu.setAttribute ('Data-Open', 'False'); } else {this._openmenu (รายการ); this.current = items.indexof (รายการ); Submenu.setAttribute ('Data-Open', 'True'); }}}, _positionmenu: ฟังก์ชั่น (el) {// การตรวจสอบที่เหลืออยู่ในมุมมอง: ด้านบนหรือต่ำกว่าองค์ประกอบ var vh = getViewPorth (), ot = getOffset (el), spaceUp = ot.top, spacedown = vh - spaceup - el.offsetheight; return (spacedown <= spaceup? 'top': 'bottom'); }} // เพิ่มไปยัง window.cbptooltipmenu = cbptooltipmenu; } )( หน้าต่าง );ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น