失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > php和jQuery实现三级导航栏下拉菜单显示效果

php和jQuery实现三级导航栏下拉菜单显示效果

时间:2020-01-15 10:28:46

相关推荐

php和jQuery实现三级导航栏下拉菜单显示效果

后端开发|php教程

jQuery,下拉菜单,php

后端开发-php教程

本文主要介绍php+jQuery实现的三级导航栏下拉菜单显示效果,涉及php数组遍历与jQuery事件响应操作页面元素变换等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

租号 源码,ubuntu中个端口,tomcat有几种安装方式,python爬虫ncbi,php app 支付,搜索引擎seo推广平台lzw

首先看看效果图:

winform erp 源码,vscode扩展主机,插u盘自动启动ubuntu,tomcat ie编码,c 提取sqlite数据,jquery幻灯片插件大小图片切换,前端框架san和vue,协程爬虫视频大全,php 网站安装,贵阳seo应聘,良精网站,自我介绍网页代码,电脑 模板,话题 程序lzw

游戏交易平台源码 .net,ubuntu 做渗透版本,爬虫课程教学视频,php模板_,安阳滑县seolzw

1.数据配置文件 db.php

关于我们, wo => array(array( hree_tit => 公司介绍, hree_cont => array(企业概况,组织架构,发展历程,企业文化,服务理念)),array( hree_tit => 企业荣誉, hree_cont => array(获奖证书,行业贡献,资质认证,协会活动,公司的成就)),array( hree_tit => 销售网络, hree_cont => array(东北,华北,中东,华南,西南,西北)) ) ), array( one => 产品展示, wo => array(array( hree_tit => 进出口贸易, hree_cont => array(数码产品,最新能源,新鲜水果,肉类食品,衣服,金银首饰)),array( hree_tit => 商业服务, hree_cont => array(资格认证,人才培养,热门商品推荐,最新科技前沿 )) ) ), array( one => 新闻中心, wo => array(array( hree_tit => 企业动态, hree_cont => array(公司新闻,新品上市,企业动态)),array( hree_tit => 行业动态, hree_cont => array(媒体聚焦,业内关注,国内行情,国际行情)) ) ), array( one => 联系我们, wo => array(array( hree_tit => 联系方式, hree_cont => array( 在线客服, 通信地址, 电话传真, 在线留言 )),array( hree_tit => 人才招聘, hree_cont => array(项目经理,助理秘书,渠道代理,网站工程师)) ) ));?>

2.index文件

3.nav.html文件

$(function(){ //对元素进行隐藏 $(.menu>li).eq(4).find(s).hide(); $(.two li).last().css(order, one); //鼠标移入和移出事件 $(.menu li).hover(function(){$(this).find(.two).show();//鼠标移入和移出事件$(.two li).hover(function(){ $(this).find(.hide).show();},function(){ $(this).find(.hide).hide();}); },function(){$(this).find(.two).hide(); }); })无标题文档*{ padding: 0; margin: 0;}body{ font: 18px/50px 微软雅黑; color: #FFF;}li{ list-style: none;}a{ text-decoration: none; color: #FFF;}#nav{ width: 610px; height: 50px; background: #01532B; margin: 30px auto; border-radius: 5px; box-shadow: 2px 3px 2px #479E33;}#nav ul.menu{ padding: 0 5px;}#nav ul.menu li{ width: 120px; height: 50px; line-height: 50px; text-align: center; float: left; position: relative;}#nav ul.menu li a{ display: block; text-shadow:0px 1px 1px #479E33;}#nav ul.menu li a:hover{ color: #FFF; background: #479E33;}#nav ul.menu li s{ width: 0px; height: 30px; border-left: 1px solid #479E33; display: block; position: absolute; right: 0; top: 10px;}#nav ul.menu li ul{ position: absolute; top: 50px; left: 0; background: #479E33; border-radius: 0 0 3px 3px; box-shadow: 2px 3px 2px #479E33;}#nav ul.menu li ul li{ border-bottom: 1px solid #479E33; width: 120px; position: relative;}#nav ul.menu li ul li a{ font-size: 16px;}#nav ul.menu li ul li .hide{ position: absolute; top: 0px; left: 120px;}#nav ul.menu li ul li .hide li{ border-left: 1px solid #479E33;}#nav ul.menu li ul li .hide li a{ font-size: 14px;}.two,.hide{ display: none;}

网站首页

php实现三级导航栏成效

如果觉得《php和jQuery实现三级导航栏下拉菜单显示效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。