1

我正在尝试制作菜单的移动版本。所以我有一个项目清单。仅显示具有类 nav-current 的 li。在伪 :after 的帮助下，我在该 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 技巧来实现它吗？

4

1 回答 1

1

选择target器不能按照我认为的方式工作。据我所知，您所描述的在 css 中是不可能的。

新答案

我重读了您的问题，并意识到您正在为移动浏览器寻找这个。他们可能也不认识pointer-events。这种新的解决方案不依赖于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;
}

原始答案

但是，我已经使用hover箭头设计了一个纯 CSS 解决方案，该解决方案在 FF 和 Chrome（已测试）中运行良好，在 IE8/9 中运行良好（它无法识别 上的pointer-events属性nav-current，因此它在悬停时打开导航nav-current） ; IE7 像 IE8/9 一样工作，只是没有箭头，因为:after无法识别。

需要一个额外li的。

HTML

<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

.top-nav {
    float: left; /*fit to width of longest li*/
    padding-right: 20px; /*make space for arrow*/
    position: relative;
    background-color: yellow;
    height: 0; /*do not want expand on hover of nav-current*/
}
.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*/
    position: relative;
}
.top-nav .nav-current {
    visibility: visible;
    height: auto;
    z-index; 0;
    pointer-events: none; /*don't want hover on this to open nav*/
    background: inherit; /*show background to collapsed nav*/
}

.nav-current:after { /*fake background to collapsed nav*/
    content: '';
    position: absolute;
    width: 20px; /*= top-nav right padding*/
    top: 0;
    bottom: 0;
    left: 100%;
    background: inherit;
}
.nav-current a {
    color: red;
}
.top-nav a:hover {
    color: #555555;
}
.top-nav .nav-expander {
    visibility: visible;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1; /*cover nav-current when open*/
}

.top-nav .nav-expander:hover {
    left: 0; /*these cause coverage of nav-current on expansion*/
    bottom: 0;
}

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

.nav-expander:after { /*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: 5px;
    right: 2px;
}

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

/*keeps z-index 0 on current; would use the :not(nav-current) selector to the above code, but IE8 does not recognize that*/
.top-nav:hover li.nav-current,
.nav-expander:hover ~ li.nav-current {
    z-index: 0;
}
于 2012-04-04T18:07:15.070 回答