响应式布局之网站头部导航
2016-12-16 17:31
323 查看
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187798.html
网页支持响应式布局的好处我就不说了,这里我通过写一个简单的网站导航来学习响应布局的开发
Meta标签定义
<!--使用 viewport meta 标签在手机浏览器上控制布局--> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <!--通过快捷方式打开时全屏显示--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--隐藏状态栏--> <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> <!--iPhone会将看起来像电话号码的数字添加电话连接,应当关闭--> <meta name="format-detection" content="telephone=no" />
定义body中的结构
<div class="nav"> <ul> <li> <a href="#" class="actived">网站首页</a> </li> <li> <a href="#">公司案例</a> </li> <li> <a href="#">公司相册</a> </li> <li> <a href="#">团队博客</a> </li> <li> <a href="#">关于我们</a> </li> </ul> <img src="img/more_black.png" /> </div>
定义样式
<style type="text/css"> body { margin: 0; padding: 0; } .nav { position: relative; background-color: #fff; height: 78px; width: 100%; border-bottom: 1px solid #DADADA; } .nav img { position: absolute; right: 20px; top: 30px; width: 28px; display: none; } .nav ul { list-style: none; margin: 0; padding: 0; text-align: center; } .nav ul li { height: 78px; width: 168px; line-height: 78px; text-align: center; display: inline-block; } .nav ul li:hover { cursor: pointer; } .nav ul li a { text-decoration: none; color: #666; padding-bottom: 8px; } .nav ul li .actived { border-bottom: 3px solid #EE5C42; } </style>
查看效果图
可以看到导航已经显示出来了,我们给导航加上点击事件以改变导航选中样式
<script> $(function() { $(".nav ul li").click(function() {//导航点击 $(".nav ul li a").removeClass("actived"); $(this).children("a").addClass("actived"); }); }); </script>
那如果说我们想要支持响应式布局该怎么做呢?
上面最开始我们已经添加支持手机的Meta相关标签元素了,接着我们通过媒体查询来使我们手机支持响应式导航显示
主要用到@media only screen and (max-width: 878px) {} 设置当屏幕宽度小于878px的时候执行里面的样式
这里我们先在右上角显示一个图标,然后点击图标的时候显示右侧的导航,再点击图标隐藏右侧的导航
我们继续在Style标签内添加以下样式
/*媒体查询*/ /*屏幕宽度小于878px的时候执行里面的css*/ @media only screen and (max-width: 878px) { .nav img { display: inline; } .nav ul { position: absolute; right: 0; text-align: right; top: 78px; display: none; } .nav ul li { display: block; border: 1px solid #dadada; height: 58px; line-height: 58px; width: 98px; } .nav ul li a { display: block; padding-bottom: 0; } .nav ul li .actived { border-bottom: none; } .nav ul li a:hover { background-color: #6E6E6E; color: #fff; } }
最后将js添加上去,用于操作显示或隐藏下方导航列表
$(".nav img").click(function() {//显示或隐藏下方导航列表 $(".nav ul").slideToggle(100); });
OK,完成。
我们来看下效果,在手机上面打开网页显示导航如下图
点击右侧图标显示导航效果
相关文章推荐
- 网站实施--头部导航 样式的控制
- 夺命雷公狗ThinkPHP项目之----企业网站30之网站前台头部导航的高亮显示
- 网站导航固定头部
- uikit之前几章综合应用制作响应式网站头部导航
- JS+CSS打造网站头部蓝色简约可自动显示/隐藏的导航菜单
- 30讲项目实战:网站面包屑导航+表单功能开发
- 网站模版html,响应式布局
- 跟我学SharePoint 2013视频培训课程——自定义网站导航(4)
- jQuery防京东浮动网站楼层导航代码
- 网站导航如何做SEO优化?又快又准是关键
- 经典网站设计:10个独具创意的网站头部设计示例
- 解释网站导航选项的3种方法技巧
- 网站导航——网站地图和TreeView的使用
- 程序员网站资源导航
- opencart 头部三级导航
- jquery 根据网站url给导航nav添加active效果
- 摘自支付宝网站生活助手导航代码-导航菜单类
- 大电商网站导航用户体验对比
- JQuery定制sharepoint网站的左边导航