之前有分享过几款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');
});
});
最后把源代码发上来,大家可以看看。下载地址>>