1

私は PureCSS を使用しようとしており、CSS を使用してメニュードロップダウンを取得しようとしています (移植性の理由から YUI または Jquery を使用するのではなく)。

これは私がこれまでに持っているものです:

http://jsfiddle.net/ket262p3/3/

<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
      <li class="pure-dropdown">
          <a href="#">Test1</a>
          <ul>
            <li><a href="#.asp">Test2</a></li>
            <li class="pure-menu-separator"></li>
            <li><a href="#.asp">Test3</a></li>
          </ul>
     </li>               
     <li class="pure-dropdown">
       <a href="#">Test1</a>
       <ul>
       <li><a href="#">Test2</a></li>
       <li><a href="#">Test3</a></li>
       <li><a href="#">Test4</a></li>
       <li><a href="#">Test5</a></li>
       </ul>
    </li>
</ul>
</div>

と：

@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");

.pure-menu-horizontal ul {
        padding:0;
        margin:0;
        font-weight: bold;
        width: 100%;
        position: relative;
        }

.pure-menu-horizontal ul li {
        float:left;
        position: relative;
        display: block;
        }

.pure-menu-horizontal ul li a {
        display:block;
}

.pure-menu-horizontal ul ul {
    display: block;
    position: absolute;
    top: 58px;
}

.pure-menu-horizontal ul li:hover > ul {
    display: list-item;
    left: auto;
}

根本的な問題は、2 番目のレベルのメニューが表示されない原因となる purecss の微妙な部分である可能性があると思います。

余分なクラスは無視してください。これらは、これを YUI または JQuery で動作させるための初期段階を表しています。

4

3 に答える 3

1

サブナビゲーションの可視性を可視に設定する必要があります。

.pure-menu-horizontal ul li:hover > ul {
    display: list-item;
    left: auto;
    visibility: visible;
}

例: http://jsfiddle.net/ket262p3/6/

于 2014-12-30T11:13:55.940 に答える
1

さらに調査すると、これを行うためのインフラストラクチャの多くがすでに PureCSS に組み込まれているようですが、十分に文書化されていません。他の人が見つけられるように、以下のソリューションを複製します。

主な解決策はここに文書化されています: https://gist.github.com/maxbeatty/7829915

私はjsfiddleで複製しました：http://jsfiddle.net/0562cqd8/1/

html は次のとおりです。

<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="/" class="pure-menu-heading">Heading</a>
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
<a href="/cars" class="pure-menu-label">Cars</a>
<ul>
<li>
<a href="/cars?color=blue">Blue</a>
</li>
<li>
<a href="/cars?color=red">Red</a>
</li>
<li>
<a href="/cars?color=green">Green</a>
</li>
</ul>
</li>
<li>
<a href="/trucks">Trucks</a>
</li>
</ul>
</div>

次のような CSS を使用します。

@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");

.pure-menu-can-have-children:hover {
background: #eee;
}

.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}
于 2015-01-01T11:03:06.203 に答える