今天要分享的这款菜单是基于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>
这个ul结构支撑了下拉菜单的基本骨架,应该还算普通。
接下来是css3代码,是实现这款css3下拉菜单的关键:
css3代码:
这个代码比较复杂,建议研究。谢谢阅读,希望能帮到大家,请继续关注移动技术网,我们会努力分享更多优秀的文章。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
相关文章:
-
-
-
详解CSS3新增的背景属性
CSS3新增属性:background-clip ,background-origin , background-size,本文给大家分享CSS3新增的背景属性...
[阅读全文]
-
-
-
CSS3 旋转立方体问题详解
这篇文章主要介绍了CSS3 旋转立方体问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
Grid 宫格常用布局的实现
这篇文章主要介绍了Grid 宫格常用布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
CSS3实现网站商品展示效果图
这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习...
[阅读全文]
-
网友评论