이것은 비교적 간단하고 실용적인 메뉴이며 가장 중요한 것은 jQuery 라이브러리를 참조 할 필요가 없다는 것입니다. 메뉴는 수직 방향으로 적응할 수 있습니다. 기본 메뉴가 상단에 가까워지면 하위 메뉴가 아래에 있으며 메인 메뉴가 맨 아래에 가까워지면 하위 메뉴가 위에 있습니다. Modernizr의 터치 감지 기능을 사용하여 PC에서 하위 메뉴 호버의 응답을 만들고 터치 장치를 클릭 할 수 있습니다. 이 예제는 또한 비교적 좁은 폭으로 레이아웃을 조정하는 방법을 보여줍니다.
HTML 코드
<ul id = "cbp-tm-menu"> <li> <a href = "#"> home </a> </a> </a> </a> </li> <li> <a href = "#"> 채소 만들기 </a> <ul> <li> <a href = "#"> Sorrel Desert </a> <li> <a href = "#"> Raisin Kakadu </a> "> <li> <a href = "#"> plum salsify </a> </li> <li> <a href = "#"> Bok Choy Celtuce </a> </li> <li> <a href = "#"> 양성 </a> </li> <li> <a href = "#"> <<a li>> <a li>> <a li>> <a li>> <a li>> 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> </li> <li> <a href = "#"> 와인 과일 </a> </li> <li> <a href = "#"> Garlic Mint </a> </li> <li> <a href = "#"> Zucchini Garnish </a> <li> <a href = </li> </ultuce </a> "> </li> <li> <a href = "#"> 달콤한 멜론 </a> <ul> <li> <a href = "#"> Sorrel Desert </a> </li> <li> <a href = "#"> Raisin kakadu </a> </li> <li> <a href = "#"> plum salsify href = "#"> Bok Choy Celtuce </a> </li> <li> <a href = "#"> 양파 엔드 </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') 형식 ( 'embedded-opentype'), url ( '../ fonts/tmicons/cbp-tmicons.woff') format ( 'woff'), url ( '../ fonts/tmicons/cbp-tf'). 형식 ( 'truetype'), url ( '../ fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') 형식 ( 'svg'); 글꼴 중량 : 정상; 글꼴 스타일 : 정상;} /* 목록 스타일 재설정* /. CBP-TM-MENU, .CBP-TM-MENU UL {목록 스타일 : 없음;} /* 메뉴 위치; 상대 또는 부유물 등으로 설정하도록 여기에서 변경하십시오. */. CBP-TM-MENU {display : block; 위치 : 절대; Z- 인덱스 : 1000; 하단 : 0; 너비 : 100%; 배경 : #47A3DA; 텍스트 정렬 : 맞습니다. 패딩 : 0 2em; 여백 : 0; Text-Transform : Cailize;} / * 첫 번째 레벨 메뉴 항목 * /. CBP-TM-MENU> li {디스플레이 : 인라인 블록; 여백 : 0 2.6em; 위치 : 상대;} .cbp-tm-menu> li> a {line-height : 4em; 패딩 : 0 0.3em; 글꼴 크기 : 1.2EM; 디스플레이 : 블록; 색상 : #fff;} .no-touch .cbp-tm-menu> li> a : 호버, .no-touch .cbp-tm-menu> a : active {color : #02639d;} / * sumbenu * /. cbp-tm-submenu {위치 : 절대; 디스플레이 : 블록; 가시성 : 숨겨진; 불투명도 : 0; 패딩 : 0; 텍스트 정렬 : 왼쪽; 포인터 이벤트 : 없음; -webkit-transition : 가시성 0s, 불투명도 0s; -Moz-transition : 가시성 0S, 불투명도 0; 전환 : 가시성 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 {하단 : 100%; 패딩-바닥 : 10px;} .CBP-TM-SHOW-BELOW .CBP-TM-SUBMENU {TOP : 100%; 패딩-탑 : 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;} /*Arrow : 메뉴가 어디에 있는지, 우리는 Arrow* /에 따라, 우리는 어디에서, 우리는 Arrow* /입니다. .cbp-tm-submenu : {국경 : 고체 투명; 콘텐츠: " "; 높이 : 0; 너비 : 0; 위치 : 절대; 포인터-이벤트 : 없음;} .CBP-TM-SHOW-ABOVE .CBP-TM-SUBMENU : {TOP : 100%; 마진-탑 : -10px;} .cbp-tm-show-below .cbp-tm-submenu : {하단 : 100%; 마진-바닥 : -10px;} .cbp-tm-submenu : {border-color : 투명; 국경비 : 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;} .cbp-tm-submenu> li {display : 블록; 배경 : #fff;} .cbp-tm-submenu> li> a {패딩 : 5px 2.3em 5px 0.6em; / * 상단/하단 패딩의 'em'은 win */display에 크롬에서 작은 "점프"를 원합니다 : 블록; 글꼴 크기 : 1.2EM; 위치 : 상대; 색상 : #47A3DA; 테두리 : 4px 솔리드 #fff; -webkit-transition : 모든 0.2s; -Moz-transition : 모든 0.2s; 전환 : 모든 0.2S;} .no-touch .cbp-tm-submenu> a : 호버, .no-touch .cbp-tm-submenu> 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 : 이전 {position : 절대; 상단 : 50%; 마진 탑 : -0.5EM; 오른쪽 : 0.5EM;} .CBP-TM-MENU> li> A : NOT (: ONLE-Child) : 이전 {내용 : "/f0c9"; 글꼴 크기 : 60%; 불투명도 : 0.3;} .CBP-TM-ICON-ARCHIVE : 전 {content : "/e002";} .cbp-tm-icon-cog : evore {content : "/e003";} .cbp-tm-icon-users : {content : "/e004";} .cbp-tm-icon-arth : {content : "/e 005"; .CBP-TM-ICON-LOCATE : 전 {content : "/e006";} .cbp-tm-icon-mobile : {content : "/e007";} .cbp-tm-icon-screen : {content : "/e008";} .cbp-tm-icon-mail : "/e009"; .cbp-tm-icon-contract : {content : "/e00a";} .cbp-tm-icon-pencil : intent {content : "/e00b";} .cbp-tm-icon-article : {content : "/e00c";} .cbp-tm-icon-clock : "/e00d"; .CBP-TM-ICON-VIDEOS : 전 {컨텐츠 : "/e00e";} .CBP-TM-ICON-Pictures : 전 {컨텐츠 : "/e00f";} .cbp-tm-icon-link : {content : "/e010";} .cbp-tm-icon-refresh : "/e011";} 전 {content : "/e011";} .CBP-TM-ICON-HELP : 전 {content : "/e012";}/ * 미디어 쿼리 */@미디어 화면 및 (Max-width : 55.6875em) {.cbp-tm-menu {font-size : 80%; }} @Media 화면 및 (Max-Height : 25.25EM), 화면 및 (Max-width : 44.3125EM) {.CBP-TM-MENU {font-size : 100%; 위치 : 상대; 텍스트 정렬 : 센터; 패딩 : 0; 상단 : 자동; } .cbp-tm-menu> li {display : 블록; 여백 : 0; 국경 바닥 : 4px 고체 #3793ca; . } li.cbp-tm-show> a, .no-touch .cbp-tm-menu> a : 호버, .no-touch .cbp-tm-menu> a : active {color : #fff; 배경 : #02639D; } .cbp-tm-submenu {위치 : 상대; 디스플레이 : 없음; 너비 : 100%; } .cbp-tm-submenu> li {패딩 : 0; } .cbp-tm-submenu> li> a {패딩 : 0.6em 2.3em 0.6em 0.6em; 국경 : 없음; 국경 바닥 : 2px 고체 #6fbbe9; } .cbp-tm-submenu : {display : none; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {display : block; 너비 : 100%; 왼쪽 : 0; 여백 : 0; 패딩 : 0; 하단 : 자동; 상단 : 자동; }}자바 스크립트 코드
/** * 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) { 'strict'; var document = winde B. hasownproperty (key]) {a key] = b [key]}} // https.com/ryanve/response.js/blob/master/response.js getViewporth () 내부; else return 클라이언트} // http://stackoverflow.com/a/11396681/989439 eL) (e.type! cbptooltipmenu (el, 옵션) {this.el = els. this.menuitems = queryselectorall ( '#' + this.el.id + '> li'); {trigger.addeventListener ( 'click', function (ev) {self._handleclick (this, ev);} else {trigger.addeventListener ( 'click', function (this. this.parentNode.querySelector ( 'ul.cbp-tm-submenu')); el.addeventlistener ( '마우스 오버', function (ismouseleaveorenter (ev)) self._openmenu (}); ); }, _openMenu : function (el) {var self = this; 클리어 타임 아웃 (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 '; 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/mas 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 = item.querySelector ( 'ul.cbp-tm-submenu') // 처음 열린 one .. if. {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 : function (el) {// 뷰포트에 남은 공간을 확인하는 곳 : var vh = getViewporth (), ot = getOffset (el), spaceup = ot.top, spaceOn = vh -spaceup -el.offsetheight; return (spacedown <= spaceup? 'top': 'bottom'); }} // 글로벌 네임 스페이스 창에 추가하십시오 .cbptooltipmenu = cbptooltipmenu; } )( 창문 );위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.