标签: nav

menu 元素具有相应的 menuitem 子元素。

nav 的子元素合适的 html 标记是什么？这些子元素对应的 Aria 角色是什么？

我阅读了规范，查看了 MDN，还阅读了一些教程。

我知道导航链接最好包装在导航容器中。我正在努力理解标记导航项目本身的最简单的方法。

通常，在书籍、教程和一些实际网页中，我会看到导航栏在元素中的元素中标记为<li>s 元素，如下所示：<ul><nav>

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding-left: 0;
}

.site-nav > li > a {
  border: 1px solid black;
  padding: 1em;
  text-decoration: none;
}

li { padding: 1em; } /* just for better appearance here on SO */

<nav>
  <ul class="site-nav">
    <li><a href="x">first</a></li>
    <li><a href="y">second</a></li>
    <li><a href="z">third</a></li>
  </ul>
</nav>

但是，为什么我不应该更喜欢像下面这样的解决方案，其中直接包含上面示例中 s<nav>的所有内容？<li>

.site-nav {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.site-nav > a {
  border: 1px solid black;
  padding: …

我喜欢nav-tabs的外观,所以我想使用它.这就是Web应用程序现在的样子:

不幸的是,如果我单击其他选项卡(例如"Buscar alojamiento"),则活动选项卡不会更改.这是我的代码:

<ul class="nav nav-tabs">

    <li>        
        <g:link controller="usuario" action="show">         
            <g:message code="nav.usuario.show" default="Datos del usuario" />           
        </g:link>       
    </li>   

    <li class="active">
        <a href="${createLink(uri: '/')}">
            <g:message code="nav.home" default="Página de inicio" />
        </a>
    </li>

    <li>        
        <g:link controller="alojamiento" action="show">         
            <g:message code="nav.alojamiento.show" default="Buscar alojamiento" />          
        </g:link>       
    </li>   

</ul>

我也尝试删除class ="active".没有标签处于活动状态.

如何使标签的所有名称的高度相同？在LI高度是相同的,但如果我为A高度:100%没有任何变化.谢谢

simple bootstrap

例

我想在滚动时将导航从透明更改为颜色.很像这个网站.http://createone.com/contact-us/我看过关于改变尺寸的帖子很棒,我也会使用它,但我想主要从透明到颜色.任何帮助都会很棒.我对jquery有一点经验,但是无法弄明白或者根据我的需要修改别人以前的问题.

我看到了这个但却无法让它为我工作.jquery在滚动时改变不透明度和高度

一个jsfiddle演示会很棒!

在此先感谢您的帮助.我也在使用Bootstrap 4,所以如果那里有任何插件.我也对此持开放态度.

我正在使用'Owl Carousel 2'构建一个漂亮的内容滑块,只有当只有一个或多个项目可见时才可以隐藏导航按钮吗？

当只有一个项目或两个项目可见时,他们会在div.item上附加第二个CSS类？

喜欢:当有一个项目时:类"第一项",当有两个框时:class ="item two"当有多于2时,那么它将只有class ="item".

JS:

jQuery("#sliderwhat").owlCarousel({
    loop : true,
    nav : true
});

HTML:

<div id="sliderwhat" class="box">

    <div class="item">
        <img src="image.jpg" alt="" />
        <span>Personal guide / <span>Amsterdam</span></span>
        <div>Here some text bla bla bla.</div>
    </div>

</div>

所以我的导航栏出了问题.我把它的宽度设置为100%.但我希望看到结束,因为它有圆角......

所以这样:| (=======)|

不像现在这样:| (========== |

    #nav {

      height: 60px;

      font-size: 30px;

      line-height: 60px;

      vertical-align: middle;

      text-align: center;

      background-color: #0080FF;

      width: 100%;

      border: 10px solid #16044E;

      border-radius: 20px;

      z-index: 1;

    }

    #nav ul {} #nav li {

      display: inline;

      text-align: center;

      margin: 20px;

    }

    #nav a {

      color: white;

      text-decoration: none;

    }

<ul id="nav">
  <li><a href="">Home</a>
  </li>
  <li><a href="">Courses</a>
  </li>
  <li><a href="">Subjects</a>
  </li>
  <li><a href="">Sign Up</a>
  </li>
  <li><a href="">Log In</a>
  </li>
</ul>

我试图在标题处写一个带有多菜单的主题,我应该nav为每个主题使用多标签吗？或者将它们全部包装在nav标签内？

这是示例代码.

header-a将nav标签内的所有内容包

header-b包装菜单和菜单里面的元素nav.

header-cnav每个内部包装菜单.

header-dnav在每个内部添加标签bar以包裹所有内容bar.

在这种情况下哪种方法会好？

非常感谢.

我正在尝试创建一个导航菜单,当项目悬停时显示边框.虽然它目前看起来很好,但当其中一个项目悬停时,其他菜单项会被推开.我怎么会让他们留下来？

我尝试了一些在这里得到解决的方法,但没有一个方法有效.
我在下面提到了一个小提琴.

nav {
  float: left;
  width: 100%;
}

ul {
  float: left;
  list-style:none;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}

ul li {
  display: block;
  float: left;
  list-style: none;
  position: relative;
  right: 50%;
  margin: 0px 0px 0px 1px;
  padding: 5px 40px;
  color: white;
  line-height: 1.3em;
}

li a:hover {
  border: solid 1px black;
  padding: 5px 10px;
}

a {
  color: black;
  font-family: 'Quicksand', sans-serif;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">MUSIC</a></li>
    <li><a …

我的页面上有这个导航栏设置，我希望它可以在平板电脑或台式机上正常工作，然后当加载到移动设备上时，导航栏将被压缩为可按下的汉堡菜单。

解决这个问题的最佳方法是什么？

HTML和CSS代码如下

HTML

<h1 class='logo'><a href='#'>Website Logo</a></h1>
<nav>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
</ul>
</nav>
</header>

CSS

header{
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #616880;
    height: 70px;
}
.sticky {
    position: fixed;
    top:0;
    width: 100%;
}
.logo{
    margin: 15px 0 0 0;
}
nav {
    margin: 25px;
}
ul li{
    list-style: none;
    display: inline;
}
ul li a,
h1 a{
    text-decoration: none;
    color: #fff;
    padding: 5px;
}