类似Facebook的响应菜单-插件特效-星河码客

毫无疑问,响应技术变得越来越受欢迎。这让我们节省时间当我们开发设计用于使用各种设备:从移动设备到宽屏电脑。不需要开发一个特殊版本的网站为每个格式(设备)。今天,我们将创建一个新的响应菜单看起来像facebook菜单。创建这个菜单,我们不需要javascript,一切实现仅使用CSS3(IE7-IE10、Firefox、Opera,Safari,Chrome和iPad / iPod / iPhone)。HTML

一切都在这个阶段应该清楚。创建第一个版本(使用选择器)我们必须添加这个元素(菜单)以下:默认情况下,这个选择器是隐藏的。可见只有小型设备(由于其响应规则)CSS* { margin: 0; padding: 0;}html { background-color: #E9EAED; height: 100%;}body { color: #333333; font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;}/* other elements */#nav_v2 { display: none;}现在,我们可以准备顶级风格元素:/* top level elements */#nav, #nav ul { list-style: none outside none; margin: 0; padding: 0;}#nav { background-color: rgb(78,105,162); background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1))); background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); border-bottom: 1px solid #3A4B7B; height: 22px; padding: 10px 0 10px 5px; position: relative;}#nav > li { float: left; height: 22px; padding-right: 6px; position: relative; text-align: left;}#nav > li > a { border: 1px solid transparent; color: #FFFFFF; display: block; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; margin: -3px 0 0 -1px; padding: 0 1px 0 11px; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}#nav > li:hover > a, #nav > a:hover { background-color: #425691; border-radius: 2px 2px 2px 2px; color: #FFFFFF; margin-right: -8px; padding: 0 9px 0 11px; position: relative; z-index: 1;}#nav > li.subs:hover > a { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); border-bottom-width: 0; border-radius: 2px 2px 0 0; color: #000000; text-shadow: 0 0 transparent; z-index: 2;}菜单上有蓝色渐变线,所有的元素都是浮动,左对齐(横向并排)。下一个元素是一个菜单元素之间的分隔符:/* top items separator */#nav > li:after { background-color: #405791; content: ""; height: 17px; left: 1px; position: absolute; top: 2px; width: 1px;}#nav > li:first-child:after { background-color: transparent;}完成菜单,我们需要添加子菜单的样式(下拉):/* submenu */#nav ul { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); *border: 1px solid rgb(100, 100, 100); border-radius: 0 0 3px 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); display: none; left: -1px; margin-top: 2px; min-width: 200px; padding: 6px 0; position: absolute; top: 100%; z-index: 1;}#nav li:hover ul { display: block;}#nav ul li a { border-bottom: 1px solid transparent; border-top: 1px solid transparent; color: #232B37; display: block; font-size: 12px; line-height: 20px; padding: 0 22px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap;}#nav ul li a:hover { background-color: #6D84B4; border-bottom: 1px solid #3B5998; border-top: 1px solid #3B5998; color: #FFFFFF;}就这样。菜单已经准备好了,我们可以开始添加响应方式(使用媒体查询)。/* responsive rules */@media all and (max-width : 980px) { #nav { display: none; } #nav_v2 { background-color: rgb(78,105,162); border: 1px solid #3A4B7B; color: #FFFFFF; cursor: pointer; display: block; margin-bottom: 30px; padding: 6px; width: 100%; } #nav_v2 select { color: #FFFFFF; cursor: pointer; }}

类似Facebook的响应菜单

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»