标签归档:CSS3菜单

CSS3 3D立方体菜单导航

很早以前,我们分享过一款非常炫酷的CSS3 3D动画菜单,鼠标滑过菜单项时可以3D立体翻转。这次我们要再介绍另外一款基于CSS3的3D立方体菜单导航,这款菜单的菜单项以小图标的方式显示在立方体的各个面上,点击主菜单时就会旋转立方体,显示相应的子菜单。

css3-3d-cube-navigation

在线演示源码下载

纯CSS3简易下拉菜单 可为菜单项定义不同颜色

我们以前分享过很多各种各样的jQuery和CSS3下拉菜单,有支持右键菜单的下拉菜单,比如jQuery自定义下拉框选择菜单 支持右键弹出菜单,也有支持多级的下拉菜单,比如jQuery左侧带小图标的多级下拉菜单。今天我们要分享的是一款基于纯CSS的建议下拉菜单,它的特点是外观非常简洁,但是由于每一个菜单项都有一条不同颜色的边框,所以看起来也非常漂亮。同时这款菜单可以默认展开菜单项,也可以点击按钮后展开,使用起来比较灵活。

css3-colorful-dropdown-menu

在线演示源码下载

炫酷实用的CSS3 3D垂直手风琴菜单

之前我们分享过很多款基于CSS3和jQuery的手风琴菜单,比如这款jQuery带小图标手风琴垂直菜单纯CSS3实现垂直手风琴菜单都非常不错。但是今天要分享的这款手风琴菜单比较特别,整体外观呈现3D的视觉效果,切换菜单项时,菜单项也出现3D的切换效果,所以说这款CSS3手风琴菜单不仅外观高大上,而且也挺实用。

css3-3d-accordion-menu

在线演示源码下载

超实用CSS3 3D菜单 菜单项悬浮凸出立体效果

昨天我们向大家分享过一款非常不错的CSS3垂直3D菜单,主要以鼠标滑过菜单项立方体旋转的动画特效展现。今天我们要接着为大家介绍另外一款CSS3 3D菜单,不同的是,这款菜单是水平展现的,更适合大部分网站的菜单选择。同时,这款菜单的特点是鼠标滑过菜单项时,菜单项会逐渐悬浮凸出显示,看上去非常炫酷。

css3-3d-float-menu

在线演示源码下载

纯CSS3炫酷3D菜单 菜单项3D旋转动画

不久前,我们刚刚为大家分享过很多外观各异的CSS3菜单,很多都是比较实用的,比如这款jQuery/CSS3波浪形弹性下拉菜单就非常具有创意,也很实用。今天要介绍的也是一款基于纯CSS3的3D菜单,当我们将鼠标滑过菜单项时,菜单项就会实现3D的旋转动画,另外菜单项是垂直的显示的。

css3-3d-rotate-menu

在线演示源码下载

CSS3粘性概念菜单Gooey Menu

今天我们要给大家分享一款基于CSS3的粘性概念菜单,也可以叫做Gooey Menu,这种菜单按钮在目前的手机应用中使用非常广泛,外观样式也有很多种类型。今天的这款样式比较新颖,点击展开按钮即可展开所有菜单项,菜单项的形状呈波浪形,鼠标滑过菜单项时也会有高亮显示的效果。

css3-gooey-menu

在线演示源码下载

CSS3侧边栏单页切换小图标菜单

这是一款基于CSS3的单页切换菜单插件,单页网站现在非常流行,即整个网站点击任何按钮和链接都不需要整体刷新,可以平滑地切换每一个页面。这次分享的这款应用就是在侧边栏悬停一列带小图标的菜单,点击每一个菜单项即可切换页面,在切换过程中还会产生不同的页面过渡动画效果。

css3-side-menu-single-page

在线演示源码下载

纯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

在线演示源码下载