最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css简单实现响应式菜单例子
时间:2016-04-22 编辑:简简单单 来源:一聚教程网
最终效果如上,手机端(左)、电脑端(右)
ps://www.idevs.cn/wp-content/uploads/%E6%9C%AA%E6%A0%87%E9%A2%98-5.png" />
我有一个十分奇葩的毛病,那就是莫名其妙的对前端框架十分抵触,总觉得它很臃肿,所以日常一些小项目我都是手写代码,尽量只写用到的代码,强迫症患者,好像这样效率低一些,不过可以锻炼一下嘛(尼玛CSS和HTML有什么好锻炼的,借口!)
正好最近在做一个网站的时候,要用到响应式,页面内容很容易,只是nav需要js配合才能做到比较完美的响应式,于是,像上面那样的导航菜单就写出来了。
使用的jQuery,所以只要你的页面引用了一次jQuery,那么代码量真的是相当少,两三段就实现了js控制,那么,粗暴一点,直接贴代码吧。
HTML框架:
CSS:
#header{width:100%;}
#header .navs{background:#5c7;width: 100%;line-}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;text-align:center;}
#header .navs .menu li{line-}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}
嗯,大概就是这样,上面代码的Demo效果如下:
自行修改代码美化吧,就不继续贴代码了。
-
上一个: 常用的CSS技巧代码段整理
相关文章
- 简单的css 滑门菜单代码 07-17
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26