CSS3小清新下拉菜单 简易大方
之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上。先来看看效果图:
怎么样,无论从颜色还是结构都非常简单清新吧。
你也可以到这里来看看这款下拉菜单的DEMO演示。
接下来我们一起看看菜单的源代码,主要是CSS代码,只有下拉的功能用了几行jQuery代码。
先来看看HTML结构:
<div class="content">
<div class="mainBar">
<div id="liked">Liked</div>
<div id="listen">Listen</div>
<div id="cog" class="fa fa-cog"></div>
</div>
<div class="menu">
<p id="messages">Messages</p>
<p>Dashboard</p>
<p>Recent Activity</p>
<p>Unlike</p>
</div>
</div>
然后是CSS代码:
/* Bar */ .mainBar
{
background-color: #4B4B4A;
color: rgba(255, 255, 255, 0.8);
width: 250px;
height: 50px;
font-family: 'Lato', 'FontAwesome', Helvetica;
font-size: 15px;
font-weight:;
} #liked, #listen, #cog
{
float: left;
text-align: center;
height: 50px;
line-height: 50px;
} #liked { width: 94px; }
#listen { width: 99px; }
#cog { width: 55px; } #liked, #listen { border-right: 1px solid #3E3E3D; } #liked:before { content: '\f00c'; margin-right: 5px; font-size: 13px; position: relative; bottom: 1px; color: #FFFFFF; }
#listen:before { content: '\f0da'; margin-right: 7px; font-size: 14px; color: #FFFFFF; }
#cog:after { content: '\f0d7'; margin-left: 10px; font-size: 12px; color: #FFFFFF; } #liked:hover, #listen:hover, #cog:hover { background: #807F7D; color: #E7E7E8; cursor: pointer; } /* Menu */ .menu
{
margin-top: 4px;
background-color: #4DAF7C;
color: rgba(255, 255, 255, 0.8);
width: 250px;
height: 152px;
font-family: 'Lato', 'FontAwesome', Helvetica;
font-size: 15px;
font-weight:;
} .menu p { padding: 0 0 0 30px; line-height: 38px; } .menu p:after
{
opacity:;
content: '\f0da';
position: absolute;
right:;
margin-right: 10px;
font-size: 14px;
} .menu p:hover:after { opacity:; } .menu p:hover
{
background: #7EC29C;
color: #FFFFFF;
cursor: pointer;
}
这里分两部分,一个是上面的功能菜单部分,另一个是下拉的那部分,实现其实都非常简单。
最后还有一段实现下拉效果的jQuery代码:
$(document).ready(function()
{
var cog = $('#cog'),
menu = $('.menu'); cog.on('click', function()
{
menu.fadeToggle('fast');
});
});
最后把源代码发上来,大家可以看看。下载地址>>
CSS3小清新下拉菜单 简易大方的更多相关文章
- 基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery/CSS3大屏下拉菜单 自定义子菜单内容
这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- css3 炫酷下拉菜单
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【CSS3动画】下拉菜单模拟
下拉菜单模拟效果图: CSS3: <style> #box{width:200px; height:50px; overflow:hidden; cursor: pointer; tran ...
- 微信小程序 - 下拉菜单组件
使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端 点击下载:小程序-下拉组件.
- 纯css3代码写下拉菜单效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 3D旋转下拉菜单
在线演示 本地下载
随机推荐
- Python os.popen() 方法
简述 就是新建一个管道执行一个命令. 方法是os.popen(命令,权限,缓冲大小) 比如 a = 'mkdir def' b = os.popen(a,) print b 就是等同于使用命令去创建了 ...
- 微信小程序学习资料
官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/ W3CSchool的教程 https://www.w3cschool.cn/weixinapp/ 更多参 ...
- json2
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- java.io.BufferedOutputStream 源码分析
BufferedOutputStream 是一个带缓冲区的输出流,通过设置这种输出流,应用程序就可以字节写入到缓冲区中,当缓冲区满了以后再调用底层系统,而不必针对每次字节写入调用底层系统,从而提高系 ...
- Android——用Activity和Service实现简单的音乐播放器
一.只用Activity 容易出现问题 xml <?xml version="1.0" encoding="utf-8"?> <LinearL ...
- for语句练习 阶乘
4的阶乘:4!=1*2*3*4 public class g { /** * @param args */ public static void main(String[] args) { int n ...
- docker原理
Docker原理11 Linux Namespace 11 AUFS文件系统17 重新理解Docker的各种命令18 Docker原理 Linux Namespace docker是一个容器引擎,容器 ...
- javascript 60行编写的俄罗斯方块游戏
转自 http://***/share/1759652641295360.htm <!doctype html><html><head></head>& ...
- 聊聊Java中的拆箱和装箱操作
在刷谷歌面试题的过程中,发现一道有意思的题目,以前没有特别注意,忽略了一些东西,特此记录. 题目要求输出以下代码的结果: public class MyTest { public static voi ...
- SpringCloud 详解配置刷新的原理 使用jasypt自动加解密后 无法使用 springcloud 中的自动刷新/refresh功能
之所以会查找这篇文章,是因为要解决这样一个问题: 当我使用了jasypt进行配置文件加解密后,如果再使用refresh 去刷新配置,则自动加解密会失效. 原因分析:刷新不是我之前想象的直接调用conf ...