标签: nav

所以我之前已经正确地完成了这件事，并找到了有效的例子，但我真的想弄清楚为什么会这样。基本上我想要一个带有左侧和右侧的导航栏，而我现在尝试的方式是将右侧向下推。

不要犹豫，告诉我用完全不同的方式来做这件事！在这一点上，我主要关心的是了解正在发生的事情以及制定良好的行业最佳实践。

这是我的代码

<header class="header">
<nav class="nav">
    <div class="nav-left">
        <ul>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li><a href="#">Bloh</a></li>
            <li><a href="#">Bloh</a></li>
        </ul>
    </div>
</nav>

nav {
    background: green;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav a {
    display: block;
    width: 60px;

}

.nav-left li {
    float: left;
}

.nav-right li {
    float: right;
}

我有几个这样的导航链接：

<NavLink to="/dashboard" >
    <i className="icon icon-home-icon-01"></i>
</NavLink>
<NavLink to="/searchplatform" >
    <i className="icon icon-search-icon-01"></i>
</NavLink>
<NavLink to="/boxes" >
    <i className="icon icon-line-state-01""></i>
</NavLink>

我希望第二个 Navlink 在两条路线上处于活动状态，/searchplatform并且/search/results.

而且，不，我不想有两个NavLinks明显不同的！

确实谢谢

好吧,我已经尝试了所有我能想到的东西,并且无法获得z-index:1; 将我的下拉菜单放在内容和页面标题的顶部.有人可以看看,告诉我我错了什么？

非常感谢(提前)

http://jsfiddle.net/kreali/cDgH2/

我正在学习HTML5并且已经获得了将CSS Zen Gardens转换为HTML5语义版本的项目.我已经能够轻松地转换大部分内容,但是底部的链接/导航给我一些问题.
转换此/处理多个导航的最佳方法是什么？

<div id="linkList2">
     <div id="lselect">
          <h3 class="select"><span>Select a Design:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h3 class="archives"><span>Archives:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h3 class="resources"><span>Resources:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</div>

目前我认为linkList2应该是一个部分,每个子div元素应该是nav元素,或者linkList2应该是一个nav,子div元素是部分.

有没有一种方法可以指示(出于辅助目的)页面上的哪个导航菜单是主要导航？

<nav role="navigation" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

<nav role="navigation" id="secondaryNavMenu">
    <ul> ... </ul>
</nav>

能做这样的事情会很好:

<nav role="navigation primary" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

但我在ARIA文件中看不到任何此类规定.

我一直在网上搜索.这个问题在CSS Overflow上没有href的情况下将鼠标悬停在CSS中,并没有以我能理解的方式解决我的问题.

我正在尝试制作一个"主要"菜单,没有链接.

从菜单中的每个项目,我想在悬停或点击项目时创建一个下拉菜单.

我只想用CSS做这件事.

我很困惑.我尝试了z-index,定位和可见性的各种排列.但是,我发现很难达到我需要的结果.我也试过在外部列表项中有链接.

这是我的代码:

HTML:

<ul>
        <li>Name 1
          <ul>
            <li><a href="a.html" title="a">anteater</a></li>
            <li><a href="b.html" title="b">bee</a></li>
            <li><a href="c.html" title="c">cat</a></li>
            <li><a href="d.html" title="d">dog</a></li>
          </ul>
        </li>
        <li>Name 2
          <ul>
            <li><a href="e.html" title="e">egg</a></li>
            <li><a href="f.html" title="f">fern</a></li>
            <li><a href="g.html" title="g">goose</a></li>
            <li><a href="h.html" title="h">house</a></li>
          </ul>
        </li>
</ul>

CSS:

ul   {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li   {
    float: left;
    padding: 30px 15px 20px 15px;
    border-right: dotted #FFFFFF 1px;
    color: #FFFFFF;
    font-size: 11px;
    position: relative;
    z-index: 3;
}
li.end …

正如标题所说的那样.我想在垂直导航栏中的四个按钮之间有空格.的jsfiddle

HTML

<div id="classesnav">
<ul>
<li><a href="#">Buttercream Skills</a></li>
<li><a href="#">Flower and Cake Design</a></li>
<li><a href="#">Gum Paste and Fondant</a></li>
<li><a href="#">Advanced Gum Paste Flowers</a></li>
</ul>
</div><!--end of classesnav-->

CSS

#classesnav {   
position:absolute;
}

#classesnav ul {
list-style:none;
display:block;  
}

#classesnav ul li {
padding:10px 3px 10px 3px;
background-color:#FEC7FD;
display:block;
border-radius:10px; 
}

#classesnav ul li a {
display:block;  
text-decoration:none;
color:#000000;
}

我正在尝试将Twitter,Google +和Facebook按钮添加到导航标题中,以便它们显示在标题右上角的右侧,位于导航菜单上方的一行上.

我正在使用Bootstrap.

我结束了这个问题:

1)行类2)表有两行3)另一行ul

没有这些工作.请在下面找到没有社交按钮链接的代码.

HTML:

<div class="nav">
  <div class="container">
    <span class="pull-left">
      <a href="home.html">
          <img src="images/logo150.png" width="150">
      </a>
    </span>
    <ul class="pull-right">
      <li><a class="active" href="home.html">Get Muse</a></li>
      <li><a href="page1.html">Page1</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
  </div>
</div>

CSS:

.nav .pull-right {
  padding-top: 40px;
}

.nav {
  border-bottom: 1px solid #dbdbdb;
}

.nav a {
  color: #5a5a5a;
  font-size: 14px;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

问题:

编写常见的CSS代码以便应用于两个nav元素.我在Google和Stackoverflow上搜索都没有成功.在W3C允许的情况下,使用两个导航元素似乎并不常见.

HTML代码:

<!-- Global navigation -->
<nav role="main">
    <ul>
        <li><a href="index.html" class="active">Startpage</a></li>
        <li><a href="cars.html">Cars</a></li>
        <li><a href="about.html">About us</a></li>
    </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
    <ul>
        <li><a href="ferrari.html" class="pressed">Ferrari</a></li>
        <li><a href="bmw.html">BMW</a></li>
        <li><a href="volo.html">Volvo</a></li>
    </ul>
</nav>

CSS代码:

我如何编写CSS代码,以使两个导航元素具有相同的布局,但不同的样式(颜色,字体大小等)？

我是Bootstrap的新手，并且正在关注有关navbar的Lynda.com教程。不幸的是，即使我已经完全完成了本教程中的内容，也无法正常运行示例中的内容，而且我无法弄清自己做错了什么。据我所知，导航栏链接应仅在md及其以下垂直堆叠，但它们似乎在任何大小的设备上均垂直堆叠。

该页面在这里www.andycharlton.co.uk

具体代码是

<div class="navmenu">

        <nav class="navbar navbar-toggleable-sm">

            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#">One</a>
                <a class="nav-item nav-link" href="#">Two</a>
                <a class="nav-item nav-link" href="#">Three</a>
                <a class="nav-item nav-link" href="#">Four</a>
                <a class="nav-item nav-link" href="#">Five</a>
                <a class="nav-item nav-link" href="#">Six</a>

            </div><!--navbar-nav-->    

        </nav><!--nav-->    

    </div><!--navmenu-->    

感谢您的帮助！谢谢