هذه قائمة بسيطة وعملية نسبيًا ، وأهم شيء هو أنه لا يحتاج إلى الرجوع إلى مكتبة jQuery. يمكن أن تكون القائمة قابلة للتكيف في الاتجاه العمودي. عندما تكون القائمة الرئيسية قريبة من الأعلى ، ستكون القائمة الفرعية أدناه ، وعندما تكون القائمة الرئيسية قريبة من القاع ، تكون القائمة الفرعية أعلاه. باستخدام وظيفة اكتشاف اللمس في Modernizr ، يمكننا جعل استجابة القائمة الفرعية تحوم على الكمبيوتر والنقر على جهاز اللمس. يوضح المثال أيضًا كيفية ضبط التصميم بعرض ضيق نسبيًا.
رمز HTML
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> made </a> <ul> <li> <a href = "#" <li> <a href = "#"> plum salsify </a> </li> <li> <li> <a href = "#"> bok choy celtuce </a> </li> <li> <a href = "#" الخس </a> </li> </li> </li> <li> <a href = "#"> pepper tatsoi </a> <ul> <li> <a href = "#"> brussels sprout </a> </li> <li> الأخضر </a> </li> <li> <a href = "#"> فاكهة النبيذ </a> </li> <li> <a href = "#" <li> <a href = "#"> البطيخ الحلو </a> <ul> <li> <a href = "#"> Sorrel Desert </a> </li> <li> <a href = "#" choy celtuce </a> </li> <li> <a href = "#"> البصل endive </a> </li> <li> <a href = "#"> bitterleaf </a> </li> </li> </ul>
رمز 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') تنسيق ('umbedded-opentype') ، url ('../ fonts/tmicons/tmicons. التنسيق ('truetype') ، url ('../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') تنسيق ('svg') ؛ خط الوزن: طبيعي ؛ Font-Style: Normal ؛} /* إعادة تعيين Stet Style* /. قم بتغيير هنا لتعيينها على النسبية أو التعويم ، إلخ. */. CBP-TM-Menu {Display: Block ؛ الموقف: مطلق ؛ Z-Index: 1000 ؛ أسفل: 0 ؛ العرض: 100 ٪ ؛ الخلفية: #47A3DA ؛ محاذاة النص: صحيح ؛ الحشو: 0 2EM ؛ الهامش: 0 ؛ تحويل النص: GRAVINISE ؛} / * عناصر قائمة المستوى الأول * /. CBP-TM-MENU> li {display: inline-block ؛ الهامش: 0 2.6em ؛ الموضع: النسبية ؛} .cbp-tm-menu> li> a {line-height: 4em ؛ الحشو: 0 0.3em ؛ حجم الخط: 1.2. العرض: كتلة ؛ اللون: #fff ؛}. no-touch .cbp-tm-menu> li> a: العرض: كتلة ؛ الرؤية: مخفية ؛ العتامة: 0 ؛ الحشو: 0 ؛ محاذاة النص: اليسار ؛ أحداث المؤشر: لا شيء ؛ -Webkit-transition: الرؤية 0S ، عتامة 0S ؛ -Moz-transition: الرؤية 0S ، عتامة 0S ؛ الانتقال: الرؤية 0S ، عتامة 0S ؛} .cbp-tm-show .cbp-tm-submenu {width: 16em ؛ اليسار: 50 ٪ ؛ الهامش: 0 0 -8em ؛ العتامة: 1 ؛ الرؤية: مرئية ؛ أحداث المؤشر: السيارات ؛ -Webkit-transition: الرؤية 0S ، عتامة 0.3S ؛ -Moz-transition: الرؤية 0S ، عتامة 0.3S ؛ الانتقال: الرؤية 0S ، عتامة 0.3S ؛} .cbp-tm-show-above .cbp-tm-submenu {bottom: 100 ٪ ؛ bottom bottom: 10px ؛} .cbp-tm-show-below .cbp-tm-submenu {top: 100 ٪ ؛ Padding-Top: 10px ؛} / * الحالات المتطرفة: لا توجد مساحة كافية على الجانبين * /. cbp-tm-nospace-right .cbp-tm-submenu {right: 0 ؛ اليسار: auto ؛} .cbp-tm-nospace-left .cbp-tm-submenu {يسار: 0 ؛} /*يجب أن يتناسب عنصر القائمة الأخيرة على الشاشة* /. cbp-tm-menu> li: آخر-تشيلد .cbp-tm-submenu {يمين: 0 ؛ .cbp-tm-submenu: بعد {الحدود: شفافة صلبة ؛ محتوى: " "؛ الارتفاع: 0 ؛ العرض: 0 ؛ الموقف: مطلق ؛ المؤشرات أحداث: لا شيء ؛} .cbp-tm-show-above .cbp-tm-submenu: بعد {top: 100 ٪ ؛ Margin-Top: -10px ؛} .cbp-tm-show-below .cbp-tm-submenu: بعد {القاع: 100 ٪ ؛ margin-bottom: -10px ؛} .cbp-tm-submenu: بعد {border-color: شفاف ؛ عرض الحدود: 16 بكسل ؛ الهامش اليساري: -16px ؛ اليسار: 50 ٪ ؛} .cbp-tm-show-above .cbp-tm-submenu: بعد {border-top-color: #fff ؛} .cbp-tm-show-below .cbp-tm-submenu: بعد {bord-bottom-color: #fff ؛} .cbp-tm-submenu> li {display. الخلفية: #fff ؛} .cbp-tm-submenu> li> a {padding: 5px 2.3em 5px 0.6em ؛ / * الحشوات العلوية/السفلية في 'em' تسبب "قفزة" صغيرة في Chrome on win */display: block ؛ حجم الخط: 1.2. الموقف: قريب اللون: #47A3DA ؛ الحدود: 4px الصلبة #FFF ؛ -بكيت ترانس: جميع 0.2s ؛ -انتقال الأوز: جميع 0.2s ؛ الانتقال: All 0.2s ؛}. no-touch .cbp-tm-submenu> li> a: hover ، .no-touch .cbp-tm-submenu> li> a: Active {color: #fff ؛ الخلفية: #47a3da ؛} / * الرموز (أيقونة قائمة المستوى الرئيسي وأيقونات sublevel) * /. cbp-tm-submenu li a: قبل ، .cbp-tm-menu> li> a: قبل {font-family: 'cbp-tmicons' ؛ تحدث: لا شيء ؛ على غرار الخط: طبيعي ؛ خط الوزن: طبيعي ؛ المتغير الخط: طبيعي ؛ تحويل النص: لا شيء ؛ ارتفاع الخط: 1 ؛ المحاذاة الرأسية: الأوسط ؛ يمين الهامش: 0.6EM ؛ -webkit-font-smoothing: antialiased ؛} .cbp-tm-submenu li a: قبل {الموضع: Absolute ؛ أعلى: 50 ٪ ؛ الهامش: -0.5em ؛ اليمين: 0.5em ؛} .cbp-tm-menu> li> a: not (: فقط child): قبل {content: "/f0c9" ؛ حجم الخط: 60 ٪ ؛ البضائع: 0.3 ؛} .cbp-tm-icon-archive: قبل {المحتوى: "/e002 ؛} .cbp-tm-icon-cog: قبل المحتوى:"/e003 "؛ .cbp-tm-icon location: قبل {content: "/e006 ؛} .cbp-tm-icon-mobile: قبل {content:"/e007 ؛} .cbp-tm-icon-screen: قبل المحتوى: "/e008" ؛ .cbp-tm-icon-contract: قبل {المحتوى: "/e00a" ؛ .cbp-tm-icon-videos: قبل {المحتوى: "/e00e" ؛ .cbp-tm-icon-help: قبل {المحتوى: "/e012" ؛}/ * شاشة Media */@media و (max-width: 55.6875em) {.cbp-tm-menu {font-size: 80 ٪ ؛ }} media screen و (max-height: 25.25em) ، الشاشة و (max-width: 44.3125em) {.cbp-tm-menu {font-size: 100 ٪ ؛ الموقف: قريب محاذاة النص: المركز ؛ الحشو: 0 ؛ أعلى: السيارات ؛ } .cbp-tm-menu> li {display: block ؛ الهامش: 0 ؛ Border-Bottom: 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 ؛ الخلفية: #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 ؛ الحدود: لا شيء ؛ Border-Bottom: 2px Solid #6FBBE9 ؛ } .cbp-tm-submenu: بعد {display: none ؛ } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display: block ؛ العرض: 100 ٪ ؛ اليسار: 0 ؛ الهامش: 0 ؛ الحشو: 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] عميل الإرجاع ؛ ! = mouseout '&& e.type! =' mouseover ') cbptooltipmenu (el ، {this.el = el ؛ هذا. 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-show-below' ؛ } ، _closemenu: function (el) {cleartimeout (this.omTimeOut) ؛ MAR submenu = el.queryselector ('ul.cbp-tm-submenu') ؛ if (submenu) {// على أساس https://github.com/desandro/classie/blob/master/classie.js el.classname = el.classname.replace (new 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: 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.current] .SearySelector ('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-Open' ، 'false') ؛ } آخر {this._openmenu (item) ؛ this.current = items.indexof (item) ؛ Submenu.SetAttribute ('Data-Open' ، 'True') ؛ }}} ، _positionMenu: function (el) {// التحقق من المكان الذي يتم فيه ترك مساحة أكبر في منفذ العرض: أعلاه أو أسفل العنصر var vh = getViewPorth () ، ot = getOffset (el) ، SpaceUp = ot.top ، spacedown = vh - spaceup - el.offsetheight ؛ العودة (التباعد <= SpaceUp؟ "أعلى": "أسفل") ؛ }} // أضف إلى Window Window.cbptooltipmenu = cbptooltipmenu ؛ }) (نافذة) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.