标签归档:CSS3菜单

纯CSS3实现垂直手风琴菜单

今天我们要给大家介绍一款简单实用的CSS3垂直手风琴下拉菜单,这款纯CSS3实现的手风琴菜单,部署的CSS代码非常简单,但是已经可以实现手风琴菜单的所有基本功能,包括菜单项的展开收拢、菜单项小按钮的切换等,是一款相当实用的CSS3手风琴菜单插件。

css3-vertical-accordion-menu

在线演示源码下载

CSS3可展开收缩的弹性动画菜单

这次我们要为大家分享一款炫酷实用的CSS3菜单,这款菜单的特点是可以展开和收缩菜单项,并且在展开和收缩的过程中伴随弹性的动画特效,而且展开和收缩的按钮也会出现一些炫酷的动画特效。这款CSS3弹性动画菜单比较适合个性化的个人博客中使用。

css3-elasticity-menu

在线演示源码下载

纯CSS3环形菜单动画 可展开二级子菜单

网页菜单是一个网站最主要的部分之一,之前我们分享过很多形态各异的jQuery/CSS3菜单,有炫酷的CSS3/jQuery创意盒子动画菜单,也有实用的CSS3多级下拉菜单 弹性展开下拉动画。今天要给大家分享一款富有创意的CSS3环形菜单,当我们将鼠标滑过菜单项时,即可以圆环的形式展开二级子菜单,效果非常不错。

pure-css3-circle-menu

在线演示源码下载

12款超实用的CSS3汉堡包菜单按钮变形动画

今天我们要来分享一款很特别的CSS3按钮,大家可能对汉堡包菜单不是很了解,汉堡包菜单图标在APP或响应式设计上比较常见,一般用来展开/关闭网站导航菜单。这款CSS3汉堡包菜单按钮一共有12种变形动画,大家可以根据自己的喜好来选择一款。

css3-hamburger-button

在线演示源码下载

基于HTML5和SVG的手机菜单动画

之前我们分享过很多手机端的jQuery菜单和CSS3菜单,也有很多是PC端的菜单,都非常不错。今天要接着分享一款基于HTML5和SVG的手机端菜单动画,这款菜单有2种主题和动画风格,分别是侧边飞入和底部飞入动画,同时点击菜单展开按钮又会出现旋转的动画特效。

html5-svg-mobile-menu

在线演示源码下载

CSS3手机端侧滑菜单 4种滑动菜单特效

这是一款基于CSS3的手机端侧滑菜单,一共有4种侧滑动画特效。这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项,该动画方式由CSS3中的transition-delay属性来完成,具体效果大家可以看演示。

css3-mobile-slider-menu

在线演示1在线演示2在线演示3在线演示4源码下载

HTML5/CSS3鼠标悬停动画菜单按钮

之前我们已经向大家分享过很多炫酷的HTML5/CSS3菜单,包括多级下拉菜单、动画菜单等。今天要给给位分享一款基于CSS3的鼠标悬停动画菜单按钮,这款菜单是由一个个小按钮组成,当我们将鼠标滑过菜单项时,按钮上的图标将出现悬浮的动画特效。

css3-hover-icon-menu

在线演示源码下载

CSS3 iPhone样式的3D菜单

之前已经向大家分享过很多漂亮的CSS3菜单了,很多菜单都支持多级下拉。今天要分享的CSS3菜单时模拟iPhone样式的,菜单整体呈现3D立体的视觉效果。同时你也可以选择平面方式的菜单,2D和3D之间可以自由切换。

css3-iphone-menu

在线演示源码下载

CSS3 3D旋转下拉菜单

这是一款带有3D动画特效的CSS3菜单,该菜单有以下几个特点:首先是菜单时基于CSS3的,因此浏览器兼容性都还可以;其次这款菜单支持二级下拉菜单,功能上也基本能满足大部分开发者;最后这款菜单最大的亮点在于展开下拉菜单时,子菜单可以旋转的展开和收缩,给人3D的视觉效果。

jquery-3d-rotate-dropdown-menu

在线演示源码下载

CSS3扇形动画菜单 鼠标滑过扇形展开动画

我们之前已经分享过很多CSS3菜单了,很多都比较实用,有部分CSS3菜单外观比较炫酷。今天要分享的这款CSS3菜单外观是扇形的,并且在鼠标滑过菜单时,扇形菜单项将会以动画的方式展开,并且支持多级下拉菜单。

css3-sector-menu

在线演示源码下载