响应式导航菜单

响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式

需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的CSS响应式布局

  • 掌握CSS重的display：none;
  • 简单的JS方法

下面是HTML代码

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>响应式菜单</title>

    <link rel="stylesheet" type="text/css" href="demo01.css"/>

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

</head>

<body>

    <div class="nav">

        <div  class="btn">

            <i id="btn" class="fa fa-bars"></i>

        </div>

        <div class="pic"></div>

        <ul id="menu" class="clearfix">

            <li><a href="#">首页</a></li>

            <li><a href="#">产品</a></li>

            <li><a href="#">购买</a></li>

            <li><a href="#">服务</a></li>

            <li><a href="#">联系</a></li>

        </ul>

    </div>

</body>

</html>

CSS样式

*{

    margin:0;

    padding:0;

    text-decoration:none;

    list-style:none;

}

.nav{

    background:blue;

    width:100%;

    position:relative;

}

.pic{

    background:url(bottom.jpg) no-repeat;

    position:absolute;

    width:128px;

    height:46px;

    top:8px;

    left:60px;

}

.btn{

    font-size:20px;

    color:#fff;

    background:#13138a;

    display:none;

}

.btn i{

    padding:20px;

}

ul{

    margin-left:200px;

}

ul li{

    float:left;

}

ul li a:hover{

    background:pink;

}

ul li a{

    display:block;

    padding:20px 30px;

    color:#fff;

}

.clearfix:after{

    display:block;

    height:0;

    content:"";

    visibility:hidden;

    clear:both;

}

@media screen and (max-width:768px){

    ul li{

        float:none;

        width:100%;

        text-align:center;

    }

    ul{

        width:100%;

        display:none;

        margin:0;

    }

    .btn{

        display:block;

    }

    .pic{

        left:50%;

        margin-left:-64px;

    }

}

js代码：

<script type="text/javascript">

    var btn=document.getElementById("btn");

    var menu=document.getElementById("menu");

    btn.onclick=function(){

        if(menu.style.display=="block"){

            menu.style.display="none";

        }else{

            menu.style.display="block";

        }

        window.onresize=function(){

            var ww=document.documentElement.clientWidth;

            if(ww>768){

                menu.style.display="block";

            }

        }

    }

</script>

当视口大于768px的时候：

当视口小于768px的时候，导航菜单需要隐藏起来：

持续更新，欢迎大家指教

CSS+JS相应式导航菜单的更多相关文章

  1. 响应式导航菜单（css+js）

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

  2. web--响应式导航菜单

    响应式导航菜单 代码如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. python测试开发django-41.crispy-forms设计标签式导航菜单（TabHolder）

    前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布 ...

  5. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

  6. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  7. CSS实现弹出导航菜单

    查看实际效果:http://keleyi.com/a/bjac/vksd7321.htm 完整代码,保存在html文件打开也可看到效果: <!DOCTYPE html PUBLIC " ...

  8. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...

  9. javascript笔记09：javascript的下拉式导航菜单

    <!DOCTYPE html> <html> <body> <script> function hideAll() { for(i=0;i<odi ...

随机推荐

  1. idea整合mybatis逆向工程

    --pom.xml添加插件 <build> <finalName>hnapi</finalName> <plugins> <plugin> ...

  2. 32）PHP，遍历对象的属性或者属性值

    首先是遍历属性: <?php class A{ ; ; ; function fetchAllProp(){ //遍历时,key取得属性名,value取得对应值 foreach($this as ...

  3. 部署企业本地yum源及源码包安装

    YUM命令 yum list //列出每个软件包(包括未安装和已安装) rpm -q repolist //列出所以仓库名称 info //查看软件信息 rpm -qi install //安装 rp ...

  4. 微信公众平台开发2-access_token获取及应用（含源码）

    微信公众平台开发-access_token获取及应用(含源码) 很多系统中都有access_token参数,对于微信公众平台的access_token参数,微信服务器判断该公众平台所拥有的权限,允许或 ...

  5. Oracle中的 timestamp 和 timestamp with time zone, timestamp with local time zone

    SQL> select dbtimezone, sessiontimezone from dual; DBTIME ------ SESSIONTIMEZONE ---------------- ...

  6. python语法基础-面向对象-基础-长期维护

    ###############    类的基本操作    ############## """ 类的基本认识: 1,类就是一个模子 2,dict,list都是类,具体的一 ...

  7. 双因子方差分析|adjusted R|强度|SSA|SSE|SST|

    应用统计学 方差分析的基本假设: 组间组平均与总平均的不同是由treatment引发的.单个值与组平均的不同是由组内error引发的. 如果没有处理误差SSA=SSE,所以右尾假设如果F>1则处 ...

  8. python学习笔记（3）数据类型-列表list

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...

  9. Java IO: 其他字符流(下)

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的PushbackReader,LineNumberReader,St ...

  10. FPGA基础架构总结

    1.为什么FPGA的整体逻辑的速度有限制? 与ASIC相比较,AS指的是(application specific)专用集成应用,而FPGA是可编程逻辑,在实现的过程中,AS是直接用最基础的逻辑门实现 ...