我想要一个粘性标题导航菜单，在桌面浏览器上包含文本和图标，但在移动设备上只有图标(如我在本文底部的草图所示 - 忽略使用的颜色。)我已经开始在这里编写代码:https://codepen.io/jord8on/pen/pxgjZq
This article给出了另一个我想要拥有的例子。 (特别是“选项卡式导航”样本的第三个)
以下是我需要的帮助:
- 当浏览器宽度缩小到 600 像素以下时，我希望图标旁边的标签/文本消失，只显示图标。
- 我希望 .navbar 在桌面和移动设备上保持粘性并在用户向下滚动时保持在屏幕顶部。
- 我希望突出显示“事件”菜单项，具体取决于用户在站点中的位置。
- 主页、类(class)、资源和事件都将位于 Wordpress 站点内的不同区域。
- “社区”选项卡将链接到运行 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>最佳答案
- 在 anchor 标签中的文本之间放置一个跨度，并将其定位在媒体查询上，并显示为 none
- 在您的导航栏上固定一个位置，您可能需要重新设置正文的边距。我在高度上添加了 4000 像素以反射(reflect)粘性滚动。
- 根据页面更改 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/