标签归档:CSS3菜单

CSS3和SVG实现的圆环菜单动画

网页菜单的样式真实多种多样,特别是HTML5和CSS3的流行,让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单,在圆环上一共有7个节点,表示菜单项,当鼠标滑过或者点击其中一个节点时,就会弹出文字菜单项,圆环形状和节点都是采用SVG绘制而成,动画效果也非常不错。

css3-svg-circle-menu

在线演示源码下载

样式独特的纯CSS3自定义下拉菜单

不久前,我们给大家分享过一个jQuery自定义样式下拉框 支持分组、多选和搜索,应该说还是挺实用的。这次我们要介绍的也是一个下拉菜单,基于CSS3实现,它的特点是主菜单有一层阴影,这样整个下拉菜单看起来就会有3D立体的视觉效果,是不是很棒?

css3-styled-dropdown-menu

在线演示源码下载

CSS3可自动折叠的垂直手风琴菜单

之前我们分享过很多手风琴菜单,大部分是垂直的手风琴菜单,都非常实用,比如这个CSS3深色背景的垂直手风琴菜单。这次我们继续为大家带来一款基于CSS3的垂直手风琴菜单,除了和其他手风琴菜单那样可以自动折叠菜单项以外,它还有一个特点是折叠和展开时代有平滑的淡入淡出效果。

css3-accordion-menu-animate

在线演示源码下载

CSS3弧形曲线循环菜单导航 菜单项图标高亮

今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮,当切换到某一个菜单项时,菜单项会沿着曲线移动到当前视窗,同时显示对应的小图标,更重要的时,菜单项的切换是循环的,因此使用起来也非常方便。

css3-arc-menu-with-icon

在线演示源码下载

CSS3深色背景的垂直手风琴菜单

手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时子菜单会有水平飞入的动画效果。

jquery-css3-accordion-menu-t

在线演示源码下载

超实用的CSS3横向二级下拉主菜单导航

每一个网站都有自己独特的主菜单导航,样式也是千姿百态,大部分都会使用一些CSS3的技巧来让菜单变得功能更加强大、外观更加绚丽。今天要分享的就是一款基于CSS3的横向下拉二级主菜单导航,它的特点在于菜单项可以定制一个小图标,并且可以展开所属的二级下拉菜单。

css3-hor-dropdown-menu

在线演示源码下载

纯CSS3实现3D展开动画的图标菜单

我们知道利用CSS3可以制作很多效果炫酷的3D动画特效,比如这次要分享的一款CSS3菜单,它正是利用了CSS3的一些特性,实现了菜单展开时的3D动画特效,同时当你将鼠标滑过菜单项时,菜单项还会呈现发光的效果,从而使整体的视觉效果更佳立体炫酷。

css3-3d-icon-menu

在线演示源码下载

超酷的HTML5/CSS3 3D气泡悬浮菜单

之前我们分享过各式各样的网页菜单,有基于jQuery的,也有基于HTML5和CSS3的,很多都比较炫酷和实用,比如这款jQuery 3D 垂直多级菜单就非常实用,还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单,每一个菜单项是一个个3D样式的悬浮气泡,点击菜单项后就可以激活当前菜单。

html5-3d-bubble-menu

在线演示源码下载

CSS3带小图标的手风琴下拉菜单

对于网页菜单来说,我们用得最多的虽然还是横向主菜单,但是在系统后台中,手风琴下拉菜单还是用得十分广泛的。之前我们也介绍过一些使用的jQuery和CSS3垂直手风琴菜单,比如这款炫酷实用的CSS3 3D垂直手风琴菜单和这款jQuery带小图标手风琴垂直菜单。这次要分享的也是一款基于CSS和JavaScript的手风琴菜单,同时这款菜单左侧也同样带有漂亮的小图标。

css3-accordion-menu-icon

在线演示源码下载

纯CSS3实现吸附和阴影效果的垂直菜单导航

今天我们要给大家带来一款很别致的纯CSS3垂直菜单导航,它的特点是菜单项带有3D立体阴影的效果,同时当鼠标滑过菜单项时,菜单项便会吸附在页面上,移开鼠标菜单项便又会离开页面呈现3D阴影的视觉效果。这款菜单基于纯CSS3实现,因此使用非常方便。

css3-attach-shadow-menu

在线演示源码下载