响应式导航菜单

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

需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的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. Python - 使用 PostgreSQL 数据库

    基本用法 # -*- coding: utf-8 -*- # !/usr/bin/python # 需要安装下面的驱动包 import psycopg2 # 连接到一个现有的数据库,如果数据库不存在, ...

  2. 吴裕雄--天生自然python机器学习：K-近邻算法介绍

    k-近邻算法概述 简单地说,谷近邻算法采用测量不同特征值之间的距离方法进行分类. 优 点 :精度高.对异常值不敏感.无数据输入假定. 缺点:计算复杂度高.空间复杂度高. 适用数据范围:数值型和标称型. ...

  3. O - Snacks（DFS序）

    百度科技园内有nn个零食机,零食机之间通过n−1n−1条路相互连通.每个零食机都有一个值vv,表示为小度熊提供零食的价值. 由于零食被频繁的消耗和补充,零食机的价值vv会时常发生变化.小度熊只能从编号 ...

  4. P - Atlantis （线段树+扫描线）

      There are several ancient Greek texts that contain descriptions of the fabled island Atlantis. Som ...

  5. 2018-1 WebStorm最新版本破解激活方法

    在激活页面选择License Server,输入:http://idea.codebeta.cn,点击Activate即可激活. 如果失效用这个:  http://idea.ibdyr.com

  6. 关于jQuery中toggle参数callback函数提前执行问题

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...

  7. 网站爬取-案例三：今日头条抓取(ajax抓取JS数据)

    今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...

  8. String截取字符串的指定字节长度

    /** TODO:截取字符串的指定字节长度 * @Author wenjing * @Date 11:02 2019/5/15 * @Param [str, bengin, end] * @retur ...

  9. cannot be found on object of type xx.CacheExpressionRootObject

    0 环境 系统环境:win10 编辑器:IDEA 1 前言->环境搭建 1-1 pom依赖 <?xml version="1.0" encoding="UTF ...

  10. [LC] 557. Reverse Words in a String III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...