扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >css3怎么实现的多级渐变下拉菜单导航效果代码
  • 527

0
分享到

css3怎么实现的多级渐变下拉菜单导航效果代码

2024-04-02 19:04:59 527人浏览 安东尼
摘要

这篇文章主要介绍“css3怎么实现的多级渐变下拉菜单导航效果代码”，在日常操作中，相信很多人在CSS3怎么实现的多级渐变下拉菜单导航效果代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望

这篇文章主要介绍“css3怎么实现的多级渐变下拉菜单导航效果代码”，在日常操作中，相信很多人在CSS3怎么实现的多级渐变下拉菜单导航效果代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3怎么实现的多级渐变下拉菜单导航效果代码”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

这是一款基于css3实现的下拉菜单导航，是非常漂亮的动画菜单，而且是多级菜单的形式，测试时发现可支持5级，估计还可以支持更多的子菜单项，只有你想这么增加下去，CSS3实现的效果真的很棒，期待朋友们现在就赶快学习一下CSS3吧，这些Demo肯定会对你帮助很大。

运行效果截图如下：

css3怎么实现的多级渐变下拉菜单导航效果代码

在线演示地址如下：

Http://demo.jb51.net/js/2015/css3-jb-menu-nav-codes/

具体代码如下：

代码如下:

<!DOCTYPE html>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3下拉菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#menu {width:700px;text-align:center;height:38px;background:#069;margin:50px auto 300px auto;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0,0,0,0.5);}
#menu ul {margin:0;padding:0;list-style:none;white-space:nowrap;text-align:left;background:#069;}
#menu ul {display:inline-block;}
#menu li {margin:0;padding:0;list-style:none;}
#menu li {display:inline-block;display:inline;}
#menu ul ul {position:absolute;left:-9999px;opacity:0;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0,0,0,0.5);
 -WEBkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 1s;
}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left;display:block;position:relative;}
#menu a {display:block;font:nORMal 12px tahoma, arial, 宋体b8b\4f53, sans-serif;color:#fff;line-height:30px;text-decoration:none;padding:0 20px 0 10px;margin:3px;background:#069;border:1px solid #09c;border-radius:3px;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
 background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 -webkit-transition: 0.25s;
 -moz-transition: 0.25s;
 -ms-transition: 0.25s;
 -o-transition: 0.25s;
 transition: 0.25s;
}
#menu input {display:none;}
#menu label {display:block;font:normal 12px tahoma, arial, 宋体b8b\4f53, sans-serif;color:#fff;line-height:30px;padding:0 20px 0 10px;margin:3px;position:relative;background:#069;border:1px solid #09c;border-radius:3px;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
 background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
 -webkit-transition: 0.25s;
 -moz-transition: 0.25s;
 -ms-transition: 0.25s;
 -o-transition: 0.25s;
 transition: 0.25s;
}
#menu label img {position:absolute;left:0;top:0;width:100%;height:100%;}
#menu label b {color:#ff0;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu input#tab1:checked ~ ul.level1 ul.ul1,
#menu input#tab2:checked ~ ul.level1 ul.ul2,
#menu input#tab3:checked ~ ul.level1 ul.ul3 {opacity:1;left:-6px;top:50px;}
#menu input#tab4:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;}
#menu input#tab2a:checked ~ ul.level1 ul.ul2,
#menu input#tab2b:checked ~ ul.level1 ul.ul2,
#menu input#tab2c:checked ~ ul.level1 ul.ul2,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 {opacity:1;left:-6px;top:50px;}
#menu input#tab2a:checked ~ ul.level1 ul.ul2 ul.ul2a,
#menu input#tab2b:checked ~ ul.level1 ul.ul2 ul.ul2b,
#menu input#tab2c:checked ~ ul.level1 ul.ul2 ul.ul2c,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a ul.ul2aa {opacity:1;left:100%;top:auto;margin-top:-40px;margin-left: 5px;}
#menu input#tab4a:checked ~ ul.level1 ul.ul4,
#menu input#tab4b:checked ~ ul.level1 ul.ul4,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;}
#menu input#tab4a:checked ~ ul.level1 ul.ul4 ul.ul4a,
#menu input#tab4b:checked ~ ul.level1 ul.ul4 ul.ul4b,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a ul.ul4aa {opacity:1;left:auto;right:100%;top:auto;margin-top:-40px;margin-right:5px;}
#menu li a:hover {border-color:#fff;}
#menu label.close {position:absolute;width:100%;height:30px;display:none;padding:0;left:0;top:0;border:0;background:transparent;}
#menu input#tab1:checked ~ ul.level1 label.lab1,
#menu input#tab2:checked ~ ul.level1 label.lab2,
#menu input#tab2a:checked ~ ul.level1 label.lab2,
#menu input#tab2b:checked ~ ul.level1 label.lab2,
#menu input#tab2c:checked ~ ul.level1 label.lab2,
#menu input#tab2aa:checked ~ ul.level1 label.lab2,
#menu input#tab3:checked ~ ul.level1 label.lab3,
#menu input#tab4:checked ~ ul.level1 label.lab4,
#menu input#tab4a:checked ~ ul.level1 label.lab4,
#menu input#tab4b:checked ~ ul.level1 label.lab4,
#menu input#tab4aa:checked ~ ul.level1 label.lab4 {display:block;}
</style>
</head>
<body>
<div id="menu">
<input type="radio" name="tab" id="tab1" class="tabs">
<input type="radio" name="tab" id="tab2" class="tabs">
<input type="radio" name="tab" id="tab2a" class="tabs">
<input type="radio" name="tab" id="tab2aa" class="tabs">
<input type="radio" name="tab" id="tab2ab" class="tabs">
<input type="radio" name="tab" id="tab2b" class="tabs">
<input type="radio" name="tab" id="tab2c" class="tabs">
<input type="radio" name="tab" id="tab3" class="tabs">
<input type="radio" name="tab" id="tab4" class="tabs">
<input type="radio" name="tab" id="tab4a" class="tabs">
<input type="radio" name="tab" id="tab4aa" class="tabs">
<input type="radio" name="tab" id="tab4b" class="tabs">
<input type="radio" name="tab" id="tabclose" class="tabs">
 <ul class="level1">
   <li class="level1-li"><a class="level1-a" href="#">首 页</a></li>
   <li class="level1-li"><label for="tab1" class="open"><img src="images/trans.gif" >关于我 <b>&darr;</b></label><label for="tabclose" class="close lab1"><img src="images/trans.gif" ></label>
     <ul class="ul1">
       <li><a href="#">邮 箱</a></li>
       <li><a href="#">电 话</a></li>
       <li><a href="#">地 址</a></li>
     </ul>
   </li>
   <li class="level1-li"><label for="tab2"><img src="images/trans.gif" >度 假 <b>&darr;</b></label><label for="tabclose" class="close lab2"><img src="images/trans.gif" ></label>
     <ul class="ul2">
       <li><a href="#">度假图片</a></li>
       <li><label for="tab2a"><img src="images/trans.gif" >度假商店 <b>&rarr;</b></label>
         <ul class="ul2a">
           <li><a href="#">买东西</a></li>
           <li><a href="#">互联网销售</a></li>
           <li><label for="tab2aa"><img src="images/trans.gif" >买东西圣地 <b>&rarr;</b></label>
             <ul class="ul2aa">
               <li><a href="#">考 验</a></li>
               <li><a href="#">附近的</a></li>
               <li><a href="#">指导书</a></li>
               <li><a href="#">滑 板</a></li>
             </ul>
           </li>
           <li><a href="#">专家介绍</a></li>
         </ul>
       </li>
       <li><a href="#">有趣生活</a></li>
       <li><label for="tab2b"><img src="images/trans.gif" >餐 厅 <b>&rarr;</b></label>
         <ul class="ul2b">
           <li><a href="#">冬季旅馆</a></li>
           <li><a href="#">夏季旅馆</a></li>
           <li><a href="#">秋季旅馆</a></li>
           <li><a href="#">冬季旅馆</a></li>
         </ul>
       </li>
       <li><label for="tab2c"><img src="images/trans.gif" >篝火晚会 <b>&rarr;</b></label>
         <ul class="ul2c">
           <li><a href="#">主题晚会</a></li>
           <li><a href="#">报导晚会</a></li>
           <li><a href="#">野外晚会</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="level1-li"><label for="tab3"><img src="images/trans.gif" >景区周围环境 <b>&darr;</b></label><label for="tabclose" class="close lab3"><img src="images/trans.gif" ></label>
     <ul class="ul3">
       <li><a href="#">为什么去那</a></li>
       <li><a href="#">我们做什么</a></li>
       <li><a href="#">风 景</a></li>
       <li><a href="#">生活卡品</a></li>
     </ul>
   </li>
   <li class="level1-li"><label for="tab4"><img src="images/trans.gif" >动态信息 <b>&darr;</b></label><label for="tabclose" class="close lab4"><img src="images/trans.gif" ></label>
     <ul class="ul4">
       <li><a href="#">支付方法</a></li>
       <li><label for="tab4a"><img src="images/trans.gif" ><b>&larr;</b> 了解度假村</label>
         <ul class="ul4a">
           <li><a href="#">本质生活</a></li>
           <li><a href="#">保 险</a></li>
           <li><label for="tab4aa"><img src="images/trans.gif" ><b>&larr;</b> 廉价房租</label>
             <ul class="ul4aa">
               <li><a href="#">客 厅</a></li>
               <li><a href="#">卧 室</a></li>
               <li><a href="#">阳 台</a></li>
             </ul>
           </li><li><a href="#">附近学校</a></li>
           <li><a href="#">学世界</a></li>
           <li><a href="#">附近学校</a></li>
         </ul>
       </li>
       <li><label for="tab4b"><img src="images/trans.gif" ><b>&larr;</b> 语 言</label>
         <ul class="ul4b">
           <li><a href="#">英 语</a></li>
           <li><a href="#">中 文</a></li>
           <li><a href="#">法 语</a></li>
         </ul>
       </li>
       <li><a href="#">厉害啊</a></li>
     </ul>
   </li>
   <li class="level1-li"><a class="level1-a" href="#">世界观</a></li>
 </ul>
</div>
</body>
</html>

到此，关于“css3怎么实现的多级渐变下拉菜单导航效果代码”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: css3怎么实现的多级渐变下拉菜单导航效果代码

本文链接: https://lsjlt.com/news/76810.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3怎么实现的多级渐变下拉菜单导航效果代码
    这篇文章主要介绍“css3怎么实现的多级渐变下拉菜单导航效果代码”，在日常操作中，相信很多人在css3怎么实现的多级渐变下拉菜单导航效果代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2024-04-02
  • dede5.7 动态导航下拉菜单的实现代码
    1.修改 include下面taglib文件夹里的channel.lib.php文件 替换成我的复制代码代码如下:<phpfunction lib_channel(&$ctag,&$refObj){...
    99+
    2022-06-12
    dede5.7 导航 菜单
  • 怎么用CSS实现二级下拉导航菜单
    这篇文章主要讲解了“怎么用CSS实现二级下拉导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现二级下拉导航菜单”吧！这是一款纯CSS菜单...
    99+
    2024-04-02
  • 纯html5+css3下拉导航菜单的实现方法
    这篇文章主要介绍“纯html5+css3下拉导航菜单的实现方法”，在日常操作中，相信很多人在纯html5+css3下拉导航菜单的实现方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • 利用CSS实现多级下拉横向导航菜单
    本篇内容主要讲解“利用CSS实现多级下拉横向导航菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS实现多级下拉横向导航菜单”吧!本文实例为大家分享了纯...
    99+
    2024-04-02
  • 原生JS如何实现导航下拉菜单效果
    这篇文章主要介绍了原生JS如何实现导航下拉菜单效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。这个导航下拉菜单需要实现的功能是：下拉菜单的...
    99+
    2024-04-02
  • CSS怎么实现菱形导航菜单效果代码
    这篇文章主要介绍“CSS怎么实现菱形导航菜单效果代码”，在日常操作中，相信很多人在CSS怎么实现菱形导航菜单效果代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么实...
    99+
    2024-04-02
  • CSS3怎么实现带有飞行效果的三级下拉菜单
    这篇文章主要介绍“CSS3怎么实现带有飞行效果的三级下拉菜单”，在日常操作中，相信很多人在CSS3怎么实现带有飞行效果的三级下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
  • css3中怎么实现一个下拉菜单效果
    css3中怎么实现一个下拉菜单效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。首先来看核心的HTML片断代码：<nav> &...
    99+
    2024-04-02
  • 怎么使用css3实现动画下拉菜单效果
    这篇文章给大家分享的是有关怎么使用css3实现动画下拉菜单效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。.site-navigation ul ul{min-width: 1...
    99+
    2024-04-02
  • 如何通过纯CSS实现导航栏的下拉菜单效果
    如何通过纯CSS实现导航栏的下拉菜单效果在Web设计中，导航栏是一个非常常见的组件，而下拉菜单则是导航栏中的一种常见效果。在本文中，我们将学习如何仅使用CSS来实现导航栏的下拉菜单效果，并提供详细的代码示例。首先，我们需要一个基本的导航栏结...
    99+
    2023-10-27
    导航栏 纯CSS 下拉菜单效果
  • CSS3怎么实现银灰色动画效果的导航菜单
    本篇内容介绍了“CSS3怎么实现银灰色动画效果的导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！运行...
    99+
    2024-04-02
  • 怎么用CSS实现三级下拉菜单效果
    这篇文章主要介绍“怎么用CSS实现三级下拉菜单效果”，在日常操作中，相信很多人在怎么用CSS实现三级下拉菜单效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现...
    99+
    2024-04-02
  • Android 抽屉效果的导航菜单实现代码实例
    看了很多应用，觉得这种侧滑的抽屉效果的菜单很好。 不用切换到另一个页面，也不用去按菜单的硬件按钮，直接在界面上一个按钮点击，菜单就滑出来，而且感觉能放很多东西。 关于实现，...
    99+
    2022-06-06
    导航菜单 菜单 抽屉 Android
  • CSS导航栏和CSS下拉菜单怎么实现
    这篇文章主要介绍“CSS导航栏和CSS下拉菜单怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS导航栏和CSS下拉菜单怎么实现”文章能帮助大家解决问题。导...
    99+
    2024-04-02
  • Jquery怎么实现带动画效果的二级导航菜单
    要实现带动画效果的二级导航菜单，可以使用jQuery的`slideDown()`和`slideUp()`方法来实现菜单的展开和收起动...
    99+
    2023-08-15
    Jquery
  • 怎么用CSS3实现多功能下拉菜单
    这篇文章主要介绍“怎么用CSS3实现多功能下拉菜单”，在日常操作中，相信很多人在怎么用CSS3实现多功能下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS3实...
    99+
    2024-04-02
  • 纯CSS实现响应式导航栏的下拉菜单效果的实现步骤
    现如今，随着移动设备的普及，响应式设计已经成为网页设计的一个重要因素。在网页的导航栏设计中，为了提供更好的用户体验，通常需要使用下拉菜单来呈现更多的导航选项。本文将介绍如何使用纯CSS来实现响应式导航栏的下拉菜单效果，并附有具体的代码示例。...
    99+
    2023-10-21
    响应式导航栏 纯CSS实现 下拉菜单效果
  • jquery怎么实现简单下拉菜单效果
    本文小编为大家详细介绍“jquery怎么实现简单下拉菜单效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery怎么实现简单下拉菜单效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。看效果html<...
    99+
    2023-06-30
  • Android仿今日头条APP实现下拉导航选择菜单效果
    本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程，供大家参考，具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多，当然也可以用在其他的项目...
    99+
    2022-06-06
    菜单 选择 app Android
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作