您现在的位置是：网站首页> 编程资料编程资料
HTML+CSS3+JS 实现的下拉菜单CSS3贝塞尔曲线示例：创建链接悬停动画效果css3悬停按钮-CSS3鼠标悬停按钮阴影缩放特效代码CSS3 实现时间轴动画CSS3实现菜单悬停效果详解CSS3：overflow属性详解css3中的伪类before和after常见用法CSS3+HTML5+JS 实现一个块的收缩与展开动画效果10种CSS3实现的loading动画，挑一个走吧？CSS3实现带剪切动画的幻灯片特效代码详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2021-09-03
844人已围观
简介 这篇文章主要介绍了HTML+CSS3+JS 如何实现下拉菜单，帮助大家更好的理解和使用CSS3特效，感兴趣的朋友可以了解下
实现效果
html
Dropdown Menu
See this same menu only with CSS3: https://codepen.io/pedronauck/pen/jaluz
css
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900"); @import url(https://fonts.googleapis.com/css?family=Pacifico); body { font-family: "Lato", Helvetica, Arial; font-size: 16px; } .text-center { text-align: center; } *, *:before, *:after { -webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box; } .container { width: 350px; margin: 50px auto; } .container > ul { list-style: none; padding: 0; margin: 0 0 20px 0; } .title { font-family: 'Pacifico'; font-weight: norma; font-size: 40px; text-align: center; line-height: 1.4; color: #2980B9; } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: white; background: #2980B9; -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); padding: 10px; } .dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } .dropdown .icon-arrow { position: absolute; display: block; font-size: 0.7em; color: #fff; top: 14px; right: 10px; } .dropdown .icon-arrow.open { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow.close { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow:before { content: '\25BC'; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; color: #6f6f6f; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; } .dropdown .dropdown-menu li a:hover { background: #f6f6f6; } .dropdown .show, .dropdown .hide { -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .dropdown .show { display: block; max-height: 9999px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); animation: showAnimation 0.5s ease-in-out; -moz-animation: showAnimation 0.5s ease-in-out; -webkit-animation: showAnimation 0.5s ease-in-out; -moz-transition: max-height 1s ease-in-out; -o-transition: max-height 1s ease-in-out; -webkit-transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out; } .dropdown .hide { max-height: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); animation: hideAnimation 0.4s ease-out; -moz-animation: hideAnimation 0.4s ease-out; -webkit-animation: hideAnimation 0.4s ease-out; -moz-transition: max-height 0.6s ease-out; -o-transition: max-height 0.6s ease-out; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; } @keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-moz-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } js
// Dropdown Menu var dropdown = document.querySelectorAll('.dropdown'); var dropdownArray = Array.prototype.slice.call(dropdown,0); dropdownArray.forEach(function(el){ var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow'); button.onclick = function(event) { if(!menu.hasClass('show')) { menu.classList.add('show'); menu.classList.remove('hide'); arrow.classList.add('open'); arrow.classList.remove('close'); event.preventDefault(); } else { menu.classList.remove('show'); menu.classList.add('hide'); arrow.classList.remove('open'); arrow.classList.add('close'); event.preventDefault(); } }; }) Element.prototype.hasClass = function(className) { return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); };以上就是HTML+CSS3+JS 实现的下拉菜单的详细内容，更多关于HTML+CSS3+JS 下拉菜单的资料请关注其它相关文章！
相关内容
- CSS3 实现倒计时效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- css样式常见图形效果展示的实例代码使用CSS的clip-path属性实现不规则图形的显示使用css实现特殊标志或图形css如何绘制特殊图形的方法示例详解常用css样式(布局)详解CSS3中常用的样式【基本文本和字体样式】编程式处理Css样式的示例代码使用CSS伪元素控制连续几个元素的样式方法纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式
- 使用纯 CSS 实现滚动阴影效果纯css3实现横向无限滚动的示例代码CSS3制作圆形滚动进度条动画的示例css实现隐藏滚动条并可以滚动内容的实例代码CSS3实现3D小球滚动撞击遮挡板特效源码Css3实现无缝滚动防抖css文字阴影渐渐模糊效果的实现css3悬停按钮-CSS3鼠标悬停按钮阴影缩放特效代码
- 探索CSS属性*-gradient的实用价值CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 使用CSS3制作版头动画效果CSS实现漂亮的时钟动画效果的实例代码css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果CSS 奇思妙想边框动画效果的实现CSS 动态高度过渡动画效果的实现CSS3分享图标按钮动画特效代码CSS3通过var()和calc()函数实现动画特效
- CSS3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法CSS 控制Html页面高度导致抖动问题的原因CSS3新浪微博模板商店鼠标悬停图片抖动特效css3让div随鼠标移动而抖动起来CSS 控制因Html页面高度导致抖动的问题解决方法
- css 利用 position + margin 实现固定盒子横向纵向居中的方法CSS 同级元素position:fixed和margin-top共同使用的问题使用CSS实现盒子水平垂直居中的方法(8种)CSS盒子居中的常用的几种方法(小结)
- html5+css3之制作header实例与更新html5+css3之CSS中的布局与Header的实现css为什么要放在head标签中
- CSS3中animation实现流光按钮效果CSS3动画之利用requestAnimationFrame触发重新播放功能
- html5+CSS3的编码规范html5+CSS3的编码规范前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享
