php三级下拉框模板,三级下拉菜单功能的实现

摘要：一、实现功能1、在一级导航中，鼠标移动过去，导航目标背景色改变；当移动到有下拉标志的导航目标时，隐藏的二级导航显示2、在二级导航移动时，实现以上部分功能以及显示隐藏的三级导航3、移动三级导航时，实现背景颜色改变二、功能代码html页面代码html>

&lt

一、实现功能

1、在一级导航中，鼠标移动过去，导航目标背景色改变；当移动到有下拉标志的导航目标时，隐藏的二级导航显示

2、在二级导航移动时，实现以上部分功能以及显示隐藏的三级导航

3、移动三级导航时，实现背景颜色改变

二、功能代码

html页面代码html>

三级菜单功能的实现

• 视频教程
• 社区问答
• 特色课程
  • php开发
    • php图文教程
    • php视频教程
    • php手册教程
    • php实战教程
  • 前端开发
  • 服务端开发
  • 移动开发
  • 数据库
• 手册下载
• 工具下载
• 编程词典

$(function(){

//二级导航弹出效果

$('#id3').mouseover(function(){

$(this).children('i').attr('class','glyphicon glyphicon-triangle-top')

$(this).find('.two').slideDown(500)

})

$('#id3').mouseleave(function(){

$(this).find('.two').slideUp(500)

$(this).children('i').attr('class','glyphicon glyphicon-triangle-bottom')

})

//二级导航条移动效果

$('.two>li').mouseover(function(){

$(this).css('background','#f5f5f5')

$(this).children('.three').show(300)

})

$('.two>li').mouseleave(function(){

$(this).css('background','#fff')

$(this).children('.three').hide()

})

//三级导航条移动效果

$('.three>li').mouseover(function(){

$(this).css('background','#f5f5f5')

})

$('.three>li').mouseleave(function(){

$(this).css('background','#fff')

})

})

css样式代码*{margin: 0;padding: 0;}

body{

background: #F3F5F7;

font-size: 14px;

}

.clear{clear: both}

.left{

float: left;

}

.col-md-3{

height: 60px;

background: #ccc;

}

.col-md-6{

height: 60px;

line-height: 60px;

background:black;

}

li{

list-style: none;

width: 100px;

cursor: pointer;

}

.container-fluid a{

text-decoration: none;

color: #ccc;

}

.one>li{

float: left;

margin-left: 6px;

text-align: center;

}

.one>li:hover{

background: #363C41;

}

.one>li>a:hover{

color: #fff;

}

.two{

background: #fff;

display: none;

}

.two li:first-child{

position: relative;

}

.two>li{

text-align: left;

padding-left: 10px;

height: 50px;

}

.three{

position: absolute;

top: 0;

left: 100px;

display: none;

}

.three li{

height: 50px;

padding-left: 10px;

}

批改老师：韦小宝批改时间：2019-01-30 09:29:16

老师总结：写的很不错 下拉菜单在任何网站都可以看到 可见使用的是非常的频繁 这种小功能 实现的方法还有多种 不仅仅可以通过jQuery来实现哦