响应式导航菜单

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

需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的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. scala slick mysql utf8mb4 支持

    语言  scala sql包  slick 3.2.0 数据库  mysql https://stackoverflow.com/questions/36741141/scala-slick-jdbc ...

  2. linux通过grep根据关键字查找日志文件上下文

    linux通过grep根据关键字查找日志文件上下文 1.在标准unix/linux下的grep命令中,通过以下参数控制上下文的显示: grep -C 10 keyword catalina.out 显 ...

  3. 2.Redis数据类型

    Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: 字符串 Hash类型 List Set SortedSet(zset) 注:在redis中的命令语句中,命令是忽略 ...

  4. Servlet的Cookie对象

    Cookie的介绍:Cookie 定义:Cookie 用于浏览器端的数据存储,解决了不同请求之间需要数据共享的问题.例如,可以将用户的登录信息接收并设置为Cookie,对其进行相关操作以使得用户在特定 ...

  5. django操作非ORM创建的表

    问题:django的ORM怎么连接已存在的表,然后进行增删查改操作?     工作中会遇见很多二次开发的时候,表都是已经创建好的,用django的ORM进行二次开发,怎么操作数据库中的表呢? 下面介绍 ...

  6. Android内存调优的一些方法

    一.巧妙使用软引用和弱引用 软引用,系统内存紧张时会回收软引用对象,一般用用高速缓存,例如图片缓存,我们一般通过内存缓存图片来提高图片加载速度,但内存吃紧的时候可以通过软引用及时对图片资源回收. 弱引 ...

  7. JavaScript学习总结（一）基础部分

    转自:http://segmentfault.com/a/1190000000652749 基本概念 javascript是一门解释型的语言,浏览器充当解释器. js执行引擎并不是一行一行的执行,而是 ...

  8. ISBN|方正|超星|The national academies press|OECD|RSC|Springer Link|Knovel|Encyclopedia Britannica

    图书使用图书分类号ISBN作为图书的ID 大英百科全书(Encyclopedia Britannica)可用于找寻关键词或关键词相关信息,便于构建准确的检索式: Knovel:可使用物理化学性质查找相 ...

  9. 第十六届“二十一世纪的计算”学术研讨会 牛津大学肿瘤成像学教授Michael Brady主题演讲

    Computing and Healthcare 牛津大学肿瘤成像学教授Michael Brady主题演讲" title="第十六届"二十一世纪的计算"学术研讨 ...

  10. sql执行过程

    作为一个程序员,几乎所有人都使用过 SQL 语言,无论是在命令行执行.程序调用,还是在 SQL 工具里,你都做过这样的事:写一个规范的 SQL 语句,然后等待数据库返回的结果,然后再基于结果做各种逻辑 ...