下拉滑动二级导航菜单demo

网页效果，显示主菜单，带你给用户鼠标移至主菜单时会产生下拉菜单，移开隐藏

以下为完整的代码和部分解释
整个父容器为300px，显示50px，鼠标移至主菜单则下拉250px

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XuCaiyunLet'sDoIt</title>
<style type="text/css">
body{
margin:0;
font-family:'微软雅黑','Times New Roman', Times, serif; //font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
}
.navi_head{
height:50px;
background-color:#459df5;//持续显示的50px背景色为蓝色
}
.navi_body{
overflow:hidden; //显示navi_body的50px，其余全部剪去
height:50px;
background:rgba(36,97,158,0.9);
transition:height ease 0.5s;//transition属性：transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程

//transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程

//transition:<过渡属性名称> <过渡时间> <过渡模式>

//1.ease 逐渐变慢
  //2.linear 匀速
  //3.ease-in 缓慢开始（加速）
  //4.ease-out 缓慢结束（减速）
  //5.ease-in-out 缓慢开始，缓慢结束（先加速后减速）
  //6.cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）
}
.navi_body:hover{ //当鼠标移至主菜单时时，显示被剪切的300px
height:300px;
}

.navi_head>div>span{
width:150px;
text-align:center;
height:300px;
display:inline-block; //display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

//即所有的.navi_head>div>span表现为并列同行排列（inline），而所有的navi_head>div>span内的元素表现每个元素从新一行开始呈现（block）
font-weight:bold;
color:#FFF;
font-size:14px;
vertical-align:top;
}

.navi_head>div>span>p a{
color:#FFF;
text-decoration:none;
}
.navi_head>div>span>p a:hover{
color:#FFF;
text-decoration:underline;//a标签鼠标移至上面时显示下划线
}

.navi_title{
font-size:16px;
line-height:50px;
margin-top:0;
}

.navi_head>div>span:hover{
background:rgba(100,100,100,0.2);
}
</style>
</head>
<body>
<div>
<div class="navi_body">
<div class="navi_head">
<div style="width:80%; margin-left:auto; margin-right:auto;">
<span>
<p class="navi_title">XUZONE</p>
</span>
<span>
<p class="navi_title">Home</p>
</span>
<span>
<p class="navi_title">about me</p>
</span>
<span>
<p class="navi_title">软件下载</p>
<p><a href="">WEB编译工具</a></p>
<p><a href="">桌面整理工具</a></p>
</span>
<span>
<p class="navi_title">招贤纳士</p>
<p><a href="">WEB前端工程师</a></p>
<p><a href="">JAVAWEB工程师</a></p>
<p><a href="">APP开发工程师</a></p>
<p><a href="">数据库工程师</a></p>
<p><a href="">软件架构师</a></p>
<p><a href="">技术客服</a></p>
</span>
<span>
<p class="navi_title">给我留言</p>
<p><a href="">站内留言</a></p>
<p><a href="">站长信箱</a></p>
</span>
</div>
</div>
</div>
</div>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>

</body>
</html>

下拉滑动二级导航菜单demo相关推荐

AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单
AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单 TsFrameBar控件是创建一个下拉菜单的工具块. TsFrameBar控件本身,可以通过创建TITEMS,自 ...
橘色超漂亮滑动二级导航菜单
DEMO:http://www.lanrentuku.com/down/js/daohang-590/ 转载于:https://www.cnblogs.com/sofire/archive/2009/ ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
Bootstrap带下拉的胶囊导航
带下拉的胶囊导航下拉菜单组件(dropdown)是一个独立的组件,它可以和页面上的任何元素(如,按钮.导航等)进行组合,让相应的元素具有下拉功能. 如果把导航和下拉菜单进行组合,并让导航链接充当下拉 ...
select下拉框二级联动
采用Layui框架两种方法实现,差别不大一.编写jsp代码二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
禁止微信浏览器的下拉滑动
禁止微信浏览器的下拉滑动解决思路: 1 先禁止body的滚动事件 2 再给需要scroll的元素加上自定义的滚动事件注:加入此代码后要给需要scroll的元素加上.scroll的class var ...

下拉滑动二级导航菜单demo

下拉滑动二级导航菜单demo相关推荐

最新文章

热门文章