响应式导航菜单

代码如下

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. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  2. VMware 虚拟化编程(7) — VixDiskLib 虚拟磁盘库详解之三

    目录 目录 前文列表 VixDiskLib 虚拟磁盘库 VixDiskLib_GetMetadataKeys VixDiskLib_ReadMetadata 获取虚拟磁盘元数据 VixDiskLib_ ...

  3. KVM/QEMU/qemu-kvm/libvirt 概念全解

    目录 目录 前言 KVM QEMU KVM 与 QEMU qemu-kvm Libvirt Libvirt 在 OpenStack 中的应用 前言 如果是刚开始接触虚拟机技术的话, 对上述的概念肯定会 ...

  4. LDA提取信息

    文本主题模型提取 如下程序将句子主题提取后,将权重值存入dataframe. #!/usr/bin/python # -*- coding:utf-8 -*- import pandas as pd ...

  5. 类TreeSet

    /* * TreeSet能够对元素按照某种规则进行排序 * * 排序有2种方式 * A自然排序 * B比较器排序 * */ import java.util.TreeSet; /* * TreeSet ...

  6. Leaflet

    https://leafletjs.com/ https://github.com/Leaflet/Leaflet

  7. Python笔记(二十七)_魔法方法_容器

    定制容器 容器类型的协议: 定制不可变容器,只需要定义__len__()和__getitem__()方法 定制可变容器,需要定义__len__().__getitem__().__setitem__( ...

  8. 【ABAP系列】SAP 读取生产订单 记入文档的货物移动明细

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单 记入文档的 ...

  9. 执行 bower -v 时出现内部错误

    安装nodejs ,我的位置是D:\node.js_install.全局模块安装默认放在C:\Users\Administrator\AppData\Roaming\npm\node_modules里 ...

  10. 20190905 Lombok常用注解

    Lombok常用注解 val 用于声明类型,将从初始化表达式推断出类型,仅适用于局部变量和foreach循环,而不适用于字段.声明的局部变量为final变量. Java自带类型推断随着JDK版本提升越 ...