响应式导航菜单

代码如下

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <link rel="stylesheet" href="day01.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

    <div class="bars">

        <span></span>

        <span></span>

        <span></span>

    </div>

    <div class="nav">

        <ul>

            <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>

    <script type="text/javascript">

        $(".bars").click(function(){

            $(".bars").toggleClass("active");

            $(".nav").toggleClass("active");

        })

    </script>

</body>

</html>

定义样式：

*{

    margin: 0;

    padding: 0;

}

body{

    background: #000;

}

ul{

    list-style: none;

}

a{text-decoration: none}

.bars{

    width: 60px;

    height: 60px;

    background: #fff;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1;

}

.bars span{

    width: 30px;

    height: 2px;

    background: #000;

    position: absolute;

    left: calc(50% - 15px);

    top:calc(50% - 1px);

    transition: 0.1s;

}

.bars span:first-child{

    transform: translateY(-10px);

}

.bars span:last-child{

    transform: translateY(10px);

}

.bars.active span:first-child{

    transform: rotate(45deg);

}

.bars.active span:nth-child(2){

    transform: translateX(-100%);

    opacity: 0;

}

.bars.active span:last-child{

    transform: rotate(-45deg);

}

.nav{

    height: 60px;

    background: #fff;

    transition: .4s;

}

.nav ul{

    float: right;

    display: flex;

}

.nav ul li{

    border-right:1px solid rgba(0,0,0,.2);

    line-height: 60px;

}

.nav ul li:last-child{

    border: 0;

}

.nav ul li a{

    padding: 0 20px;

    display: block;

    color: #262626;

}

.nav ul li a:hover{

    background: #262626;

     color: #fff;

}

.nav.active{

    transform: translateX(-100%);

}

/*媒体查询*/

        /*屏幕宽度最大570px的时候执行里面的css*/

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

    .nav{

        height: 100vh;

    }

    .nav ul{

        width: 100%;

        display: inherit;

        text-align: center;

    }

    .nav ul li{

        border-bottom: 1px solid rgba(0,0,0,.2);

    }

}

效果图：

web--响应式导航菜单的更多相关文章

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

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

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

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

  3. HTML5响应式导航

    HTML5响应式导航HTML5,响应式,jQuery特效,HTML5导航,HTML5响应式导航是一款基于HTML5实现的深灰色响应式导航菜单. 地址:http://www.huiyi8.com/sc/ ...

  4. CSS+JS相应式导航菜单

    响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...

  5. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  6. CSS3 media queries + jQuery实现响应式导航

    目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  9. web响应式之bootstrap的基础用法。

    1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...

随机推荐

  1. 把Vim改装成一个IDE编程环境

    一:安装中文帮助手册 1.  打开一个终端    2.下载vimcdoc-1.5.0.tar.gz        下载地址: http://nchc.dl.sourceforge.net/source ...

  2. mongoexport导出记录到csv文件

    root@service:~# mongoexport -d prod -c employees -f _id,platform,phone --csv -o /opt/employees.csv 2 ...

  3. mysql group by 去重 分类 求和

    w SELECT COUNT(*) FROM ( SELECT COUNT(*) FROM listing_vary_asins GROUP BY asin, countrycode ) AS w; ...

  4. 10.6 Comment Syntax

    w https://dev.mysql.com/doc/refman/5.7/en/comments.html MySQL 5.7 Reference Manual  /  Language Stru ...

  5. (转)flexpaper 参数

    本文转载自:http://blog.csdn.net/z69183787/article/details/18659913 Flexpaper可能用到如下参数   SwfFile (String) 需 ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_6_泛型通配符

    泛型通配符是一个问号 也是代表不确定的意思 换成Object两个都报错了. 泛型是没有继承概念的,所以上面写Object就会报错.这里应问号 可以代表位置类型 it.next会自动用Object接收 ...

  7. shell脚本一一项目6

    主题:获取网卡的流量 ifconfig 查看流量 文件流量数据量 脚本内容 #!/bin/bash#name: mark# check network dev's liuliangnic=$1 ech ...

  8. 基于PyQt5的Python-Gui开发

    环境搭建 电脑环境 win10 64位系统 Python3.5安装 从Python官网下载python3.5安装文件,选择windows 64位版本python-3.6.5-amd64.exe.双击安 ...

  9. 医院里的CR、DR、CT、磁共振、B超都是什么？

    转自 百度知道MR CT CR DR DSA X线 都事医学影像疾病诊断的一种. MRI 是磁共振影像检查,可以获得横断面,矢状面和冠状面的影像.空间分辩率好. CT 是一种X线诊断设备,是一种复杂的 ...

  10. Node.js实战11：fs模块初探。

    fs模块封装了对文件操作的各种方法,比如同步和异步读写.批量操作.流.监听. 我们还是通常例程学习, 获取目录下的文件清单: var fs =require("fs"); fs.r ...