时间戳

首页 > 解决方案 > 如何创建在移动和桌面之间动态变化的粘性标题（无汉堡包）

javascript - 如何创建在移动和桌面之间动态变化的粘性标题（无汉堡包）

问题描述

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

这篇文章给出了我想要拥有的另一个例子。（特别是“标签式导航”示例的第 3 个）

这是我需要帮助的地方：

  1. 当浏览器宽度缩小到 600 像素以下时，我希望图标旁边的标签/文本消失并且只显示图标。
  2. 当用户向下滚动时，我希望 .navbar 保持粘性并保持在桌面和移动设备的屏幕顶部。
  3. 我想根据一个人在站点中的位置突出显示“活动”菜单项。
    1. 主页、课程、资源和活动都将成为 WordPress 网站中的不同区域。
    2. 社区选项卡将链接到运行 Discourse 社区的子域

任何帮助将不胜感激！

在此处输入图像描述

当前的 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>

标签： javascripthtmlcssuser-interfacenavigation

解决方案

我在上面评论过，但这里有一个例子：

@jord8on 我在上面的代码中向导航栏添加了另一个属性。请记住，您可能需要在与导航栏相同高度的任何后续元素中添加上边距。Position fixed 将该元素从 DOM 流中取出。至于第三部分，是不是每个页面都在一个单独的html文件中？或者您如何使导航栏在全球范围内可用？您需要编写一些 PHP 来将“活动”类回显到您使用 Wordpress 的链接中。

评论有点冗长，所以这里是更容易阅读的选项。对于那个很抱歉。

   /* Style the navigation bar */
   .navbar {
      width: 100%;
      background-color: #B7234C;
      overflow: auto;
      //Add this to the navbar element
      position: fixed;
   }
   @media screen and (max-width: 600px) {
      .navbar a {
        float: none;
        display: block;
      }
      .mob-off {
          display: none;
      }
    }

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

推荐阅读