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 );

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
You might like
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
php生成word并下载代码实例
2019/03/15 PHP
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
《最可爱的人》教学反思
2014/02/14 职场文书
高中生家长寄语大全
2014/04/03 职场文书
中学生励志演讲稿
2014/04/26 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
故宫英文导游词
2015/01/31 职场文书
老乡聚会通知
2015/04/23 职场文书
亮剑观后感500字
2015/06/05 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python