css3 炫酷下拉菜单

最新推荐文章于 2022-05-01 22:49:31 发布
最新推荐文章于 2022-05-01 22:49:31 发布
阅读量345 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/candy-Yao/p/8669511.html
版权 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>炫酷下拉菜单</title>
    <style>
        .ulBox {
            width: 500px;
            margin: 0 auto;
        }
        .ulBox  li {
            float: left;
            list-style: none;
            background-color: green;
            padding: 0 10px;
            line-height: 40px;
            color: #fff;
            position: relative;
        }

        .ulBox li ul {
            height: 0;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 40px;
            padding: 0;
        }

        .ulBox  li ul li {
            background-color: red;
            list-style: none;
            float: none;
            transition: all .3s;
            -webkit-transition: all .3s;
            opacity: 0;
        }

        .ulBox  li ul li:nth-of-type(1n) {
            transform: translate3d(100%,0,0);
            -webkit-transform: translate3d(100%,0,0);
        }

        .ulBox  li ul li:nth-of-type(2n) {
            transform: translate3d(-100%,0,0);
            -webkit-transform: translate3d(-100%,0,0);
        }


        .ulBox li:hover ul {
            overflow: visible;
        }

        .ulBox li:hover ul li {
            opacity: 1;
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <nav>
        <ul class="ulBox">
            <li>HTMl5
                <ul class="ulBox1">
                    <li>HTMl1</li>
                    <li>HTMl2</li>
                    <li>HTMl3</li>
                    <li>HTMl4</li>
                </ul>
            </li>
            <li>CSS3
                <ul class="ulBox1">
                    <li>CSS1</li>
                    <li>CSS2</li>
                    <li>CSS3</li>
                    <li>CSS4</li>
                </ul>
            </li>
            <li>Javascript
                <ul class="ulBox1">
                    <li>Javascript1</li>
                    <li>Javascript2</li>
                    <li>Javascript3</li>
                    <li>Javascript4</li>
                </ul>
            </li>
            <li>Jquery
                <ul class="ulBox1">
                    <li>Jquery1</li>
                    <li>Jquery2</li>
                    <li>Jquery3</li>
                    <li>Jquery4</li>
                </ul>
            </li>
            <li>Vue
                <ul class="ulBox1">
                    <li>Vue1</li>
                    <li>Vue2</li>
                    <li>Vue3</li>
                    <li>Vue4</li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

 

转载于:https://www.cnblogs.com/candy-Yao/p/8669511.html

weixin_33873846
关注
jQuery自定义下拉框选择列表 5款炫酷样式
05-15
jQuery自定义下拉框选择列表 5款炫酷样式
pickout-纯JS炫酷下拉列表框美化插件
05-16
pickout-纯JS炫酷下拉列表框美化插件
纯css制作炫酷下拉菜单
qq_36816349的博客
08-19 1079
第一步：HTML部分 Home Menu 1 Submenu 1 Submenu 2 Submenu 3 Submenu 4 Submenu 5 Menu 2 Su...
纯CSS3炫酷下拉导航菜单插件动画
ICode联盟
05-01 128
下载地址 不需要任何Jquery代码实现网站导航菜单带下拉，纯CSS3实现并带动画效果，一个字酷！！ dd:
Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
z_fighting的博客
03-28 7609
分别采用Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
纯CSS3炫酷3D菜单 菜单项3D旋转动画
04-16
解压密码：RJ4587 不久前，我们刚刚为大家分享过很多外观各异的CSS3菜单，很多都是比较实用的，比如这款jQuery/CSS3波浪形弹性下拉菜单就非常具有创意，也很实用。今天要介绍的也是一款基于纯CSS3的3D菜单，当我们将...
这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果
08-10
在这个项目中，我们看到的是如何利用这两者以及JavaScript来实现一个炫酷的Select下拉菜单美化效果。让我们深入探讨一下这些技术及其在创建这种效果时的应用。 首先，HTML5的`<select>`元素是网页表单中常见的组件...
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
09-24
【CSS3制作炫酷下拉菜单与弹起式选单】 在网页设计中，下拉菜单和弹起式选单是常见的交互元素，能够提供丰富的用户体验。CSS3的引入，使得这些菜单的设计变得更加多样化和动态。本文将详细介绍如何利用CSS3实现这两...
炫酷CSS3 3D折叠二级下拉菜单代码
01-01
本示例中的“炫酷CSS3 3D折叠二级下拉菜单代码”旨在提供一种创新的方式，通过利用CSS3的特性来实现独特且引人注目的交互体验。下面我们将深入探讨这一技术的关键知识点。 首先，让我们关注CSS3的几个关键特性： 1...
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
酷炫3d下拉框特效展示.zip
04-09
下拉框 3d 卷折型下拉框
jQuery酷炫黑色下拉框选择特效代码
03-20
jQuery酷炫黑色下拉框选择代码是一款带关键词搜索筛选和全选取消功能的下拉框ui布局特效。
纯CSS+HTML大型下拉菜单特效
12-17
纯CSS+HTML大型下拉菜单特效。。。。。。。。。。。。
纯CSS3下拉菜单导航 子菜单多种展开动画
08-23
这是一款非常漂亮的纯CSS3下拉菜单导航，这款菜单有两大亮点，一个是唯美的全屏背景图，非常适合个性化的个人博客使用。另外一个特点是子菜单拥有多种展开动画方式，有简单的淡入淡出，也有炫酷的折叠式展开。并且这款菜单时纯CSS实现，使用起来相当方便。
jquery超炫select下拉菜单美化插件
12-11
jquery.dropdown是一款效果非常炫酷的select下拉菜单美化插件。这款jQuery下拉菜单美化插件能够使菜单选项一各种很炫的动画方式展现出来，其中的一些3d动画使用到了css3 3d动画效果。
android 炫酷下拉刷新动画效果,Auto Layout 使用心得（六）—— 制造炫酷的下拉刷新动画...
weixin_34883093的博客
05-27 269
此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ，有不明白的地方可以参考我的 Auto Layout 设置哦，下载到本地打开就可以了。简介本文中，我们将一起使用 Auto Layout 技术制造一个炫酷的下拉刷新动画。Auto Layout 除了在布局的时候比较繁琐以外，还有一个经常被人吐槽的点：让许多 UIView.animateWithDura...
html 炫酷下拉菜单,html5和css3炫酷select下拉菜单美化效果插件
weixin_35300493的博客
06-03 815
这是一款使用html5 svg和css3制作的炫酷select下拉菜单美化效果。我们可以通过JavaScript库来将表单中的input元素修改为更加好看的样式，甚至是更复杂的input元素，例如select下拉菜单。我们可以有非常多的表单美化方案，使用户可以得到更加好的用户体验。我们的插件中还有一些可以是input表单产生动画的插件-jQuery表单input字段提示信息动画特效。在demo中我...
使用css 写出横向滑动的效果,隐藏滚动条
struggle_WDJR的博客
04-25 721
//父级标签 .style-banner { height: 1.2333rem; background: crimson; ul { width: auto; height: 100%; overflow-x: auto; white-space: nowrap; >...
web前端：CSS3制作炫酷的下拉框
web前端技巧开发
04-19 2290
CSS3炫酷的下拉框的原理： 1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表 2.然后发现，下拉里面，每一个选项是从不同的两个方向出现的 3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动淡入。 效果图 其实这个是用CSS3过渡和动画制作的，没有用到JS也是可以做出这样的效果，那么他的代码是怎样的呢？我给大家罗列出来： HTML代码 CSS 完...
CSS3炫酷下拉菜单与弹起式选单实例：HTML+CSS+JS结合
本文通过实例展示了如何巧妙地使用CSS3来创建炫酷的下拉菜单和弹起式选单，这对于任何希望提升网页设计美学和易用性的前端开发者来说，是一份宝贵的参考资料。学习者可以通过实践这段代码，掌握CSS3选择器、伪类和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值