标签: nav

标题几乎解释了它.

现在我们有了专用<nav>标签,

这是:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

比以下更好吗？

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

我的意思是,假设我不需要额外的DOM级别来进行某些CSS定位/填充,首选方法是什么,为什么？

W3Schools.com和我很确定我记得看到W3C.org声明<menu>应该用于工具栏菜单和列出表单控制命令.

那么,我应该在主菜单中使用哪一个？Nav,还是Menu？有关系吗？

如何在Angular 2中设置Bootstrap navbar"active"类？我只找到了Angular 1方式.

当我转到" 关于"页面时,添加class="active"到" 关于",然后class="active"在" 主页"上删除.

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['Home']">Home</a></li>
    <li><a [routerLink]="['About']">About</a></li></li>
</ul>

谢谢

我正在尝试为每个标签更改活动颜色(在点击后仍然是twitter的浅蓝色):

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(怎么样)我可以用CSS做到这一点？

以下所有内容是否具有相同的语义含义？如果没有,请解释你的答案.

1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>

2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>

3.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>

我是React JS的初学者,我想为我的仪表板开发基于路由器的反应导航.该模型如下:

我为尝试路由而创建的app.js代码如下:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Login from './components/Login.js';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById('placeholder'))

如何创建模型中显示的导航？

我试图使我的导航栏随页面移动,但如果用户向下滚动则粘在顶部.任何人都可以提供任何示例或如何？非常感激.(我对任何其他语言都没有希望).我尝试使用css粘性但它没有用.

<div class="headercss">
    <div class="headerlogo"></div>
    <div class="nav">
        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>
    </div>
</div>

/* www..com
Blinx Service
Created by Pierre Chedraoui
(c) Copyright 2015
*/

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: relative;
}

.nav {
    width: auto; …

我试图在首次加载网站时创建一个出现在可查看页面底部的导航栏,然后当用户向下滚动时,导航栏向上滚动,最终固定到顶部.我正在使用Bootstrap,就像这个网站一样,但我无法弄清楚这个网站是如何做到的.有帮助吗？

这是我试图效仿的导航栏的网站:http://www.blastprocessor.co.uk/

这是我的导航html和css代码:

HTML:

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

这是我的CSS:

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav …

<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

单独使用<nav>这两者是否在语义上更正确<ul>,或者是否应该将两者都包裹起来？

使用nav标签环绕我的页脚菜单项也是合适的吗？

我正在尝试使用html5切片元素和标题实现正确的切片,同时实现设计/布局,我的客户要求(包括某些限制).

总体布局将是这样的:

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

我现在关心的是,如果我使用html5大纲,我会获得痕迹导航和主导航显示为无标题的部分.按照分级标题结构,我不能在h2下面给他们标题,我自然不会"标题"他们并且用css隐藏标题来"标题"他们感觉不对.

什么是保持语义正确的最佳方法,确认seo标准并防止那些出现在无标题的部分？