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

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

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

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

　　HTML代码:

XML/HTML Code复制内容到剪贴板

<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>

学习交流

如何查找有故障的配件

热门图片

猜你喜欢的新闻

猜你喜欢的关注