响应式导航菜单

代码如下

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. nf_conntrack: table full, dropping packet解决方法

    https://blog.csdn.net/yanggd1987/article/details/45886913

  2. Python Django的安装配置

    学习Django前,我们要确定电脑上是否已经安装了Python,目前Python有两个版本,不过这两个版本并不互相兼容,所以根据个人选择合适的版本. 因为从Django2.0开始将不再支持Python ...

  3. DAY 4 下午

    一些图论的知识(主要补充一下之前不了解的和比较重要) 竞赛图:完全图上的边加方向 仙人掌:每一条边至多属于一个环 前序:中左右 中序:左中右 后序:左右中 先加进去无向边 把每一个联通块看成一个大点 ...

  4. 关于问题的四个单词区别: question problem matter issue

    [[ 网上讨论的 problem, question, issue, matter这些名词均含"问题"之意.problem: 指客观上存在的.难以处理或难以理解的问题.questi ...

  5. (转) intellij idea部署web项目时的位置(Tomcat)

    这篇文章说的比较好: 原文地址:https://blog.csdn.net/zmx729618/article/details/78340566 1.当你项目启动的时候console能看到项目运行的位 ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_4_定义和使用含有泛型的方法

    泛型方法 泛型也可以用在方法上 测试 调用的时候,可以传递多种数据类型 . 泛型的静态方法

  7. VGA时序及其原理（转载）

    显示器扫描方式分为逐行扫描和隔行扫描:逐行扫描是扫描从屏幕左上角一点开始,从左像右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT对电子束进行消隐,每行结束时,用行同步信 ...

  8. Makefile之patsubst

     经常要手写项目的Makefile,或者看其他项目的遗留项目的Makefile,有些makefile内置函数常用, 却用完就忘记了,最近项目中使用patsubst,感觉挺好用的     格式:$(pa ...

  9. C#中拼音模糊匹配汉字智能搜索

    准备: 微软官方出了一个专用的汉字转拼音包Microsoft Visual Studio International Pack 1.0 SR1 首先到官网http://www.microsoft.co ...

  10. python+selenium元素定位之CSS学习02

    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...