您当前的位置:365bet > HTML5 / CSS3 >

同时有两个上下切换的按钮

发布时间:2019-01-11 20:01编辑:admin1阅读(

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

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

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

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

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

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

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

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

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

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