个人中心
gpt4 book ai didi

javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)

转载 作者：太空宇宙 更新时间：2023-11-04 01:03:47 25 4
gpt4 key购买 nike

我想要一个粘性标题导航菜单，在桌面浏览器上包含文本和图标，但在移动设备上只有图标(如我在本文底部的草图所示 - 忽略使用的颜色。)我已经开始在这里编写代码:https://codepen.io/jord8on/pen/pxgjZq

This article给出了另一个我想要拥有的例子。 (特别是“选项卡式导航”样本的第三个)

以下是我需要的帮助:

  1. 当浏览器宽度缩小到 600 像素以下时，我希望图标旁边的标签/文本消失，只显示图标。
  2. 我希望 .navbar 在桌面和移动设备上保持粘性并在用户向下滚动时保持在屏幕顶部。
  3. 我希望突出显示“事件”菜单项，具体取决于用户在站点中的位置。
    1. 主页、类(class)、资源和事件都将位于 Wordpress 站点内的不同区域。
    2. “社区”选项卡将链接到运行 Discourse 社区的子域

如有任何帮助，我们将不胜感激! 🙌

enter image description here

当前的 CSS/HTML:

/* Style the navigation bar */
.navbar {
  width: 100%;
  background-color: #B7234C;
  overflow: auto;
}

/* Navbar links */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px 0px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 20%;
}

/* Navbar links on mouse-over */
.navbar a:hover {
  background-color: #961d3f;
}

/* Current/active navbar link */
.active {
  background-color: #d6295a;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
  }
}	
<!-- Load font awesome icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-comments"></i> Community</a> 
  <a href="#"><i class="fa fa-fw fa-edit"></i> Courses</a> 
  <a href="#"><i class="fa fa-fw fa-star"></i> Resources</a>
	<a href="#"><i class="fa fa-fw fa-calendar"></i> Events</a>
</div>

最佳答案

  1. 在 anchor 标签中的文本之间放置一个跨度，并将其定位在媒体查询上，并显示为 none
  2. 在您的导航栏上固定一个位置，您可能需要重新设置正文的边距。我在高度上添加了 4000 像素以反射(reflect)粘性滚动。
  3. 根据页面更改 body 标记上的类，并在需要时在 CSS 中进行编辑，此示例以事件图标为目标。 Codepen希望这会有所帮助。

body{
  margin: 0;
  height: 4000px;
}
/* Style the navigation bar */
.navbar {
  position: fixed;
  width: 100%;
  background-color: #B7234C;
  overflow: auto;
}

/* Navbar links */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px 0px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 20%;
}

/* Navbar links on mouse-over */
.navbar a:hover {
  background-color: #961d3f;
}

/* Current/active navbar link */
/* In your html you change the body class and target it in here */
/* This example uses the events icon which is a child 5 in the navigation */
.events .navbar a:nth-child(5) {
  background-color: #d6295a;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 700px) {
  
  .navbar{
    display: flex;
  }
  .navbar span{
    display: none;
  }
}	
<!-- Change the class name depending on the page that you're in then modify the css -->
<body class="events">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i><span> Home</span></a> 
  <a href="#"><i class="fa fa-fw fa-comments"></i> <span>Community</span></a> 
  <a href="#"><i class="fa fa-fw fa-edit"></i><span> Courses</span></a> 
  <a href="#"><i class="fa fa-fw fa-star"></i> <span>Resources</span></a>
	<a href="#"><i class="fa fa-fw fa-calendar"></i><span> Events</span></a>
</div>
</body>

关于javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52616528/

25 4 0
文章推荐： css - React 和 CSS 样式
文章推荐： c - 多次调用 pthread_join 如何工作？
文章推荐： java - 返回在各种语言的函数中创建的数组和对象
文章推荐： node.js - 将静态卡片分享到 G+ 圈子
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com