一款CSS3实现多功能下拉菜单（带分享按）的教程

　　今天要分享的这款菜单是基于CSS3的下拉菜单，功能非常强大，下拉菜单中不仅拥有背景色渐变的菜单项，而且还带有分享按钮的菜单项，为了让菜单更加美观，每一个菜单项都带有非常漂亮的小图标，而且在下拉菜单中还有鼠标滑过缩进的动画特效。


　　接下来我们来具体解说一下实现这款CSS3下拉菜单原理和过程，代码主要是HTML和CSS。

　　首先是HTML代码，主要是两部分，左侧的下拉菜单项和右侧的分享按钮菜单，分别用了一个ul li列表：

　　HTML代码:

<ul class=”menu-function”>  
    <li>  
    <a href=”" title=”">CATEGORIES</a>  
    <ul class=”dropdown-menu categories”>  
    <li><a href=”" title=”">Design</a></li>  
    <li><a href=”" title=”">Freebies</a></li>  
    <li><a href=”" title=”">Tutorials</a></li>  
    <li><a href=”" title=”">Coding</a></li>  
    <li><a href=”" title=”">Inspiration</a></li>  
    <li><a href=”" title=”">WordPress</a></li>  
    <li><a href=”" title=”">Resources</a></li>  
    </ul>  
    </li>  
    <li><a href=”" title=”">SHOP</a></li>  
    <li id=”search”>  
    <a href=”#search” title=”">SEARCH</a>  
    </li>  
    <li id=”search-hidden”>  
    <input type=”text” name=”" id=”"><a href=”#search-hidden” title=”"></a>  
    </li>  
    </ul>  
    <ul class=”menu-share”>  
    <li>  
    <a href=”" title=”">FOLLOW US</a>  
    <ul class=”dropdown-menu follow”>  
    <li><a href=”" title=”">RSS</a></li>  
    <li><a href=”" title=”">Twitter</a></li>  
    <li><a href=”" title=”">Facebook</a></li>  
    <li><a href=”" title=”">Google+</a></li>  
    <li><a href=”" title=”">Dribbble</a></li>  
    </ul>  
    </li>  
    <li>  
    <a href=”" title=”">SHARE</a>  
    <ul class=”dropdown-menu share”>  
    <li><a href=”" title=”">Facebook</a></li>  
    <li><a href=”" title=”">Twitter</a></li>  
    <li><a href=”" title=”">Google+</a></li>  
    </ul>  
    </li>  
    </ul>

　　这个ul结构支撑了下拉菜单的基本骨架，应该还算普通。

　　接下来是CSS3代码，是实现这款CSS3下拉菜单的关键：

　　CSS3代码:

.page-menu-wrapper > ul > li {   
    position: relative;   
    float: left;   
    border-left: 1px solid #3d61a2;   
    border-right: 1px solid #3d61a2;   
    margin-right: -1px;   
    }   
    .menu-function {   
    float: left;   
    }   
    .menu-share {   
    float: rightright;   
    }   
    .page-menu-wrapper > .menu-function > li:first-child {   
    border-left: none;   
    }   
    .page-menu-wrapper > .menu-share > li:last-child {   
    border-right: none;   
    }   
    .page-menu-wrapper a {   
    position: relative;   
    display: block;   
    padding: 0 15px;   
    transition: all .3s ease-out;   
    }   
    .page-menu-wrapper > ul > li:hover > a {   
    color: #3d61a2;   
    background-color: #fff;   
    }   
    .page-menu-wrapper > ul > li:hover .dropdown-menu {   
    display: block;   
    }   
    .dropdown-menu {   
    display: none;   
    position: absolute;   
    width: 260px;   
    font-size: 18px;   
    font-weight: bold;   
    text-align: left;   
    background-color: #fff;   
    }   
    .dropdown-menu.categories a {   
    color: #000;   
    }   
    .dropdown-menu.categories a:hover {   
    color: #5bc4be;   
    margin-left: 10px;   
    }   
    #search:target a[href="#search"] {   
    display: none;   
    }   
    #search:target ~ #search-hidden {   
    display: block;   
    }   
    #search-hidden {   
    display: none;   
    padding: 0 5px;   
    background-color: #fff;   
    }   
    #search-hidden input {   
    border: none;   
    line-height: 24px;   
    width: 180px;   
    }   
    #search-hidden a {   
    float: rightright;   
    padding: 0;   
    width: 20px;   
    height: 45px;   
    }   
    #search-hidden a:before {   
    content: “\7d”;   
    left: 0;   
    color: #446cb3;   
    }   
    .menu-function > li > a,.menu-share > li > a {   
    padding-left: 40px;   
    }   
    .page-menu-wrapper a:before {   
    position: absolute;   
    left: 15px;   
    font-family: ‘icomoon’;   
    font-style: normal;   
    speak: none;   
    font-weight: normal;   
    font-smoothing: antialiased;   
    font-size: 18px;   
    vertical-align: middle;   
    }   
    .menu-function > li:nth-child(1) > a:before {   
    content: “\e048″;   
    }   
    .menu-function > li:nth-child(2) > a:before {   
    content: “\3b”;   
    }   
    .menu-function > li:nth-child(3) > a:before {   
    content: “\7d”;   
    }   
    .menu-share > li:nth-child(1) > a:before {   
    content: “\e0a2″;   
    }   
    .menu-share > li:nth-child(2) > a:before {   
    content: “\e05b”;   
    }   
    /*follow*/  
    .dropdown-menu.follow {   
    width: 223px;   
    }   
    .dropdown-menu.follow a {   
    padding-left: 35px;   
    font-size: 14px;   
    }   
    .dropdown-menu.follow a:before {   
    left: 10px;   
    }   
    .dropdown-menu.follow li:nth-child(1) a:before {   
    content: “\e0a5″;   
    }   
    .dropdown-menu.follow li:nth-child(2) a:before {   
    content: “\e0a2″;   
    }   
    .dropdown-menu.follow li:nth-child(3) a:before {   
    content: “\e04c”;   
    }   
    .dropdown-menu.follow li:nth-child(4) a:before {   
    content: “\e022″;   
    }   
    .dropdown-menu.follow li:nth-child(5) a:before {   
    content: “\e03d”;   
    }   
    .dropdown-menu.follow li:nth-child(1) a {   
    color: #ffaa31;   
    }   
    .dropdown-menu.follow li:nth-child(2) a {   
    color: #07beed;   
    }   
    .dropdown-menu.follow li:nth-child(3) a {   
    color: #314d91;   
    }   
    .dropdown-menu.follow li:nth-child(4) a {   
    color: #2d2d2d;   
    }   
    .dropdown-menu.follow li:nth-child(5) a {   
    color: #e84788;   
    }   
    .dropdown-menu.follow li:nth-child(1):hover {   
    background-color: #ffaa31;   
    }   
    .dropdown-menu.follow li:nth-child(2):hover {   
    background-color: #07beed;   
    }   
    .dropdown-menu.follow li:nth-child(3):hover {   
    background-color: #314d91;   
    }   
    .dropdown-menu.follow li:nth-child(4):hover {   
    background-color: #2d2d2d;   
    }   
    .dropdown-menu.follow li:nth-child(5):hover {   
    background-color: #e84788;   
    }   
    .dropdown-menu.follow li:hover a {   
    color: #fff;   
    margin-left: 10px;   
    }   
    .dropdown-menu.share {   
    width: 120px;   
    rightright:0;   
    }   
    .dropdown-menu.share a {   
    margin: 10px;   
    line-height: 26px;   
    font-size: 12px;   
    padding-left: 20px;   
    border: 1px solid #cbcbcb;   
    border-radius: 2px;   
    color: #4c4c4c;   
    background-color: #efefef;   
    }   
    .dropdown-menu.share a:hover {   
    background-color: #fff;   
    }   
    .dropdown-menu.share li a:before {   
    font-size: 12px;   
    left: 5px;   
    }   
    .dropdown-menu.share li:nth-child(1) a:before {   
    content: “\e04c”;   
    color: #314d91;   
    }   
    .dropdown-menu.share li:nth-child(2) a:before {   
    content: “\e0a2″;   
    color: #07beed;   
    }   
    .dropdown-menu.share li:nth-child(3) a:before {   
    content: “\e022″;   
    color: #2d2d2d;   
    }   
    @font-face {   
    font-family: ‘icomoon’;   
    src:url(‘fonts/icomoon.eot’);   
    src:url(‘fonts/icomoon.eot?#iefix’) format(‘embedded-opentype’),   
    url(‘fonts/icomoon.svg#icomoon’) format(‘svg’),   
    url(‘fonts/icomoon.woff’) format(‘woff’),   
    url(‘fonts/icomoon.ttf’) format(‘truetype’);   
    font-weight: normal;   
    font-style: normal;   
    }

　　这个代码比较复杂，建议下载源码研究。谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。