标签归档:CSS3菜单

超酷的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

在线演示源码下载

纯CSS3实现仿Mac系统的Dock菜单

很早以前我们给大家分享过几款基于jQuery和CSS3的Mac Dock菜单,比如这款jQuery Dock菜单 可悬浮页面两侧和这款jQuery/CSS3实现仿苹果的CoverFlow图片切换都非常炫酷和实用。今天给大家带来的是另外一款基于纯CSS3的仿Mac系统的Dock菜单,配合漂亮的风景背景,这款Dock菜单更加逼真,当然这都是纯CSS3实现。

pure-css3-mac-dock

在线演示源码下载

纯CSS3下拉菜单导航 子菜单多种展开动画

这是一款非常漂亮的纯CSS3下拉菜单导航,这款菜单有两大亮点,一个是唯美的全屏背景图,非常适合个性化的个人博客使用。另外一个特点是子菜单拥有多种展开动画方式,有简单的淡入淡出,也有炫酷的折叠式展开。并且这款菜单时纯CSS实现,使用起来相当方便。

pure-css3-dropdown-menu-animation

在线演示源码下载

纯CSS3下拉菜单导航 多种下拉弹出动画

之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款HTML5/CSS3水平二级下拉菜单,也有的非常炫酷,比如这款jQuery/CSS3波浪形弹性下拉菜单。今天我们要介绍的是另外一款下拉菜单导航,它是纯CSS3实现,其特点是简单易用,并且支持多种下拉弹出动画,非常不错,大家可以下载源码试试。

pure-css3-dropdown-menu

在线演示源码下载

CSS3自定义菜单内容的二级下拉菜单

之前我们分享过很多基于jQuery和CSS3的二级下拉菜单,大部分都非常实用,当然也不乏炫酷的动画,比如这款HTML5/CSS3水平二级下拉菜单就比较朴实,这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义,可以是简单的多列,也可以是复杂的图文排版。

css3-custom-dropdown-menu

在线演示源码下载

HTML5/CSS3水平二级下拉菜单

今天我们要给大家介绍一款简单而实用的HTML5/CSS3水平二级下拉菜单,这款CSS3菜单由简单的ul列表组成,因此兼容所有的浏览器。它的背景一共由3部分组成:主菜单的淡蓝色、下拉菜单黑色和下拉菜单选中时的红色。同时菜单也会随着页面大小的改变而自适应,淡然这部分功能不是所有开发者都会喜欢。

html5-css3-hor-drop-menu

在线演示源码下载

超炫酷纯CSS3 3D折叠二级下拉菜单

这是一款外观非常炫酷的CSS3 3D下拉菜单,它的特点是主菜单的背景和页面背景非常融合,看上去就像菜单嵌入在页面中一样;最大的特点在于当鼠标滑过菜单项时,就会展开3D样式的二级子菜单,同时子菜单会产生摇晃折叠的动画效果,看起来十分炫酷,而这一切都是纯CSS3实现。

css3-3d-swing-menu

在线演示源码下载

炫酷的CSS3 3D横向菜单 菜单项凸出显示

有一段时间没有向大家分享网页菜单了,现在的网页菜单越来越炫酷,特别是CSS3和HTML5的发展,让菜单更显风韵。就比如今天要介绍的一款CSS3 3D横向菜单,整个菜单栏会随着鼠标移动而倾斜,产生一种3D立体的视觉效果,同时鼠标滑过菜单项时,菜单项也会凸出显示,是一款非常华丽而具有个性化的CSS3菜单导航插件。

css3-3d-menu-float

在线演示源码下载