网页设计_导航条

导航条下拉菜单效果

1.导航条下拉html代码：

<!-- 新导航条 --><div class="tnav"><div class="tnav_c"><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul class="nav2"><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li></ul></li><li><a href="#">业务合作</a><ul class="nav2"><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></ul></div></div><!-- 导航条end -->

2.导航条下拉js代码：

//新导航下拉2022.2.23$(".tnav ul li").mouseenter(function(){$(this).children("ul").show();});$(".tnav ul li").mouseleave(function(){$(this).children("ul").hide();});

3.导航条下拉css代码：

/* 2022.2.22 导航条*/
.tnav{height:50px;background:#0697FF;}
.tnav .tnav_c{width:1000px;height:50px;margin:0 auto;}
.tnav_c>ul>li{width:200px;height:50px;color:#fff;float:left;line-height:50px;text-align:center;position:relative;}
.tnav_c ul li a{color:#fff;font-size: 18px;}
.tnav_c ul li:hover{background-color:#0081FF;}
/* 导航条下拉菜单 */
.tnav ul{z-index:100}
.tnav_c li ul{width:130px;position:absolute;top:50px;left: 35px;background-color:#fff;display:none;}
.tnav_c .nav2 li{width:130px;height:50px;float:left;line-height:50px;text-align:center;}
.tnav_c li ul a{color:#666666;font-size: 16px;}
.tnav .nav2 li:hover{background-color:#0081FF;color:#FFFFFF;}
.tnav .nav2 li:hover a{color:#FFFFFF;}

4.导航条下拉菜单效果图：

5.感谢大家的支持！

作者：lzb 日期：2022.2.24

网页设计_导航条_下拉菜单相关推荐

前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框一.原理二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示一.原理 1. ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
vue动态生成下拉框_解决vue动态下拉菜单有数据未反应的问题
问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料发现 Vue的this理解有误 jsp 下拉菜单 {{item.plantModelName}} JS new Vue({ el ...
【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
qtcreator下拉列表怎么制作_设置EXCEL动态下拉菜单，只需要一个组合键，新手也能快速掌握...
操作版本:OFFICE365 在EXCEL制作一级下拉菜单有4种方法,你掌握几种?一文中,我提到了一级下拉菜单的制作方法,其中用公式法来制作下拉菜单可以实现内容增减后下拉菜单的内容也自动增减,这个方法 ...
java月份下拉菜单_实现一个日期下拉菜单
这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单.本文调试环境为IE6/firefox1.5. 首先来分析一下日期下拉菜单的需求.建议大家在写任 ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
三星二级菜单_Excel 如何设计带联想的二级下拉菜单？
在百度搜索网站中输入搜索关键词时,百度会逐步弹出相关的词条列表.例如,输入"三"会弹出包含"三国杀"."三维度"之类的词条列表,而输入&qu ...

网页设计_导航条_下拉菜单

网页设计_导航条_下拉菜单相关推荐

最新文章

热门文章