标签: nav

关于<nav>HTML5中新标签的最佳使用问题一直存在争议.我正在研究<nav>野外元素的使用,虽然我发现一些使用HTML5的网站,但我很想知道是否有任何主要网站正在使用它.主要是指家喻户晓的名字.如果你能指出任何问题,我们将不胜感激.

我们的网站有两个主要导航链接，指向两个完全不同的页面。像这样的东西：

<section>
    <header>
        <nav>
            <ul>
                <li><a href="link1.html">Link 1</a></li>
                <li><a href="link2.html">Link 2</a></li>
            </ul>
        </nav>
    </header>
</section>

在其中一个页面上，我们还有一个由链接列表组成的过滤组件，这些链接使用 Ajax 更改主要内容区域中列出的结果集（类似于 kayak.com 在您调整时实时过滤他们的航班选项）滑块、单击复选框等）

我的问题是，这组过滤链接是否应该包含在一个<nav>元素中？

它看起来像这样：

<section>
    <nav>
        <ul>
            <li><a href="#filter1">Filter 1</a></li>
            <li><a href="#filter2">Filter 2</a></li>
            <li><a href="#filter3">Filter 3</a></li>
            <li><a href="#filter4">Filter 4</a></li>
            <li><a href="#filter5">Filter 5</a></li>
        </ul>
    </nav>
</section>

我感到困惑的原因是规范并不清楚通过过滤等方法对页面内容进行实质性更改是否构成“主要导航”。另外，我不确定从可访问性的角度来看，页面上有两个像这样的导航元素是否会在语义上造成混淆。

我正在使用Bootstrap nav-tabs /下拉菜单组件作为我的主导航栏,但我无法弄清楚如何根据传入的URI设置活动菜单.

网上有很多不同的例子/帖子,使用nav-tabs隐藏和显示特定的div内容或使用#符号,但我只想用PHP读取传入的URI,_SERVER ["REQUEST_URI"]变量并设置一个活动标签.无论是导航中的嵌套位置还是不是也是一个问题.

这是我一直在尝试的:

<ul class="nav nav-tabs" id="supernav">
    <li class="active"><a href="/page1.html" data-toggle="tab"><i class="icon-home" style="margin-top:4px;"></i> Page 1</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page2.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li><a href="/page2.2.html" data-toggle="tab">Page 2.2</a></li>
            <li><a href="/page2.3.html" data-toggle="tab">Page 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page3.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
                <a href="/page3.2.html" data-toggle="tab">Page 3.2</a>
                <ul class="dropdown-menu">
                    <li><a href="/page3.2.1.html" data-toggle="tab">Page 3.2.1</a></li>
                    <li><a href="/page3.2.2.html" data-toggle="tab">Page 3.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li> …

我一直在各种设备上测试我的bootstrap网站,以确保它的响应能力.我已经为除了导航栏之外的不同显示尺寸正确调整了大小.在我的浏览器上,当我水平调整窗口大小时,它似乎响应,按预期折叠菜单,但在移动设备上,我仍然看到导航栏就像在台式机或笔记本电脑上的全屏窗口中显示一样.这是我的导航栏的代码:

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="WinShir" src="img/rocket.png" /> WinShir
        </a>
        <button type='button' class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="sr-only">Toggle Navigation</span>
        </button>
      </div>

      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
        <li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
      </ul>
    </div>

  </nav>
</div>

我已经尝试将nav元素更改为div,看看是否有帮助但没有成功.我还删除了封闭的容器类div,看看是否有帮助,也没有运气.

我正在制作一个导航栏,其中包含左侧浮动的徽标和菜单项以及右侧浮动的搜索栏和下拉按钮.当浏览器窗口达到一定的小尺寸时,导航栏元素将开始跳入下一行,因为没有足够的空间.

看看这里:http://codepen.io/anon/pen/YXBaEK

如果水平空间不足,我希望每个菜单项一个接一个地消失,而不是开始新的行.(我仍然在搜索栏旁边的下拉菜单中显示菜单链接).

HTML

<div class="nav">
  <div class="item-left">Logo</div>
  <div class="menu">
    <a>-------Menu Item 1-------</a>
    <a>-------Menu Item 2-------</a>
    <a>-------Menu Item 3-------</a>
    <a>-------Menu Item 4-------</a>
    <a>-------Menu Item 5-------</a>
  </div>
  <div class="item-right">Search & Dropdown</div>
</div>

CSS

.nav {
  width: 100%;
}

.item-left {
  width: 300px;
  height: 50px;
  background-color: green;
  float: left;
}

.item-right {
  width: 300px;
  height: 50px;
  background-color: red;
  float: right;
}

.menu {
  height: 50px;
  background-color: yellow;
  float: left;
}

谢谢您的帮助

编辑:菜单项的数量和内容不是静态的.我不知道会有多少内容和内容写的内容.

我刚刚用网络语言(HTML,CSS)推出,我正在创建我的第一页.我找到了一个模板html水平菜单,我想要应用到我的页面.不幸的是,我没有到达修改它,因为他适用于我的页面的所有宽度.

我探索网络试图找到如何做,我认为它应该与财产相关联width = 100%.

我认为解决方案应该很简单,但即使看到StackOverflow帖子上我也没有找到类似的问题.当我应用我的代码中找到的解决方案时,它不起作用.

这是代码:

body
{
 background-color: black; /* Le fond de la page sera noir */
}

#nav
{
padding:0;
}

#nav li
{
display:inline;
}

#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

<html>
<head>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
   
	<ul id="nav" style="clear:both;">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li> …

这与SO问题Ionic 2将选项卡NavParams传递给选项卡密切相关

我有标签视图模板设置为:

 <ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home"  tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="My Alerts" [rootParams]="paramsData" tabIcon="warning"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Settings" [rootParams]="paramsData" tabIcon="cog"></ion-tab>
....

并在类的构造函数(主Tabs页面)中我设置rootParams.

this.paramsData = {
    settings: this.userSettings,
    facilities: this.facilities,              
 };

当我在Tab中的子页面上获取ionViewDidEnter()生命周期事件中的值时,这样可以正常工作.

this.facilities = this.navParams.data.facilities;
let userSettings =  this.navParams.data.userSettings;

当我通过监听下面的事件更新主标签页面中的rootParams时,

listenToSaveEvents(){
    this.events.subscribe('save-settings', (userSettings) => {
      this.userSettings = userSettings;
      this.paramsData = {
        settings: this.userSettings,
        facilities: this.facilities            
      };    
    });

子页面仍会加载陈旧数据.

此事件正在触发,数据正在更新.当该子页面的ionViewDidEnter()再次被触发时,它仍会从navParams加载旧数据.

对此更多一点.

我这样做的原因是多页共享数据.但它们都需要一致的数据,只有一个视图更新它.在第一次加载时,主选项卡页面可能已经有来自其他服务的现有数据.

更新此事

虽然我仍然想要一个解决方案,但我在上面的链接中找到了答案.

所以我最终创建了如下的服务.

import {Injectable} from …

我在粘贴标头的行为方面遇到问题。

所需行为：

a）滚动到.nav击中底部的位置，section将active类添加到选项卡，并保留active到.nav下一节的顶部。

b）单击相应部分.tab始终会导航到该部分的顶部，并将active该类添加到选项卡。

因此，通过滚动或单击，active选项卡的状态始终保持不变，直到.nav与下一个交叉为止section，在这种情况下，active状态将转到该部分的选项卡，依此类推。

测试问题：

1）中途滚动会丢失Option Two该active状态.tab。

2）使用scrollTop滚动到的顶部，.container而不是选定的顶部section。

class StickyNavigation {
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    let self = this;
    $(".tab").click(function() {
      self.onTabClick(event, $(this));
    });
    $(".container").scroll(() => {
      this.onScroll();
    });
    $(".container").resize(() => {
      this.onResize();
    });
  }
  /*Scrolls down to Tab selection*/
  onTabClick(event, …

我有一个从汉堡打开的简单导航菜单。当它打开时，如何防止屏幕上的所有滚动？导航栏是 100vh，我想防止在它打开时滚动经过它？

到目前为止导航菜单的 Js（没有滚动功能）

const navSlide = () => {
    const burger = document.getElementById('burger')
    const nav = document.getElementById('nav')
    const navLinks = document.querySelectorAll('.nav-links li')
    
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')
        navLinks.forEach( (link, index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.7s ease forwards ${index / 7 + 0.4}s`
                }
    })
    burger.classList.toggle('toggle')
  })
}

navSlide()

我已经开始在我的页面上使用html标签,而我正在尝试确定NAV标签的正确用法.我已经阅读了文档,看起来我应该对我的内容感到满意,但我注意到大多数其他开发人员在"ul""li"标签中都有导航"块".我使用div.

我的问题是,使用"ul""li"标签而不是div的优点/缺点是什么？

以下是否适用于导航？

<nav>
    <div id="navBar">
        <div id="navItem1"><a></a></div>
        <div id="navItem2"><a></a></div>
        <div id="navItem3"><a></a></div>
        <div id="navItem4"><a></a></div>
    </div>
</nav>