javascript - 在 CSS 中创建 'Notch'

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/