首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 26, 2016

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

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

html代码

<ul id="cbp-tm-menu" class="cbp-tm-menu">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Veggie made</a>
    <ul class="cbp-tm-submenu">
      <li><a href="#" class="cbp-tm-icon-archive">Sorrel desert</a></li>
      <li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</a></li>
      <li><a href="#" class="cbp-tm-icon-location">Plum salsify</a></li>
      <li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</a></li>
      <li><a href="#" class="cbp-tm-icon-earth">Onion endive</a></li>
      <li><a href="#" class="cbp-tm-icon-location">Bitterleaf</a></li>
      <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Pepper tatsoi</a>
    <ul class="cbp-tm-submenu">
      <li><a href="#" class="cbp-tm-icon-archive">Brussels sprout</a></li>
      <li><a href="#" class="cbp-tm-icon-cog">Kakadu lemon</a></li>
      <li><a href="#" class="cbp-tm-icon-link">Juice green</a></li>
      <li><a href="#" class="cbp-tm-icon-users">Wine fruit</a></li>
      <li><a href="#" class="cbp-tm-icon-earth">Garlic mint</a></li>
      <li><a href="#" class="cbp-tm-icon-location">Zucchini garnish</a></li>
      <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Sweet melon</a>
    <ul class="cbp-tm-submenu">
      <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li>
      <li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</a></li>
      <li><a href="#" class="cbp-tm-icon-contract">Plum salsify</a></li>
      <li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li>
      <li><a href="#" class="cbp-tm-icon-article">Onion endive</a></li>
      <li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</a></li>
    </ul>
  </li>
</ul>

css代码

/* Iconfont made with icomoon.com */
@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.ttf') format('truetype'),
    url('../fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
                                                                                  
/* reset list style */
.cbp-tm-menu,
.cbp-tm-menu ul {
  list-style: none;
}
                                                                                  
/* set menu position; change here to set to relative or float, etc. */
.cbp-tm-menu {
  display: block;
  position: absolute;
  z-index: 1000;
  bottom: 0;
  width: 100%;
  background: #47a3da;
  text-align: right;
  padding: 0 2em;
  margin: 0;
  text-transform: capitalize;
}
                                                                                  
/* first level menu items */
.cbp-tm-menu > li {
  display: inline-block;
  margin: 0 2.6em;
  position: relative;
}
                                                                                  
.cbp-tm-menu > li > a {
  line-height: 4em;
  padding: 0 0.3em;
  font-size: 1.2em;
  display: block;
  color: #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 {
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  padding: 0;
  text-align: left;
  pointer-events: none;
  -webkit-transition: visibility 0s, opacity 0s;
  -moz-transition: visibility 0s, opacity 0s;
  transition: visibility 0s, opacity 0s;
}
                                                                                  
.cbp-tm-show .cbp-tm-submenu {
  width: 16em;
  left: 50%;
  margin: 0 0 0 -8em;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: visibility 0s, opacity 0.3s;
  -moz-transition: visibility 0s, opacity 0.3s;
  transition: visibility 0s, opacity 0.3s;
}
                                                                                  
.cbp-tm-show-above .cbp-tm-submenu {
  bottom: 100%;
  padding-bottom: 10px;
}
                                                                                  
.cbp-tm-show-below .cbp-tm-submenu {
  top: 100%;
  padding-top: 10px;
}
                                                                                  
/* extreme cases: not enough space on the sides */
.cbp-tm-nospace-right .cbp-tm-submenu {
  right: 0;
  left: auto;
}
                                                                                  
.cbp-tm-nospace-left .cbp-tm-submenu {
  left: 0;
}
                                                                                  
/* last menu item has to fit on the screen */
.cbp-tm-menu > li:last-child .cbp-tm-submenu {
  right: 0;
}
                                                                                  
/*
arrow: depending on where the menu will be shown, we set
the right position for the arrow
*/
                                                                                  
.cbp-tm-submenu:after {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
                                                                                  
.cbp-tm-show-above .cbp-tm-submenu:after {
  top: 100%;
  margin-top: -10px;
}
                                                                                  
.cbp-tm-show-below .cbp-tm-submenu:after {
  bottom: 100%;
  margin-bottom: -10px;
}
                                                                                  
.cbp-tm-submenu:after {
  border-color: transparent;
  border-width: 16px;
  margin-left: -16px;
  left: 50%;
}
                                                                                  
.cbp-tm-show-above .cbp-tm-submenu:after {
  border-top-color: #fff;
}
                                                                                  
.cbp-tm-show-below .cbp-tm-submenu:after {
  border-bottom-color: #fff;
}
                                                                                  
.cbp-tm-submenu > li {
  display: block;
  background: #fff;
}
                                                                                  
.cbp-tm-submenu > li > a {
  padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in 'em' cause a tiny "jump" in Chrome on Win */
  display: block;
  font-size: 1.2em;
  position: relative;
  color: #47a3da;
  border: 4px solid #fff;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
                                                                                  
.no-touch .cbp-tm-submenu > li > a:hover,
.no-touch .cbp-tm-submenu > li > a:active {
  color: #fff;
  background: #47a3da;
}
                                                                                  
/* the icons (main level menu icon and sublevel icons) */
.cbp-tm-submenu li a:before,
.cbp-tm-menu > li > a:before {
  font-family: 'cbp-tmicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.6em;
  -webkit-font-smoothing: antialiased;
}
                                                                                  
.cbp-tm-submenu li a:before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  right: 0.5em;
}
                                                                                  
.cbp-tm-menu > li > a:not(:only-child):before {
  content: "\f0c9";
  font-size: 60%;
  opacity: 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-earth:before {
  content: "\e005";
}
                                                                                  
.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:before {
  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-icon-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-refresh:before {
  content: "\e011";
}
                                                                                  
.cbp-tm-icon-help:before {
  content: "\e012";
}
                                                                                  
/* Media Queries */
@media screen and (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%;
    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();
  }
                                                                               
  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' );
        }
      }
                                                                               
    },
    _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 css实现垂直方向自适应的三角提示菜单

- Author -

jianghejie123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 #Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 #Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 #Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 #Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 #Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 #Javascript
pygame(3) map(4) 结构体(1) DFA(1) Slice(1) linux(15) 指针(1) WeUI(1) random(1) 切片(1)
You might like
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python实现浪漫的烟花秀
2019/01/30 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
物流管理专业职业生涯规划书
2014/01/06 职场文书
初三家长会邀请函
2014/01/18 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
责任书格式范文
2014/07/28 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
安全教育的主题班会
2015/08/13 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
以下牛机，你有几个
2022/04/05 无线电
SQL Server中使用表变量和临时表
2022/05/20 SQL Server