これは比較的シンプルで実用的なメニューであり、最も重要なことは、jQueryライブラリを参照する必要がないことです。メニューは、垂直方向に順応性があります。メインメニューが上部に近い場合、サブメニューが下になり、メインメニューが下部に近い場合、サブメニューは上にあります。 Modernizrのタッチ検出機能を使用して、PCでサブメニューホバーの応答を行い、タッチデバイスをクリックできます。この例は、比較的狭い幅でレイアウトを調整する方法も示しています。
HTMLコード
<ul id = "cbp-tm-menu"> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> veggie made </a> <ul> <li> <a href = "＃"> sorrel砂漠< <li> <a href = "＃"> plum salsify </a> </li> <li> <a href = "＃"> bok choy celtuce </a> </li> <li> <a href = "＃" Lettuce </a> </li> </li> </li> <li> <a href = "＃"> pepper tatsoi </a> <ul> <li> <a href = "＃">ブリュッセルスプラウト</a>緑</a> </li> <li> <a href = "＃">ワインフルーツ</a> </li> <li> <a href = "＃">ガーリックミント</a> </li> <li> <a href = "＃"> zucchini garnish </a> </li> </li> <li> <a href = "＃">甘いメロン</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 = "＃"> onion endive </a> </li> <li> <a href = "＃"> bitterleaf </a> </li> </li> </ul>
CSSコード
/ * icomoon.comで作成されたiconfont */@font-face {font-family： 'cbp-tmicons'; src：url（ '../ fonts/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/cbp-tmicons format（ 'trueType'）、url（ '../ fonts/tmicons/cbp-tmicons.svg＃cbp-tmicons'）format（ 'svg'）; font-weight：正常;フォントスタイル：normal;} /*リセットリストスタイル* /。cbp-tm-menu、.cbp-tm-menu ul {list-style：none;} /*メニュー位置を設定します。ここで変更して、相対的またはフロートなどに設定します。位置：絶対; z-index：1000;下：0;幅：100％;背景：＃47a3da;テキストアライグ：右;パディング：0 2EM;マージン：0; TEXT-TRANSFORM：CAPEATELIZE;} / *最初のレベルメニュー項目 * /。CBP-TM-MENU> LI {display：inline-block;マージン：0 2.6em;位置：相対;} .cbp-tm-menu> li> a {line-height：4em;パディング：0 0.3em;フォントサイズ：1.2em;表示：ブロック;色：#fff;} .no-touch .cbp-tm-menu> li> a：hover、.no-touch .cbp-tm-menu> li> a：active {color：＃02639d;} / * sumbenu with transitions * /。cbp-tm-submenu {posed：aspolute;表示：ブロック;可視性：隠された;不透明：0;パディング：0;テキストアライグ：左;ポインターイベント：なし; -webkit-transition：visibility 0s、Opacity 0s; -moz-transition：visibility 0s、Opacity 0s;遷移：可視性0S、不透明0S;} .cbp-tm-show .cbp-tm-submenu {width：16em;左：50％;マージン：0 0 0 -8EM;不透明：1;可視性：表示されます。 Pointer-Events：Auto; -webkit-transition：visibilibility 0s、Opacity 0.3s; -moz-transition：可視性0s、不透明度0.3秒;遷移：可視性0S、不透明0.3S;} .cbp-tm-show-above .cbp-tm-submenu {bottom：100％;パディングボトム：10px;} .cbp-tm-show-below .cbp-tm-submenu {top：100％;パディングトップ：10px;} / *極端なケース：側面に十分なスペースがありません * /。CBP-TM-NOSPACE-RIGHT .CBP-TM-SUBMENU {right：0;左：auto;} .cbp-tm-nospace-left .cbp-tm-submenu {left：0;} /*最後のメニュー項目は画面に適合する必要があります* /。cbp-tm-menu> li：last-child .cbp-tm-submenu {right：0;} /*aurow： .cbp-tm-submenu：afted {border：solid透明;コンテンツ： " ";高さ：0;幅：0;位置：絶対; pointer-events：none;} .cbp-tm-show-above .cbp-tm-submenu：後{top：100％;マージントップ：-10px;} .cbp-tm-show-below .cbp-tm-submenu：後{bottom：100％;マージンボトム：-10px;} .cbp-tm-submenu：後{border-color：透明;境界線：16px;マージン左：-16px;左：50％;} .cbp-tm-show-above .cbp-tm-submenu：after {border-top-color：#fff;} .cbp-tm-show-below .cbp-tm-submenu：afted {border-bottom-color：#fff;} .cbp-tm-submenu li {block; block;背景：#fff;} .cbp-tm-submenu> li> a {padding：5px 2.3em 5px 0.6em; / * 'em'の上/下のパディングは、win/display：blockでクロムに小さな「ジャンプ」を引き起こします。フォントサイズ：1.2em;位置：相対;色：＃47a3da;ボーダー：4pxソリッド#fff; -webkit-transition：すべて0.2秒; -moz-transition：すべて0.2秒;遷移：すべて0.2S;} .no-touch .cbp-tm-submenu> li> a：hover、.no-touch .cbp-tm-submenu> li> a：active {color：#fff;背景：＃47a3da;} / *アイコン（メインレベルのメニューアイコンとサブレベルアイコン） * /。cbp-tm-submenu li a：before、.cbp-tm-menu> li> a：before {font-family： 'cbp-tmicons';話す：なし;フォントスタイル：通常。 font-weight：正常; Font-Variant：正常;テキストトランスフォーム：なし; Line-Height：1;垂直アライイン：中央;マージン右：0.6em; -webkit-font-smoothing：antialiased;} .cbp-tm-submenu li a：before {position：absolute;トップ：50％;マージントップ：-0.5em;右：0.5em;} .cbp-tm-menu> li> a：not（：only-child）：before {content： "/f0c9";フォントサイズ：60％;不透明：0.3;} .cbp-tm-icon-archive：before {content： "/e002";} .cbp-tm-icon-cog：before {content： "/e003";} .cbp-tm-icon-users：before {content： "/e004";} .cbp-tm-icon-eart .cbp-tm-icon-location：before {content： "/e006";} .cbp-tm-icon-mobile：before {content： "/e007";} .cbp-tm-icon-screen：before {content： "/e008";} .cbp-tm-icon-mail：{content： "/e009";} .cbp-tm-icon contract：before {content： "/e00a";} .cbp-tm-icon-pencil：before {content： "/e00b";} .cbp-tm-icon-article：before {content： "/e00c";} .cbp-tm-clock：before {content： "/e00d";} .cbp-tm-icon-videos：before {content： "/e00e";} .cbp-tm-icon-pictures：before {content： "/e00f";} .cbp-tm-icon-link：before {content： "/e010";} .cbp-tm-icon-relesh：} conter .cbp-tm-icon-help：{content： "/e012";}/ * media queries */@@media画面および（max-width：55.6875em）{.cbp-tm-menu {font-size：80％; }} @media screen and（max-height：25.25em）、screen and（max-width：44.3125em）{.cbp-tm-menu {font-size：100％;位置：相対;テキストアライグ：センター;パディング：0;上：自動; } .cbp-tm-menu> li {display：block;マージン：0;国境圏：4PXソリッド＃3793CA; } .cbp-tm-menu> li：first-child {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;背景：＃02639d; } .cbp-tm-submenu {position：relative;表示：なし;幅：100％; } .cbp-tm-submenu> li {padding：0; } .cbp-tm-submenu> li> a {padding：0.6em 2.3em 0.6em 0.6em;国境：なし;境界線：2pxソリッド＃6fbbe9; } .cbp-tm-submenu：after {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 * * copyright 2013、codrops * http://www.codrops.com */;（function（window）{'use strict'; var document = window.document、doclem = documentelement.documentelement; B.HasownProperty（key] = b [key]; return client} （e.type！= 'type！ cbptooltipmenu（el、opters） this.menuitems = document.queryselectorall（ ' + this.el.id +'> li '）; self.touch）{trigger.addeventlistener（ 'click'、function（ev）{self._handleclick（ev）;}） ev.preventdefault（）; self._closemenu（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-abp-abp-abp-abp-tm-show-abve el.classname += 'cbp-tm-show-below'; }、_closemenu：function（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（new regexp（new regexp（ "（^| // s +）" + "cbp-tm-shhow" + | $） "'' ''） 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.menuitems）、submenu = 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（item）; submenu.setattribute（ 'data-open'、 'false'）; } else {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; return（spacedown <= spaceup？ 'top'： 'bottom'）; }} //グローバル名に追加window.cbptooltipmenu = cbptooltipmenu; }）（window）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。