html 下拉菜单 js,HTML+CSS3+JS 实现的下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布
最新推荐文章于 2024-06-13 09:00:00 发布
阅读量966 收藏 2
点赞数
文章标签： html 下拉菜单 js

实现效果

13b3d23e78d8a7b89f89ce0dcd98c29e.gif

html

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 下拉菜单的资料请关注脚本之家其它相关文章！

圆圆脸小怪兽
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表单下拉菜单_HTML表单：下拉菜单
cungui5726的博客
08-16 6306
html表单下拉菜单Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s province, stat...
html 中的 js 的下拉菜单
YKenan的博客
03-28 581
html 中的 js 的下拉菜单 $(document).ready(function() { //1.监听一级菜单的点击事件 $(".drop-down>li").click(function() { //1.1拿到二级菜单 var sub = $(this).children(".sub"); //1.2让二级菜单展开 sub.slideDown(400); //...
HTML+CSS+JS 自定义下拉菜单
正在创作系列：【若冰说CSS】
06-13 1283
实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。
HTML CSS实现简单下拉菜单,html+css+js实现的简易下拉菜单
weixin_39966644的博客
06-03 272
1.网页效果图 2.代码效果图 3.源代码pageEncoding="utf-8"%>???????.mydiv{width:1000px; /*设置盒子的宽度*/height:80px; /*设置盒子的高度*/background:gray; /*设置盒子的背景颜色*/padding-top:50px; /*设置盒子内置元...
Html+Js简单实现列表标签菜单下拉
weixin_44151292的博客
04-14 636
效果图： 关闭： 打开： 代码： <ul class="menu"> <li p="0" onclick="change(this)">公告管理</li> <ul style="display:none;"> <li><a href="#" target="box">...
HTML+CSS+JS实现的下拉菜单源码
最新发布
07-02
HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...
HTML+CSS实现简单下拉菜单效果
09-24
使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧
jQuery+CSS3+HTML5折叠卡片式下拉菜单特效
06-05
**jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中，下拉菜单是一种常见的交互元素，用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作，结合CSS3的动画效果和HTML5的新特性，构建出一种...
HTML+CSS3+JS 实现的下拉菜单
01-18
实现效果 html <h1 class=title>Dropdown Menu <a>First Menu <i class=icon-arrow></i> <li><a>Home</a></li> <li><a>About Us</a></
js+css3手风琴展开收缩下拉菜单代码
06-05
在网页设计中，交互性和用户体验是至关重要的因素之一，而js+css3手风琴展开收缩下拉菜单正是实现这一目标的有效工具。本资源提供了一种扁平化设计的实现方式，结合JavaScript与CSS3技术，创建了一个带有小图标的...
JavaScript实现HTML导航栏下拉菜单
01-21
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！ 样式有点丑。 代码实现（JavaScript） 1、获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById(show); //获取被隐藏的菜单 let menu = document.getElementB
网页[二级菜单]dropdown-menu-icon.rar
05-17
网页首页，通用[二级菜单]模板，下拉菜单项的下拉箭头有翻转的动画特效。完整源代码，仅供参考学习，乐在分享。
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
weixin_35891787的博客
06-04 603
:target 是CSS3 中新增的一个伪类，用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置，俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。先上效果图正如标题所说，本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单，原生HTML+CSS，无J...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
weixin_42501270的博客
06-03 1568
前面的文章算是把Bootstrap CSS部分简单的学习了一遍，应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍，并且用代码实现了一遍，而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码复制代码代码如下:Bootstrap下拉菜单用于显示链接列表的可切换、...
添加一个页面，html+js实现下拉框、按钮、表格（固定表头）
sxww_zyt的博客
02-13 1417
本篇记录了使用element ui的样式输出下拉框、固定表头的表格，仅做学习记录，如有更好的办法，请斧正~
html导航栏下拉菜单js,jq+css+html打造下拉导航菜单实例
weixin_39716703的博客
06-03 282
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code。Html部分123Home4567Employee89@Html.A...
html5中实现简单下拉列表,JavaScript实现非常简单实用的下拉菜单效果
weixin_29079743的博客
06-03 1492
本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下：这是一款实用的JS下拉菜单，鼠标移上菜单就显示出二级菜单，是从其它网站上整理下来的，修改花了不少时间，现在去除了一些无用代码，更简洁了，而且代码兼容性似乎也表现不错，这款两级下拉菜单，基本是由CSS和JavaScript共同实现的，真的挺简洁实用。运行效果截图如下：在线演示地址如下：具体代码如下：/p...
html js点击下拉菜单代码,JavaScript下拉菜单功能实例代码
weixin_29973493的博客
06-03 1719
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：下拉菜单body,ul,li {margin: 0;padding: 0;font-size: 13px;}ul,li {list-style: none;}#divselect {width: 186px;margin: 80px auto;position: relative;z-index: 10000;}#divsele...
html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果
05-11
这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。 HTML代码： ``` 请选择 选项一 选项二 <option value="3">选项三 ``` CSS代码： ``` .custom-select { position: relative; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值