これは比較的シンプルで実用的なメニューであり、最も重要なことは、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をもっとサポートすることを願っています。