一款CSS3實現多功能下拉菜單（帶分享按）的教程

2024-07-11 08:30:22

字體：大中小

來源：轉載

供稿：網友

　　今天要分享的這款菜單是基于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>