CSS写动态下拉菜单 -----2017-03-27
动态网站第一步：动态下拉菜单
关键点：
overflow:hidden
max-height
xx:hover {} 设置当鼠标移上之后的效果
transition: 设置过度时间
cursor: 设置鼠标效果
opacity: 设置透明度 0-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
list-style:none ;
font-family:"微软雅黑";
text-shadow: royalblue 5px 5px; /* 阴影*/
}
.top-nav,#nav-lv1{
border-radius: 10px; /*边框为圆形*/
}
.top-container{
width: 100%;
height:40px;
background-color: cyan;
position: relative;
}
.top-nav{
width: 600px;
height: 40px;
margin:0px auto; /*居中*/
position: relative;
}
#nav-lv1{
width: 150px;
max-height:40px; /*最大高度*/
background-color: palegreen;
float: left;
text-align: center;
vertical-position: middle;
line-height: 40px;
overflow: hidden; /*实现动态导航栏关键点*/
}
#nav-lv1:hover{
max-height: 400px; /*最大高度*/
transition: 1s; /*过度效果*/
cursor:pointer; /* 鼠标改小手*/
background: greenyellow;
}
#nav-lv1 li:hover{
background-color: greenyellow;
text-decoration: underline;
}
#nav-lv1 ul{
background-color: white;
opacity: 0.9; /* 设置透明度* 目的是防止挡住底下的文字/
}
</style>
</head>
<body>
<div class="top-container">
<div class="top-nav">
<div id="nav-lv1">HTML
<ul>
<li>1</li> <!--可换成<a></a>标签-->
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">JavaScript
<ul>
<li>1</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">CSS
<ul>
<li>1</li>
<li>2</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">Jquery
<ul>
<li>1</li>
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS写动态下拉菜单 -----2017-03-27的更多相关文章
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- JavaScript+CSS+DIV实现下拉菜单示例
<!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...
- iphone动态下拉菜单
介绍:实现带动画效果的下拉菜单.用户按下菜单按钮,出现下拉按钮,用户松开菜单按钮,下拉按钮收回. 测试环境:Xcode 4.3, iOS 5.0. 效果图: jQuery特效:http://www.h ...
- CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- 用css写出下拉框（代码转自wq群）
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
随机推荐
- 一个基于POI的通用excel导入导出工具类的简单实现及使用方法
前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...
- Java丨博客系统
后台界面: 前台界面: 这是一个由我带着刚入门的几位实习生做的一个博客系统,希望给java入门的学习者一个例子,这个系统还需要完善,主体功能是实现了,还差一些细节,如果需要源码的话可以在下方给我留言! ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- C++ traits技术浅谈
前言 traits,又被叫做特性萃取技术,说得简单点就是提取"被传进的对象"对应的返回类型,让同一个接口实现对应的功能.因为STL的算法和容器是分离的,两者通过迭代器链接.算法的实 ...
- C语言中的函数、数组与指针
1.函数:当程序很小的时候,我们可以使用一个main函数就能搞定,但当程序变大的时候,就超出了人的大脑承受范围,逻辑不清了,这时候就需要把一个大程序分成许多小的模块来组织,于是就出现了函数概念: 函 ...
- html 5 video
正项目中, 20秒 2mb左右在速度上可以接受, 但是最总怎样剪都不可以被游览器读取, 因为H.264 和一些我不清楚的. 为了简单解决这小问题, 请使用 http://easyhtml5video. ...
- Material Design学习-----TextInputLayout
TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...
- MySQL优化-一 、缓存优化
body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...
- HDU---Labyrinth
Labyrinth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Codeblocks快捷键
Codeblocks快捷键: Ctrl+Shift+Enter:复制控制台exe内容 Ctrl+Z:撤销 Ctrl+F:查找 Ctrl+R:查找替换功能 Ctrl+Shift+C:加注释 C ...