响应式导航菜单

代码如下

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. Android单行跑马灯效果实现

    参考网址:https://www.jianshu.com/p/e6c1b825d322 起初,使用了如下XML布局: <TextView android:id="@+id/tv_per ...

  2. navigator组件（相当于a标签）

    navigator组件:页面链接: navigator组件属性: target:类型 字符串 在哪个目标上发生跳转,默认当前小程序 属性值:self 当前小程序 miniProgram 其他小程序 u ...

  3. python中导入sklearn中模块提示ImportError: DLL load failed: 找不到指定的程序。

    python版本:3.7 平台:windows 10 集成环境:Anaconda3.7 64位 在jupyter notebook中导入sklearn的相关模块提示ImportError: DLL l ...

  4. Basic Model Theory of XPath on Data Trees

    w https://openproceedings.org/2014/conf/icdt/FigueiraFA14.pdf From a database perspective, however, ...

  5. Rhybox播放mp3, smplayer如何播放flv等等

    [[ 支持mp3,在终端: sudo apt-get install gstreamer0.10-*plugins-ugly 支持wma,在终端: sudo apt-get install gstre ...

  6. 如何吸引用户打开自己发送的EDM邮件

    一般来说,邮件发送到用户的收件箱,但用户不一定会阅读.因为每个用户收到的邮件都很多.那么,究竟应该如何吸引读者打开自己的EDM邮件呢? 只有当用户认识并信任发件人的时候,此时邮件的打开率是最高的,可以 ...

  7. 纯CSS3写一个立方体并在鼠标悬停的时候无限循环旋转

  8. TP框架对数据库的基本操作

    数据库的操作,无疑就是连接数据库,然后对数据库中的表进行各种查询,然后就是对数据的增删改的操作,一步步的讲述一下框架对数据库的操作 想要操作数据库,第一步必然是要:链接数据库 一.链接数据库 (1)找 ...

  9. dvorak键盘布局调整

    一站直达: http://www.kaufmann.no/roland/dvorak/

  10. Vue 基础 day01

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...