Question

我正在开发一个HTML 5应用。这个应用程序将有一个坚实的蓝色水平导航栏。子导航项目将显示在其下方的另一个水平浅蓝色导航栏中。当用户点击导航栏或子导航栏中的项目时，我希望在所选项目中显示一个缺口，使其看起来像这样：

+---------------------------------+
|                                 |
| Item 1     Item 2     Item 3    |
|   ^                             |
+---------------------------------+
|                                 |
| Child 1     Child 2     Child 3 |
|               ^                 |
+----------------------------------
|                                 |
|  Content goes here              |
+---------------------------------+

目前，我的HTML如下所示：

<div class="row mainNav pad-1">
  <nav>
    Item 1&nbsp;&nbsp;&nbsp;Item 2&nbsp;&nbsp;&nbsp;Item 3
  </nav>
</div>

<div class="row subNav pad-1">
  <nav>
    Child 1&nbsp;&nbsp;&nbsp;<span class="sub-nav-arrow-up">Child 2</span>&nbsp;&nbsp;&nbsp;Child 3
  </nav>
</div>

我的CSS如下所示：

.mainNav
{
    background-color: rgba(255, 255, 255, 0.7);
    line-height: 2.4rem;
    padding: 0rem 1.0rem;
}

.subNav
{
    background-color: #40566B;
    color: #000;
    line-height: 2.4rem;
    padding: 0rem 1.0rem;
}

div.sub-nav-arrow-up
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #fff;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

我的问题是，我的缺口没有正确排列。我需要它与父导航的水平条底部对齐。我还需要将凹口置于所选导航项的中心位置。我无法弄清楚如何在CSS中做这两件事。我相信我的包装跨度是不正确的方法，因为它会导致导航栏的大小增加。此外，通知未正确居中。我不知道该怎么做。

有没有办法用纯CSS做到这一点？或者我是否需要制作JavaScript解决方案？

谢谢！

Answer 1

您应该使用适当的标签而不是使用css。使用jeremyasnyder的jsfiddle代码我用ul和li标签敲了一个例子。这仍然需要javascript来实现功能，但不依赖于

http://jsfiddle.net/MN3eM/3/

HTML

<p>Child 3 selected:</p>
<div class="row mainNav pad-1">
  <nav>
      <ul><li class="selected">Item 1</li><li>Item 2</li><li>Item 3</li></ul>
  </nav>
</div>

<div class="row subNav pad-1">
  <nav>
      <ul><li>Child 1</li><li class="selected">Child 2</li><li>Child 3</li></ul>
  </nav>
</div>

CSS

.mainNav { background-color:rgba(255, 255, 255, 0.7); line-height:2.4rem; padding:0rem 1.0rem; }
.subNav { background-color:#40566B; color:#000; line-height:2.4rem; padding:0rem 1.0rem; }
.mainNav nav ul li.selected {
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #40566B; 
    text-align:center;
}
.subNav nav ul li.selected {
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #fff; 
    text-align:center;
}
nav ul { padding:0;margin:0;list-style:none; }
nav ul:after { content:"";display:table;clear:both; }
nav ul li { float: left; margin: 0 10px;}

附加：我不知道您的项目是什么，但您可能希望查看适用于所有设备的响应式菜单http://responsivenavigation.net/

在CSS中创建“Notch”

1 个答案: