web网页如何实现响应式导航栏--移动端导航栏

这篇具有很好参考价值的文章主要介绍了web网页如何实现响应式导航栏--移动端导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:

    一提到响应式导航栏,大家第一反应可能就是bootstrap响应式导航栏,这个响应式的一般是针对屏幕变小时,视口出现导航栏,可是,展示到移动端的时候,并没有变化???在网上看了几篇文章都是这样,可能是需要配合其他插件使用,或者,写下js。后来,发现一篇文章讲解了原因,并用很简单的js实现了web端的网页和移动端导航的需求,所以,在此记录一下吧。先看下效果图,如下:
web网页如何实现响应式导航栏--移动端导航栏
web网页如何实现响应式导航栏--移动端导航栏

一、主要代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1">-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Responsive Navigation Bar</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            padding:0;
            margin:0;
        }
        body {
            font-family: 'Josefin Sans',sans-serif;
        }
        .navbar {
            font-size: 18px;
            background-image:linear-gradient(260deg,#2376ae 0%, #c16ecf 100%);
            border:1px solid rgba(0,0,0,0.2);
            padding-bottom: 10px;
        }
        .main-nav {
            list-style-type: none;
            display:none;
        }
        .main-nav li {
            text-align:center;
            margin:15px auto;
        }
        .nav-links, 
        .logo {
            text-decoration:none;
            color:rgba(255,255,255,0.7);
        }
        .logo {
            display:inline-block;
            font-size: 22px;
            margin-top:10px;
            margin-left:20px;
        }
        .navbar-toggle {
            position:absolute;
            top:10px;
            right:20px;
            cursor:pointer;
            color:rgba(255,255,255,0.8);
            font-size:24px;
        }
        .active {
            display:block;
        }
        
        /*针对桌面网页设计*/
        @media all and  (min-width:768px) {
            .navbar {
                display: flex;
                justify-content: space-between;
                padding-bottom:0;
                height:70px;
                align-items:center;
            }
            .main-nav {
                display: flex;
                margin-right:30px;
                flex-direction: row;
                justify-content: flex-end;
            }
            .main-nav li {
                margin:0;
            }
            .nav-links {
                margin-left:40px;
            }
            .navbar-toggle {
                display: none;
            }
            .logo:hover,
            .nav-links:hover {
                color:rgba(255,255,255,1);
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <span class="navbar-toggle" id = "js-navbar-toggle">
            <i class="glyphicon glyphicon-align-justify"></i>
        </span>
        <a href="#" class="logo">logo</a>
        <ul class="main-nav" id="js-menu">
            <li>
                <a href="#" class="nav-links">Home</a>
            </li>
            <li>
                <a href="#" class="nav-links">Products</a>
            </li>
            <li>
                <a href="#" class="nav-links">About Us</a>
            </li>
            <li>
                <a href="#" class="nav-links">Concat Us</a>
            </li>
            <li>
                <a href="#" class="nav-links">Blog</a>
            </li>
        </ul>
    </nav>
    <script type="text/javascript">
        let mainNav = document.getElementById('js-menu');
        let navBarToggle = document.getElementById('js-navbar-toggle');
        navBarToggle.addEventListener("click",function(event) {
            mainNav.classList.toggle("active")
        })
    </script>
</body>
</html>

二、代码解析

    其实,上面主要的思想就是:

这样的网站,也叫作响应式web设计,一般的响应式web设计,我们遵循的原则是:移动优先,渐进增强
那么,在本次例子中,我们就是采用了移动优先的策略。

    虽然,我们在桌面版的网页上,可以实现这个效果,但是,若此时你打开移动端的网页,会发现,导航栏的宽度为980px ?!?(ps:这就是我在网上看到的大部分情况。)
web网页如何实现响应式导航栏--移动端导航栏
    那么,为什么会这样呢?
    其实,在响应式web开发中,视口是一个很重要的概念,这里了解一下:理想视口和默认视口。

  • 什么是默认视口:当我们直接把桌面版的网页在移动端打开的时候,设备的宽度发生变化,那么网页也会随之发生变化。在ios中,会把桌面版的网页相对于980px进行布局,然后进行压缩,展示到移动端上。在上面的动图中,会发现导航条的宽度确实为980px ;
  • 什么是理想视口:就是指网页的布局宽度为设备的真实宽度。在这里就是,假设我们的移动宽高为375*667px,那么理想情况下就是根据宽度375px进行布局的。
        所以,就是说,在上面的代码中,虽然使用了媒体查询,但是在移动端仍然使用的是相对默认的视口进行布局,我们可以通过设置meta标签进行转换为理想视口。关键就是下面这句代码: (ps:把下面这句代码,加入到head中即大功告成,即开头代码中注释的那句代码)
<meta name="viewport" content="width=device-width,initial-scale=1">

web网页如何实现响应式导航栏--移动端导航栏
    其实,在桌面端和移动端,导航栏的布局稍微会有些不一样,通过css进行不同的布局即可。
    那么,在移动端,通过js点击,实现移动端导航的展示与收缩即可。

 <script type="text/javascript">
        let mainNav = document.getElementById('js-menu');
        let navBarToggle = document.getElementById('js-navbar-toggle');
        navBarToggle.addEventListener("click",function(event) {
            mainNav.classList.toggle("active")
        })
 </script>
参考博客:

Web小技术之实现响应式导航条 https://www.jianshu.com/p/d13800f962c2文章来源地址https://www.toymoban.com/news/detail-492640.html

到了这里,关于web网页如何实现响应式导航栏--移动端导航栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 响应式web-PC端web与移动端web(H5)兼容适配 选型方案

    背景 项目需要,公司已经有一套PC端web,需要做一套手机端浏览器可用的,但是又想兼容pc端,适配的web项目。 以下是查阅到响应布局现成的开源模版。根据自己技术栈,vue2,js来搜索相关的开源项目。 使用若依快速构建web应用程序,有单独的移动端项目。 RuoYi 是一个 Java

    2024年02月05日
    浏览(36)
  • 如何在小程序中设置导航栏文字颜色和背景颜色

    不同商家有不同的颜色风格,例如有些做设计的公司,主要是黑色风格;有些卖珠宝的商家,主要是金色风格;他们的小程序,也需要进行同样的风格设定。下面具体介绍怎么在小程序中进行整个风格设定。 1. 在小程序管理员后台-基本设置页面,可以看到导航栏文字颜色和

    2024年02月04日
    浏览(88)
  • 什么是响应式图片?如何在网页中实现响应式图片?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(47)
  • Outlook如何将导航栏从左侧移动到底部

    好久没更新公众号了 从今天开始恢复公众号的运营!!! 今天我们就来讲干货~ 下午有一位小姐姐询问我,为什么我的outlook的导航栏在左侧,能不能改成底部。和原来的样子一样~~ 我刚开始认为,找到视图选项卡,把文件夹窗格改成普通即可。 结果发现并不能这么简单 后来

    2024年02月09日
    浏览(39)
  • 智能导航:教你轻松用JavaScript实现网页电梯导航功能

    提示:本文为原创内容 文章目录 前言 二、功能实现 1.页面效果图 2.HTML部分 3.CSS部分 4.JavaScrip部分 5.整体代码 总结  在当前的网络时代,用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用,用户在阅读长篇内容时可能会感到操作不便。然而,电梯导航

    2024年01月16日
    浏览(33)
  • [HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 横向二级导航菜单 Web页面设计实例 总结 该练的还是要练,终究是自己的! 网页标题:二级下拉导航

    2024年01月17日
    浏览(56)
  • Vue中如何进行移动端适配与响应式布局?

    如今,移动端适配与响应式布局已经成为Web开发中不可或缺的一部分。Vue.js作为一款流行的JavaScript框架,也提供了许多有用的工具和技术来实现移动端适配和响应式布局。在这篇文章中,我们将讨论如何在Vue.js中进行移动端适配与响应式布局,包括媒体查询、flexbox布局和第

    2024年02月09日
    浏览(32)
  • 大二Web课程设计:服装网页设计题材——HTML+CSS汉服文化带背景音乐素材带视频(12页)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年01月17日
    浏览(41)
  • 【Outlook】如何将Outlook导航工具栏从侧面移动到底部

    最近突然发现Outlook现在在左侧文件夹列表旁边显示邮件、日历、联系人、任务和其他区域的导航按钮,这让一些Outlook用户感到不适应,因为他们已经习惯了旧的布局,而这种改变会带来各种不便。新设计旨在为Outlook和其他Office应用程序提供更直观的外观。类似于Web版本和

    2024年02月11日
    浏览(32)
  • javascript实现网页背景音乐自动播放

    在HTML文档中添加一个标签,指定音乐文件路径和自动播放属性。 在JavaScript中获取该元素,设置其音量为0(静音)或一个合适的值。 在网页加载完毕后,调用元素的play()方法,开始播放音乐。 完整代码如下: 注意:自动播放可能会受到浏览器限制,需要用户允许浏览器自动

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包