首页 > 代码库 > javascript和css实现垂直方向自适应的三角提示菜单

javascript和css实现垂直方向自适应的三角提示菜单

2024-07-22 16:39:21   218人阅读

这是一个比较简单实用的菜单，最重要的是他不需要引用jQuery库。菜单在垂直方向上能做到自适应，当主菜单靠近顶部，子菜单将会在下面，当主菜单靠近底部，子菜单在上面。运用Modernizr的触摸检测功能，我们可以让子菜单的响应在pc上是hover，而在触摸设备上是点击。例子中还示范了如何在宽度比较窄的情况下如何调整布局。分享一个最好用的UI前端框架！

html代码：

.代码 
  1. <ul id="cbp-tm-menu" class="cbp-tm-menu">  
  2.     <li>  
  3.         <a href=http://www.mamicode.com/"#">Home</a>  
  4.     </li>  
  5.     <li>  
  6.         <a href=http://www.mamicode.com/"#">Veggie made</a>  
  7.         <ul class="cbp-tm-submenu">  
  8.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-archive">Sorrel desert</a></li>  
  9.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-cog">Raisin kakadu</a></li>  
  10.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-location">Plum salsify</a></li>  
  11.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-users">Bok choy celtuce</a></li>  
  12.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-earth">Onion endive</a></li>  
  13.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-location">Bitterleaf</a></li>  
  14.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>  
  15.         </ul>  
  16.     </li>  
  17.     <li>  
  18.         <a href=http://www.mamicode.com/"#">Pepper tatsoi</a>  
  19.         <ul class="cbp-tm-submenu">  
  20.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-archive">Brussels sprout</a></li>  
  21.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-cog">Kakadu lemon</a></li>  
  22.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-link">Juice green</a></li>  
  23.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-users">Wine fruit</a></li>  
  24.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-earth">Garlic mint</a></li>  
  25.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-location">Zucchini garnish</a></li>  
  26.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>  
  27.         </ul>  
  28.     </li>  
  29.     <li>  
  30.         <a href=http://www.mamicode.com/"#">Sweet melon</a>  
  31.         <ul class="cbp-tm-submenu">  
  32.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-screen">Sorrel desert</a></li>  
  33.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-mail">Raisin kakadu</a></li>  
  34.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-contract">Plum salsify</a></li>  
  35.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li>  
  36.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-article">Onion endive</a></li>  
  37.             <li><a href=http://www.mamicode.com/"#" class="cbp-tm-icon-clock">Bitterleaf</a></li>  
  38.         </ul>  
  39.     </li>  
  40. <a style="font-family: Arial; white-space: normal; background-color: #ffffff;" target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
  41.   
  42. </ul>  

 

css代码分享一个最好用的UI前端框架！

.代码 
  1. /* Iconfont made with icomoon.com */  
  2. @font-face {  
  3.     font-family: ‘cbp-tmicons‘;  
  4.     src:url(‘../fonts/tmicons/cbp-tmicons.eot‘);  
  5.     src:url(‘../fonts/tmicons/cbp-tmicons.eot?#iefix‘) format(‘embedded-opentype‘),  
  6.         url(‘../fonts/tmicons/cbp-tmicons.woff‘) format(‘woff‘),  
  7.         url(‘../fonts/tmicons/cbp-tmicons.ttf‘) format(‘truetype‘),  
  8.         url(‘../fonts/tmicons/cbp-tmicons.svg#cbp-tmicons‘) format(‘svg‘);  
  9.     font-weight: normal;  
  10.     font-style: normal;  
  11. }  
  12.                                                                                                                                                                                   
  13. /* reset  list style */  
  14. .cbp-tm-menu,  
  15. .cbp-tm-menu ul {  
  16.     list-style: none;  
  17. }  
  18.                                                                                                                                                                                   
  19. /* set menu position; change here to set to relative or float, etc. */  
  20. .cbp-tm-menu {  
  21.     display: block;  
  22.     position: absolute;  
  23.     z-index: 1000;  
  24.     bottom: 0;  
  25.     width: 100%;  
  26.     background: #47a3da;  
  27.     text-align: right;  
  28.     padding: 0 2em;  
  29.     margin: 0;  
  30.     text-transform: capitalize;  
  31. }  
  32.                                                                                                                                                                                   
  33. /* first level menu items */  
  34. .cbp-tm-menu > li {  
  35.     display: inline-block;  
  36.     margin: 0 2.6em;  
  37.     position: relative;  
  38. }  
  39.                                                                                                                                                                                   
  40. .cbp-tm-menu > li > a {  
  41.     line-height: 4em;  
  42.     padding: 0 0.3em;  
  43.     font-size: 1.2em;  
  44.     display: block;  
  45.     color: #fff;  
  46. }  
  47.                                                                                                     <a style="font-family: Arial;" target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
.代码 
  1. .no-touch .cbp-tm-menu > li > a:hover,  
  2. .no-touch .cbp-tm-menu > li > a:active {  
  3.     color: #02639d;  
  4. }  
  5.                                                                                                                                                                                   
  6. /* sumbenu with transitions */  
  7. .cbp-tm-submenu {  
  8.     position: absolute;  
  9.     display: block;  
  10.     visibility: hidden;  
  11.     opacity: 0;  
  12.     padding: 0;  
  13.     text-align: left;  
  14.     pointer-events: none;  
  15.     -webkit-transition: visibility 0s, opacity 0s;  
  16.     -moz-transition: visibility 0s, opacity 0s;  
  17.     transition: visibility 0s, opacity 0s;  
  18. }  
  19.                                                                                                                                                                                   
  20. .cbp-tm-show .cbp-tm-submenu {  
  21.     width: 16em;  
  22.     left: 50%;  
  23.     margin: 0 0 0 -8em;  
  24.     opacity: 1;  
  25.     visibility: visible;  
  26.     pointer-events: auto;  
  27.     -webkit-transition: visibility 0s, opacity 0.3s;  
  28.     -moz-transition: visibility 0s, opacity 0.3s;  
  29.     transition: visibility 0s, opacity 0.3s;  
  30. }  
  31.                                                                                                                                                                                   
  32. .cbp-tm-show-above .cbp-tm-submenu {  
  33.     bottom: 100%;  
  34.     padding-bottom: 10px;  
  35. }  
  36.                                                                                                                                                                                   
  37. .cbp-tm-show-below .cbp-tm-submenu {  
  38.     top: 100%;  
  39.     padding-top: 10px;  
  40. }  
  41.                                                                                                                                                                                   
  42. /* extreme cases: not enough space on the sides */  
  43. .cbp-tm-nospace-right .cbp-tm-submenu {  
  44.     right: 0;  
  45.     left: auto;  
  46. }  
  47.                                                                                                                                                                                   
  48. .cbp-tm-nospace-left .cbp-tm-submenu {  
  49.     left: 0;  
  50. }  
  51.                                                                                                           <a style="font-family: Arial;" target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
.代码 
  1. /* last menu item has to fit on the screen */  
  2. .cbp-tm-menu > li:last-child .cbp-tm-submenu {  
  3.     right: 0;  
  4. }  
  5.                                                                                                                                                                                   
  6. /*  
  7. arrow: depending on where the menu will be shown, we set  
  8. the right position for the arrow  
  9. */  
  10.                                                                                                                                                                                   
  11. .cbp-tm-submenu:after {  
  12.     border: solid transparent;  
  13.     content: " ";  
  14.     height: 0;  
  15.     width: 0;  
  16.     position: absolute;  
  17.     pointer-events: none;  
  18. }  
  19.                                                                                                                                                                                   
  20. .cbp-tm-show-above .cbp-tm-submenu:after {  
  21.     top: 100%;  
  22.     margin-top: -10px;  
  23. }  
  24.                                                                                                                                                                                   
  25. .cbp-tm-show-below .cbp-tm-submenu:after {  
  26.     bottom: 100%;  
  27.     margin-bottom: -10px;  
  28. }  
  29.                                                                                                                                                                                   
  30. .cbp-tm-submenu:after {  
  31.     border-color: transparent;  
  32.     border-width: 16px;  
  33.     margin-left: -16px;  
  34.     left: 50%;  
  35. }  
  36.                                                                                                                                                                                   
  37. .cbp-tm-show-above .cbp-tm-submenu:after {  
  38.     border-top-color: #fff;  
  39. }  
  40.                                                                                                                                                                                   
  41. .cbp-tm-show-below .cbp-tm-submenu:after {  
  42.     border-bottom-color: #fff;  
  43. }  
  44.                                                                                                                                                                                   
  45. .cbp-tm-submenu > li {  
  46.     display: block;  
  47.     background: #fff;  
  48. }  
  49.                                                                                                                                                                                   
  50. .cbp-tm-submenu > li > a {  
  51.     padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in ‘em‘ cause a tiny "jump" in Chrome on Win */  
  52.     display: block;  
  53.     font-size: 1.2em;  
  54.     position: relative;  
  55.     color: #47a3da;  
  56.     border: 4px solid #fff;  
  57.     -webkit-transition: all 0.2s;  
  58.     -moz-transition: all 0.2s;  
  59.     transition: all 0.2s;  
  60. }  
  61.                                                                                                                                                                                   
  62. .no-touch .cbp-tm-submenu > li > a:hover,  
  63. .no-touch .cbp-tm-submenu > li > a:active {  
  64.     color: #fff;  
  65.     background: #47a3da;  
  66. }  
  67.                                                                                                                                                                                   
  68. /* the icons (main level menu icon and sublevel icons) */  
  69. .cbp-tm-submenu li a:before,  
  70. .cbp-tm-menu > li > a:before {  
  71.     font-family: ‘cbp-tmicons‘;  
  72.     speak: none;  
  73.     font-style: normal;  
  74.     font-weight: normal;  
  75.     font-variant: normal;  
  76.     text-transform: none;  
  77.     line-height: 1;  
  78.     vertical-align: middle;  
  79.     margin-right: 0.6em;  
  80.     -webkit-font-smoothing: antialiased;  
  81. }  
  82.                                                                                                               <a style="font-family: Arial;" target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
.代码 
  1. .cbp-tm-submenu li a:before {  
  2.     position: absolute;  
  3.     top: 50%;  
  4.     margin-top: -0.5em;  
  5.     right: 0.5em;  
  6. }  
  7.                                                                                                                                                                                   
  8. .cbp-tm-menu > li > a:not(:only-child):before {  
  9.     content: "\f0c9";  
  10.     font-size: 60%;  
  11.     opacity: 0.3;  
  12. }  
  13.                                                                                                                                                                                   
  14. .cbp-tm-icon-archive:before {  
  15.     content: "\e002";  
  16. }  
  17.                                                                                                                                                                                   
  18. .cbp-tm-icon-cog:before {  
  19.     content: "\e003";  
  20. }  
  21.                                                                                                                                                                                   
  22. .cbp-tm-icon-users:before {  
  23.     content: "\e004";  
  24. }  
  25.                                                                                                                                                                                   
  26. .cbp-tm-icon-earth:before {  
  27.     content: "\e005";  
  28. }  
  29.                                                                                                                                                                                   
  30. .cbp-tm-icon-location:before {  
  31.     content: "\e006";  
  32. }  
  33.                                                                                                                                                                                   
  34. .cbp-tm-icon-mobile:before {  
  35.     content: "\e007";  
  36. }  
  37.                                                                                                                                                                                   
  38. .cbp-tm-icon-screen:before {  
  39.     content: "\e008";  
  40. }  
  41.                                                                                                                                                                                   
  42. .cbp-tm-icon-mail:before {  
  43.     content: "\e009";  
  44. }  
  45.                                                                                                                                                                                   
  46. .cbp-tm-icon-contract:before {  
  47.     content: "\e00a";  
  48. }  
  49.                                                                                                                                                                                   
  50. .cbp-tm-icon-pencil:before {  
  51.     content: "\e00b";  
  52. }  
  53.                                                                                                                                                                                   
  54. .cbp-tm-icon-article:before {  
  55.     content: "\e00c";  
  56. }  
  57.                                                                                                                                                                                   
  58. .cbp-tm-icon-clock:before {  
  59.     content: "\e00d";  
  60. }  
  61.                                                                                                                                                                                   
  62. .cbp-tm-icon-videos:before {  
  63.     content: "\e00e";  
  64. }  
  65.                                                                                                                                                                                   
  66. .cbp-tm-icon-pictures:before {  
  67.     content: "\e00f";  
  68. }  
  69.                                                                                                                                                                                   
  70. .cbp-tm-icon-link:before {  
  71.     content: "\e010";  
  72. }  
  73.                                                                                                                                                                                   
  74. .cbp-tm-icon-refresh:before {  
  75.     content: "\e011";  
  76. }  
  77.                                                                                                                                                                                   
  78. .cbp-tm-icon-help:before {  
  79.     content: "\e012";  
  80. }  
  81.                                                                                                                                                                                   
  82. /* Media Queries */  
  83. @media screen and (max-width: 55.6875em) {  
  84.     .cbp-tm-menu {  
  85.         font-size: 80%;  
  86.     }  
  87. }  
  88.                                                                                                               <a style="font-family: Arial;" target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
.代码 
  1. @media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) {  
  2.                                                                                                                                                                                   
  3.     .cbp-tm-menu {  
  4.         font-size: 100%;  
  5.         position: relative;  
  6.         text-align: center;  
  7.         padding: 0;  
  8.         top: auto;  
  9.     }  
  10.                                                                                                                                                                                   
  11.     .cbp-tm-menu > li {  
  12.         display: block;  
  13.         margin: 0;  
  14.         border-bottom: 4px solid #3793ca;  
  15.     }  
  16.                                                                                                                                                                                   
  17.     .cbp-tm-menu > li:first-child {  
  18.         border-top: 4px solid #3793ca;  
  19.     }  
  20.                                                                                                                                                                                   
  21.     li.cbp-tm-show > a,  
  22.     .no-touch .cbp-tm-menu > li > a:hover,  
  23.     .no-touch .cbp-tm-menu > li > a:active {  
  24.         color: #fff;  
  25.         background: #02639d;  
  26.     }  
  27.                                                                                                                                                                                   
  28.     .cbp-tm-submenu {  
  29.         position: relative;  
  30.         display: none;  
  31.         width: 100%;  
  32.     }  
  33.                                                                                                                                                                                   
  34.     .cbp-tm-submenu > li {  
  35.         padding: 0;  
  36.     }  
  37.                                                                                                                                                                                   
  38.     .cbp-tm-submenu > li > a {  
  39.         padding: 0.6em 2.3em 0.6em 0.6em;  
  40.         border: none;  
  41.         border-bottom: 2px solid #6fbbe9;  
  42.     }  
  43.                                                                                                                                                                                   
  44.     .cbp-tm-submenu:after {  
  45.         display: none;  
  46.     }  
  47.                                                                                                                                                                                   
  48.     .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {  
  49.         display: block;  
  50.         width: 100%;  
  51.         left: 0;  
  52.         margin: 0;  
  53.         padding: 0;  
  54.         bottom: auto;  
  55.         top: auto;  
  56.     }  
  57.                                                                                                                                                                                       
  58. }  

 

javascript代码

.代码 
  1. /**  
  2.  * cbpTooltipMenu.js v1.0.0  
  3.  * http://www.codrops.com  
  4.  *  
  5.  * Licensed under the MIT license.  
  6.  * http://www.opensource.org/licenses/mit-license.php  
  7.  *  
  8.  * Copyright 2013, Codrops  
  9.  * http://www.codrops.com  
  10.  */  
  11. ;( function( window ) {  
  12.                                                                                                                                                                                 
  13.     ‘use strict‘;  
  14.                                                                                                                                                                             
  15.     var document = window.document,  
  16.         docElem = document.documentElement;  
  17.                                                                                                                                                                             
  18.     function extend( a, b ) {  
  19.         for( var key in b ) {  
  20.             if( b.hasOwnProperty( key ) ) {  
  21.                 a[key] = b[key];  
  22.             }  
  23.         }  
  24.         return a;  
  25.     }  
  26.                                                                                                                                                                             
  27.     // from https://github.com/ryanve/response.js/blob/master/response.js  
  28.     function getViewportH() {  
  29.         var client = docElem[‘clientHeight‘],  
  30.             inner = window[‘innerHeight‘];  
  31.         if( client < inner )  
  32.             return inner;  
  33.         else  
  34.             return client;  
  35.     }  
  36.                                                                                                                                                                             
  37.     // http://stackoverflow.com/a/11396681/989439  
  38.     function getOffset( el ) {  
  39.         return el.getBoundingClientRect();  
  40.     }  
  41.                                                                                                                                                                             
  42.     // http://snipplr.com/view.php?codeview&id=5259  
  43.     function isMouseLeaveOrEnter(e, handler) {  
  44.         if (e.type != ‘mouseout‘ && e.type != ‘mouseover‘) return false;  
  45.         var reltg = e.relatedTarget ? e.relatedTarget :  
  46.         e.type == ‘mouseout‘ ? e.toElement : e.fromElement;  
  47.         while (reltg && reltg != handler) reltg = reltg.parentNode;  
  48.         return (reltg != handler);  
  49.     }  
  50.                                                                                                                                                                             
  51.     function cbpTooltipMenu( el, options ) {  
  52.         this.el = el;  
  53.         this.options = extend( this.defaults, options );  
  54.         this._init();  
  55.     }  
  56.                                                                                                                <a target="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
.代码 
  1. cbpTooltipMenu.prototype = {  
  2.     defaults : {  
  3.         // add a timeout to avoid the menu to open instantly  
  4.         delayMenu : 100  
  5.     },  
  6.     _init : function() {  
  7.         this.touch = Modernizr.touch;  
  8.         this.menuItems = document.querySelectorAll( ‘#‘ + this.el.id + ‘ > li‘ );  
  9.         this._initEvents();  
  10.     },  
  11.     _initEvents : function() {  
  12.                                                                                                                                                                                     
  13.         var self = this;  
  14.                                                                                                                                                                         
  15.         Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {  
  16.             var trigger = el.querySelector( ‘a‘ );  
  17.             if( self.touch ) {  
  18.                 trigger.addEventListener( ‘click‘, function( ev ) { self._handleClick( this, ev ); } );  
  19.             }  
  20.             else {  
  21.                 trigger.addEventListener( ‘click‘, function( ev ) {  
  22.                     if( this.parentNode.querySelector( ‘ul.cbp-tm-submenu‘ ) ) {  
  23.                         ev.preventDefault();  
  24.                     }  
  25.                 } );  
  26.                 el.addEventListener( ‘mouseover‘, function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._openMenu( this ); } );  
  27.                 el.addEventListener( ‘mouseout‘, function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._closeMenu( this ); } );  
  28.             }  
  29.         } );  
  30.                                                                                                                                                                         
  31.     },  
  32.     _openMenu : function( el ) {  
  33.                                                                                                                                                                         
  34.         var self = this;  
  35.         clearTimeout( this.omtimeout );  
  36.         this.omtimeout = setTimeout( function() {  
  37.             var submenu = el.querySelector( ‘ul.cbp-tm-submenu‘ );  
  38.                                                                                                                                                                         
  39.             if( submenu ) {  
  40.                 el.className = ‘cbp-tm-show‘;  
  41.                 if( self._positionMenu( el ) === ‘top‘ ) {  
  42.                     el.className += ‘ cbp-tm-show-above‘;  
  43.                 }  
  44.                 else {  
  45.                     el.className += ‘ cbp-tm-show-below‘;  
  46.                 }  
  47.             }  
  48.         }, this.touch ? 0 : this.options.delayMenu );  
  49.                                                                                                                                                                         
  50.     },  
  51.     _closeMenu : function( el ) {  
  52.                                                                                                                                                                                     
  53.         clearTimeout( this.omtimeout );  
  54.                                                                                                                                                                         
  55.         var submenu = el.querySelector( ‘ul.cbp-tm-submenu‘ );  
  56.                                                                                                                                                                         
  57.         if( submenu ) {  
  58.             // based on https://github.com/desandro/classie/blob/master/classie.js  
  59.             el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show" + "(\\s+|$)"), ‘ ‘);  
  60.             el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show-below" + "(\\s+|$)"), ‘ ‘);  
  61.             el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show-above" + "(\\s+|$)"), ‘ ‘);  
  62.         }  
  63.                                                                                                                                                                         
  64.     },  
  65.     _handleClick : function( el, ev ) {  
  66.         var item = el.parentNode,  
  67.             items = Array.prototype.slice.call( this.menuItems ),  
  68.             submenu = item.querySelector( ‘ul.cbp-tm-submenu‘ )  
  69.                                                                                                                                                                         
  70.         // first close any opened one..  
  71.         if( this.current &&  items.indexOf( item ) !== this.current ) {  
  72.             this._closeMenu( this.el.children[ this.current ] );  
  73.             this.el.children[ this.current ].querySelector( ‘ul.cbp-tm-submenu‘ ).setAttribute( ‘data-open‘, ‘false‘ );  
  74.         }  
  75.                                                                                                                                                                         
  76.         if( submenu ) {  
  77.             ev.preventDefault();  
  78.                                                                                                                                                                         
  79.             var isOpen = submenu.getAttribute( ‘data-open‘ );  
  80.                                                                                                                                                                         
  81.             if( isOpen === ‘true‘ ) {  
  82.                 this._closeMenu( item );  
  83.                 submenu.setAttribute( ‘data-open‘, ‘false‘ );  
  84.             }  
  85.             else {  
  86.                 this._openMenu( item );  
  87.                 this.current = items.indexOf( item );  
  88.                 submenu.setAttribute( ‘data-open‘, ‘true‘ );  
  89.             }  
  90.         }  
  91.                                                                                                                                                                         
  92.     },  
  93. arget="_blank" href=http://www.mamicode.com/"/topic/1132907">前端UI分享</a>  
  94.   
  95.     _positionMenu : function( el ) {  
  96.         // checking where‘s more space left in the viewport: above or below the element  
  97.         var vH = getViewportH(),  
  98.             ot = getOffset(el),  
  99.             spaceUp = ot.top ,  
  100.             spaceDown = vH - spaceUp - el.offsetHeight;  
  101.                                                                                                                                                                                     
  102.         return ( spaceDown <= spaceUp ? ‘top‘ : ‘bottom‘ );  
  103.     }  
  104. }  
  105.                                                                                                                                                                         
  106. // add to global namespace  
  107. window.cbpTooltipMenu = cbpTooltipMenu;  
  108.                                                                                                                                                                         
  109.  window );  

javascript和css实现垂直方向自适应的三角提示菜单


联系
我们