Question

我正在尝试制作菜单的移动版本。所以我有一个项目清单。只显示带有nav-current类的li。在pseudo的帮助下：在我创建了一个箭头之后，在li的链接之后。单击箭头时，我会尝试显示所有li项目。

我的HTML：

<ul class="top-nav">
  <li>
    <a href=#>Textbla</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlpops</a>
  </li>
  <li>
    <a href=#>Google Res</a>
  </li>
</ul>

和我的时髦的css：

$depends:none;

  .top-nav { 
    float: none; 
    margin: 10px;
    li,li.user-tools {

    display:$depends;

    float:none!important;
    border-bottom: 1px solid #666;
    &:last-child {
     border-bottom:0 none;
    }
    &.nav-current {
     display:block;
     border-bottom:0 none;
     a:after {
       content:'arrow';
       color:#1a1a1a;
       position:absolute;
       top:10px;
       right:20px;
       height:12px;
       background: transparent url(../images/custom/arrow_down.png) no-repeat left top;
      }

     a:target:after {
       $depends:block;
     }

     }
   }   
}

我不想使用任何javascript，所以我搜索唯一的css解决方案。这可以在sass中完成吗？或者是否有任何css3技巧可以利用并实现这一目标？

Answer 1

target选择器does not work the way you are expecting I think。据我所知，你描述的是css中不可能的。

新答案

我重读了您的问题并意识到您正在为移动浏览器寻求此功能。他们可能也没有认识到pointer-events。 This new solution除了作为增强功能外，不依赖pointer-events，但需要更多标记。到目前为止，我已经在FF，Chrome和IE8 / 9中进行了测试，效果很好。（我很好奇，如果hover-shield上的零不透明度在某些浏览器中可能需要为0.01）。您必须测试您的移动应用程序。

<强> HTML

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

<强> CSS

.hidden-nav {
    position: relative; 
    display: inline-block;
}

.nav-expander { /* the activator arrow container */
    width: 16px;
    height: 8px;
    position: absolute;
    top: 5px;
    right: 2px;
    z-index: 4;
}

.nav-expander:before { /* the activator arrow */
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid blue;
    position: absolute;
    top: 0;
    left: 0;
}

.hover-shield { /* keep activation by the arrow only */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: white; /* needs background to act as hover shield */
    filter: alpha(opacity=0); /* no opacity needed */
    -moz-opacity: 0;
    opacity: 0;
}

.nav-expander:hover + .hover-shield {
    z-index: 0;
}

.top-nav {
    padding-right: 20px; /* make space for arrow */
    background-color: yellow;
    position: relative;    
    z-index: 1;
}

.top-nav:hover {
    z-index: 3;
}

.top-nav li {
    display: block; /*not "none" as we want widest li to size the nav*/
    visibility: hidden;
    height: 0; 
    white-space: nowrap; /*keep the link text in one line*/
}

.top-nav .nav-current {
    visibility: visible; 
    height: auto;
    pointer-events: none; /* for browsers that recognize it, the user is prevented from reclicking the page they are on */
}

.nav-expander:hover ~ .top-nav,
.top-nav:hover {
    height: auto; /*once triggered, let it be its height*/
}

/*show the nav if expander is hovered, or once that is done, the nave itself is hovered */
.nav-expander:hover ~ .top-nav li,
.top-nav:hover li {
    visibility: visible;
    height: auto;
}

原始答案

然而，I have worked up a pure css solution using hover on the arrow在FF和Chrome（测试版）中运行良好，在IE8 / 9中运行正常（它无法识别{{1 } pointer-events上的属性，因此它会在nav-current的鼠标悬停时打开导航;由于nav-current无法识别，IE7的工作方式与IE8 / 9类似，但没有箭头。

需要一个额外的:after。

<强> HTML

li

<强> CSS

<ul class="top-nav">
  <li class="nav-expander"></li>  
  <li>
    <a href=#>Textlinks Adv</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlinks Publ</a>
  </li>
  <li>
    <a href=#>Google Shopping</a>
  </li>
</ul>

为移动浏览器制作由向下箭头触发的纯css可折叠菜单

1 个答案:

新答案

原始答案