0

wp_list_categoriesの出力が判明したjsfiddle.net/vanduzled/AgAwK/があります。

だから私はサブカテゴリを持つワードプレスのカテゴリのリストを持っていて、それをサイドバーに表示したいと思います。wp_list_categoriesを使用していますが、表示される内容は次のようになります。

付属品

  • サブアクセサリー

ライフスタイル製品

  • サブライフスタイル製品

これは良さそうですが、子（つまりサブアクセサリ）を非表示にしたいので、親（つまりアクセサリ）にカーソルを合わせると、2レベルレイアウトの通常の垂直ナビゲーションのように子が横に出てきます。

私のフィドルでは、クラス.childrenが非表示になっていて、親にカーソルを合わせるとインラインブロックがオンになりますが、機能しません。

私は実際にFoundationFrameworkを使用しており、Zurbにはすでにナビゲーションメニューが組み込まれていますが、カスタムウォーカーを使用するかのようにメニューの動的挿入に使用することはできません。また、Foundationにはスタイルが必要なため、必要に応じてスタイルを設定できます。 wordpressのwp_list_category関数に入れることができない追加のクラス。

これが純粋なcssで実行できるのか、それともjsが必要になるのかはわかりません。

4

1 に答える 1

0

A list Apart からこれを行う際に、従来の css を使用できます。

/* ASDIE NAV*/

ul.side-nav { display: block; list-style: none; margin: 0; padding: 17px 0; }
ul.side-nav li { display: block; list-style: none; }


.children{
  width: 200px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ccc;
}

ul.side-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 220px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }

ul.side-nav li {
  position: relative;
  }

.side-nav li ul {
  position: absolute;
  left: 199px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul.side-nav li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul.side-nav li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul.side-nav li a { padding: 2px 5px; } /* Sub Menu Styles */

ul.side-nav li:hover ul.children, ul.side-nav li.over ul.children { display: block; } /* The magic */

/* ASIDE !NAV */
于 2012-12-21T06:36:49.133 に答える