javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单_js

上一篇: javascript代码实例教程-js获取s... 下一篇:javascript代码实例教程-Android...

javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单

发布时间：2019-01-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

htML代码：

.代码

- Home
- Veggie made
- - Sorrel desert
  - Raisin kakadu
  - Plum salsify
  - Bok choy celtuce
  - Onion enPE
  - BITterleaf
  - Sea @L_126_1@tuce
- Pepper tatsoi
- - brussels sPRout
  - Kakadu lemon
  - Juice green
  - @R_673_2406@ fruit
  - Garlic mint
  - Zucchini garnish
  - Sea lettuce
- Sweet melon
- - Sorrel desert
  - Raisin kakadu
  - Plum salsify
  - Bok choy celtuce
  - Onion enpe
  - Bitterleaf
- 前端UI分享
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. }
13. /* reset list style */
14. .cbp-tm-menu,
15. .cbp-tm-menu ul {
16. list-style: none;
17. }
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. }
33. /* First level menu items */
34. .cbp-tm-menu > li {
35. display: inline-block;
36. margin: 0 2.6em;
37. position: relative;
38. }
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. 前端UI分享 .代码
  1. .no-touch .cbp-tm-menu > li > a:hover,
  2. .no-touch .cbp-tm-menu > li > a:active {
  3. color: #02639d;
  4. }
  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. }
  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. }
  32. .cbp-tm-show-above .cbp-tm-submenu {
  33. bottom: 100%;
  34. padding-bottom: 10px;
  35. }
  37. .cbp-tm-show-below .cbp-tm-submenu {
  38. top: 100%;
  39. padding-top: 10px;
  40. }
  42. /* extreme cases: not enough space on the sides */
  43. .cbp-tm-nospace-right .cbp-tm-submenu {
  44. right: 0;
  45. left: auto;
  46. }
  48. .cbp-tm-nospace-left .cbp-tm-submenu {
  49. left: 0;
  50. }
  51. 前端UI分享 .代码
    1. /* last menu item has to fit on the screen */
    2. .cbp-tm-menu > li:last-child .cbp-tm-submenu {
    3. right: 0;
    4. }
    6. /*
    7. arrow: depending on where the menu will be shown, we set
    8. the right position for the arrow
    9. */
    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. }
    20. .cbp-tm-show-above .cbp-tm-submenu:after {
    21. top: 100%;
    22. margin-top: -10px;
    23. }
    25. .cbp-tm-show-below .cbp-tm-submenu:after {
    26. bottom: 100%;
    27. margin-bottom: -10px;
    28. }
    30. .cbp-tm-submenu:after {
    31. border-color: transparent;
    32. border-width: 16px;
    33. margin-left: -16px;
    34. left: 50%;
    35. }
    37. .cbp-tm-show-above .cbp-tm-submenu:after {
    38. border-top-color: #fff;
    39. }
    41. .cbp-tm-show-below .cbp-tm-submenu:after {
    42. border-bottom-color: #fff;
    43. }
    45. .cbp-tm-submenu > li {
    46. display: block;
    47. background: #fff;
    48. }
    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. }
    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. }
    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. 前端UI分享 .代码
      1. .cbp-tm-submenu li a:before {
      2. position: absolute;
      3. top: 50%;
      4. margin-top: -0.5em;
      5. right: 0.5em;
      6. }
      8. .cbp-tm-menu > li > a:not(:only-child):before {
      9. content: "/f0c9";
      10. font-size: 60%;
      11. opacity: 0.3;
      12. }
      14. .cbp-tm-icon-Archive:before {
      15. content: "/e002";
      16. }
      18. .cbp-tm-icon-cog:before {
      19. content: "/e003";
      20. }
      22. .cbp-tm-icon-users:before {
      23. content: "/e004";
      24. }
      26. .cbp-tm-icon-earth:before {
      27. content: "/e005";
      28. }
      30. .cbp-tm-icon-location:before {
      31. content: "/e006";
      32. }
      34. .cbp-tm-icon-mobile:before {
      35. content: "/e007";
      36. }
      38. .cbp-tm-icon-screen:before {
      39. content: "/e008";
      40. }
      42. .cbp-tm-icon-mail:before {
      43. content: "/e009";
      44. }
      46. .cbp-tm-icon-contract:before {
      47. content: "/e00a";
      48. }
      50. .cbp-tm-icon-pencil:before {
      51. content: "/e00b";
      52. }
      54. .cbp-tm-icon-article:before {
      55. content: "/e00c";
      56. }
      58. .cbp-tm-icon-clock:before {
      59. content: "/e00d";
      60. }
      62. .cbp-tm-icon-videos:before {
      63. content: "/e00e";
      64. }
      66. .cbp-tm-icon-pictures:before {
      67. content: "/e00f";
      68. }
      70. .cbp-tm-icon-link:before {
      71. content: "/e010";
      72. }
      74. .cbp-tm-icon-refresh:before {
      75. content: "/e011";
      76. }
      78. .cbp-tm-icon-help:before {
      79. content: "/e012";
      80. }
      82. /* Media Queries */
      83. @media screen and (max-width: 55.6875em) {
      84. .cbp-tm-menu {
      85. font-size: 80%;
      86. }
      87. }
      88. 前端UI分享 .代码
        
        @media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) {
        
        .cbp-tm-menu {
        font-size: 100%;
        position: relative;
        text-align: center;
        padding: 0;
        top: auto;
        }
        
        .cbp-tm-menu > li {
        display: block;
        margin: 0;
        border-bottom: 4px solid #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;
        background: #02639d;
        }
        
        .cbp-tm-submenu {
        position: relative;
        display: none;
        width: 100%;
        }
        
        .cbp-tm-submenu > li {
        padding: 0;
        }
        
        .cbp-tm-submenu > li > a {
        padding: 0.6em 2.3em 0.6em 0.6em;
        border: none;
        border-bottom: 2px solid #6fbbe9;
        }
        
        .cbp-tm-submenu:after {
        display: none;
        }
        
        .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
        display: block;
        width: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        bottom: auto;
        top: auto;
        }
        
        }
        
        javascript代码
        .代码
        
        /**
        * cbpTooltipMenu.js v1.0.0
        * http://www.codrops.com
        *
        * Licensed under the MIT license.
        * http://www.opensource.org/licenses/mit-license.php
        *
        * Copyright 2013, Codrops
        * http://www.codrops.com
        */
        ;( function( window ) {
        
        'use strict';
        
        var document = window.document,
        docElem = document.documentElement;
        
        function extend( a, b ) {
        for( var key in b ) {
        if( b.hasOwnProperty( key ) ) {
        a[key] = b[key];
        }
        }
        return a;
        }
        
        // From https://github.com/ryanve/response.js/blob/master/response.js
        function getViewportH() {
        var client = docElem['clientHeight'],
        inner = window['innerHeight'];
        if( client < inner )
        return inner;
        else
        return client;
        }
        
        // http://stackoverflow.com/a/11396681/989439
        function getOffset( el ) {
        return el.getBoundingClientRect();
        }
        
        // http://snipplr.com/view.php?codeview&id=5259
        function isMouseLeaveOrEnter(e, handler) {
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;
        var reltg = e.relatedTarget ? e.relatedTarget :
        e.type == 'mouseout' ? e.toElement : e.fromElement;
        while (reltg && reltg != handler) reltg = reltg.parentNode;
        return (reltg != handler);
        }
        
        function cbpTooltipMenu( el, options ) {
        this.el = el;
        this.options = extend( this.defaults, options );
        this._init();
        }
        前端UI分享 .代码
        
        cbpTooltipMenu.prototype = {
        defaults : {
        // add a timeout to avoid the menu to open instantly
        delayMenu : 100
        },
        _init : function() {
        this.touch = Modernizr.touch;
        this.menuItems = document.querySelectorAll( '#' + this.el.id + ' > li' );
        this._initEvents();
        },
        _initEvents : function() {
        
        var self = this;
        
        Array.prototype.slice.call( this.menuItems ).foreach( function( el, i ) {
        var trigger = el.querySelector( 'a' );
        if( self.touch ) {
        trigger.addEventListener( 'click', function( ev ) { self._handleClick( this, ev ); } );
        }
        else {
        trigger.addEventListener( 'click', function( ev ) {
        if( this.parentNode.querySelector( 'ul.cbp-tm-submenu' ) ) {
        ev.preventDefault();
        }
        } );
        el.addEventListener( 'mouseover', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._openMenu( this ); } );
        el.addEventListener( 'mouseout', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) 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-tm-show-above';
        }
        else {
        el.className += ' cbp-tm-show-below';
        }
        }
        }, this.touch ? 0 : this.options.delayMenu );
        
        },
        _closeMenu : function( el ) {
        
        clearTimeout( this.omtimeout );
        
        var submenu = el.querySelector( 'ul.cbp-tm-submenu' );
        
        if( submenu ) {
        // based on https://github.com/desandro/classie/blob/master/classie.js
        el.className = el.className.replace(new RegExp("(^|//s+)" + "cbp-tm-show" + "(//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' )
        
        // first close any opened one..
        if( this.current && items.indexOf( item ) !== this.current ) {
        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' );
        }
        }
        
        },
        arget="_blank" href="http://blog.csdn.net/topic/1132907">前端UI分享
        
        _positionMenu : function( el ) {
        // checking where's more space left in the viewport: above or below the element
        var vH = getViewportH(),
        ot = getOffset(el),
        spaceUp = ot.top ,
        spaceDown = vH - spaceUp - el.offsetHeight;
        
        return ( spaceDown <= spaceUp ? 'top' : 'bottom' );
        }
        }
        
        // add to global namespace
        window.cbpTooltipMenu = cbpTooltipMenu;
        
        window );
        觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
        脚本宝典总结
        
        以上是脚本宝典为你收集整理的javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单全部内容，希望文章能够帮你解决javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单所遇到的问题。
        
        如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
        
        本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
        如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: javascript代码实例教程-js获取s... 下一篇:javascript代码实例教程-Android...

猜你在找的js相关文章

全站导航更多

javascript代码实例教程-javascript和css实现垂直方向自适应的三角提示菜单

脚本宝典总结