1

メニューのモバイル版を作ろうとしています。ということで、商品一覧です。クラス nav-current の li のみが表示されます。疑似 :after の助けを借りて、その 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;
}

元の回答

ただし、矢印を使用して純粋な css ソリューションを作成hoverしました。このソリューションは、FF および Chrome (テスト済み) でうまく機能し、IE8/9 でも問題なく動作します ( のpointer-eventsプロパティをnav-currentため、ホバーするとナビゲーションが開きますnav-current) ; IE7 は IE8/9 のように動作しますが、矢印:afterが認識されないため、矢印がありません。

1 つ余分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 に答える