零基础建站培训教程介绍

当前位置:

如何将PC站导航改造成响应式导航栏

现在都流行响应式网站,它可以自动响应PC端与手机端。对于很多以前的PC站,网站上的导航栏只能适应于电脑端浏览,在手机浏览时就会出现错位。(相关知识:什么是响应式网站?自适应和响应式有什么区别

单一的PC站导航是这样的:

如何将PC站导航改造成响应式导航栏

响应式导航栏是这样的:

如何将PC站导航改造成响应式导航栏

为了适应手机端的显示,我们在做网站时可以把PC站导航转化成响应式导航栏。下面学做网站论坛介绍一下响应式导航栏制作方法。

方法/步骤

  1. 为了制作手机响应式导航栏不影响PC端导航栏,我们需要将手机响应式导航栏单独做一个CSS文件,命名为wap.css;
  2. 在头部代码里使用以下的代码进行引入:(这里用法可参考教程:怎样将PC网站改为自适应网站
    
    
    <link href="images/wap.css" type="text/css" rel="stylesheet" media="screen and (max-width:768px)">
  3. 制作响应式导航栏使用原理就是在手机状态下隐藏导航栏,所以需要在wap.css中写上隐藏导航栏的DIV的样式;
    
    
    #nav{display:none;}
  4. 在网站导航栏代码下方添加一个手机端按钮的空DIV,用于显示手机端导航栏点击按钮;
    
    
    <div class="mb_bar"></div>
  5. 在wap.css中,给点击按钮添加一个样式,用于显示按钮;
    
    
    .mb_bar{/*代码来源:学做网站论坛https://www.xuewangzhan.net/*/display:block;border: none; width: 40px; height: 40px;text-indent: -900em; overflow: hidden; position: absolute;top: 25px;right: 2%;cursor: pointer;outline: none;background: #0a5fb7 url(menu-button-bg.png) no-repeat center center; background-size: 50%;z-index:99;border-radius:5px;}
  6. 设置点击按钮显示菜单,再点击隐藏菜单的效果。(注意:自动下载jquery.min.js和修改DIV名称)
    
    
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.min.js"></script>
    <script>
        $(document).ready(function(e) {
        $(".mb_bar").click(function(e) {
            $(".mb_meau").toggle(200);
        });
    });
    </script>
  7. 最后还要修改手机导航样式为纵向排列,很简单,只需要在wap.css中,控制它们的显示样式即可。
    
    
    .mb_meau{margin: 5px 0 0 0;position: absolute;width: 50%;height:auto;right:0;background:#0a5fb7;z-index:88;}
    .mb_meau li{display:block;line-height:3em;text-align:left;text-indent:5%;  border-top: 1px solid #0576ec; border-bottom: 1px solid #0053aa;}
    .mb_meau li a{color:#fff;}
  8.  通过以上的几步操作,就可以将单一PC站导航改造成PC+手机站的响应式导航栏了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程