CSS3小清新下拉菜单简易大方

之前有分享过几款CSS3菜单和jQuery菜单，像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽，这次要分享的这款相对比较简单，很适合用在用户的操作面板上。先来看看效果图：

怎么样，无论从颜色还是结构都非常简单清新吧。

接下来我们一起看看菜单的源代码，主要是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: 300;
}

#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: 300;
}

.menu p { padding: 0 0 0 30px; line-height: 38px; }

.menu p:after
{
    opacity: 0;
    content: 'f0da';
    position: absolute;
    right: 0;
    margin-right: 10px;
    font-size: 14px;
}

.menu p:hover:after { opacity: 1; }

.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小清新下拉菜单简易大方