响应式导航菜单

代码如下

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. ORACLE Physical Standby 级联备库搭建

    搭建oracle 级联DG 现有架构:physical standby 一主二备,在此基础上,在主库下新建备库standby3.级联备库cascade 数据库版本 11.2.0.4 db_name=p ...

  2. 【洛谷P1069 细胞分裂】

    题目链接 首先,光看题就觉得它很扯淡(你哪里来这么多的钱来买试管) 根据某位已经ak过ioi的名为ych的神仙说(一看就是数学题,一看就需要因式分解,emm,我果然没有发现美的眼睛qwq) 那么我们就 ...

  3. ThreadPoolExecutor 源码分析

    ThreadPoolExecutor 线程池核心实现类 线程池的生命周期 RUNNING: 接受新任务,同时处理工作队列中的任务 SHUTDOWN: 不接受新任务,但是能处理工作队列中的任务 STOP ...

  4. loc() iloc() at() iat()函数

    1 四个函数都是用于dataframe的定位 []用于直接定位. loc()函数是用真实索引,iloc()函数是用索引序号. loc()函数切片是左闭右闭,iloc()函数切片是左闭右开. at(), ...

  5. 【ABAP系列】SAP 获取工单和工序的状态

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 获取工单和工序的状态   ...

  6. mysql5.7密码登录的那些坑

    mysql5.7密码策略及修改技巧 繁著 关注 2017.08.18 22:41* 字数 522 阅读 10184评论 0喜欢 4 mysql升级5.7版本以后,安全性大幅度上升. MySQL5.7为 ...

  7. 链表两数相加(add two numbers)

    问题 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它 ...

  8. [转]JavaScript构造函数及原型对象

    JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同. JS中对象可以定义为”无序属性的集合”.其属性可以包含基本值,对象以及函数.对象实质上就是一组没有特定顺序的值,对象中 ...

  9. web service接口 wsdl和asmx有什么区别

    没有区别,只是后缀名的区别.Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立 ...

  10. ODBC Driver Development

    ODBC Driver Development By Vikash Agarwal, May 01, 2002 Open your database system to the world. Vika ...