[英]Display: table-cell absolute positioning query
我正在為wordpress構建一個下拉菜單,但遇到了一個有趣的難題。 最初,當我將鼠標懸停在顯示所有類別的“商店”時,我會出現一個下拉菜單,從其突出顯示的類別中,可以在div下方的div中調出5個隨機產品,這些產品將覆蓋菜單欄的整個寬度。 這很好
但是,當時的客戶認為他需要的類別比那里的要多得多 ,而我不得不將它們細分為子類別。
菜單當前的工作方式如下:
懸停商店->顯示主要類別懸停類別->顯示子類別。
這部分工作正常; 但是,使用css表設置對顯示子類別的列表進行布局,以使子類別列表在菜單大小上均勻分布。 您可以在此處看到我的意思的示例。
以前,我沒有使用css表設置,因為菜單非常合適。 包含類別產品的下拉div效果很好。 現在,盡管它們沒有在CSS表標記中定義,但它們似乎已經“假裝”為表單元格。 產品的每個下拉列表都在每個子類別的右側放置空白。 但是,由於它們將均勻分布,因此看起來很奇怪。
所以我有兩個問題:第一。 盡管絕對顯示,但下拉產品部分卻不在我需要的地方。 有沒有辦法打破這些表布局?
其次,如果沒有,無論我有多少個子類別,我還需要哪些其他選擇才能使這些類別在父div上均勻顯示? 我考慮的一個選項是使用javascript計算出所需的寬度百分比,然后將其直接應用於li,但是我不確定那是多么可行。
$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$all_categories = get_categories( $args );
$categorycounter == 0;
foreach ($all_categories as $cat) {
if($cat->category_parent == 0) {
$categorycounter = $categorycounter + 1;
$categorypadding = "";
$category_id = $cat->term_id;
echo $categorypadding . '<li class="category-' . $categorycounter. '"><a class="main-nav-link" href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a><div class="drop-down-'. $cat->name .'"><section class="drop-down-section"><section class="sub-list">';
// set up subcategories to display below main categories
$IDbyNAME = get_term_by('name', $cat->name, 'product_cat');
$product_cat_ID = $IDbyNAME->term_id;
$args4 = array(
'hierarchical' => 1,
'show_option_none' => '',
'hide_empty' => 0,
'parent' => $product_cat_ID,
'taxonomy' => 'product_cat',
'posts_per_page' => -1
);
$subcategoryloop = get_categories( $args4 );
$subcount = 0;
foreach ($subcategoryloop as $sc){
if($subcategoryloop){
$subcount = $subcount + 1;
$link = get_term_link( $sc->slug, $sc->taxonomy);
echo '<a class="subme" href="' . $link . '">'. $sc->name .'</a><section class="drop-down-products">';
//set up subcategories to display products
$args2 = array(
'posts_per_page' => -1,
'product_cat' => $sc->slug,
'post_type'=>'product',
'orderby' => 'rand'
);
$productcount = 0;
$loop = new WP_Query( $args2 );
while ( $loop->have_posts() ) : $loop->the_post();
$productcount = $productcount + 1;
if($productcount < 6){
echo "<section class='thumbcontainer'><p><a href='";
the_permalink();
echo "'>" ;
the_title();
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo "</a></p><img src='" . $feat_image . "'/><br/><p class='dropdown-price'>";
$price = get_post_meta( get_the_ID(), '_regular_price', true);
echo "£" .$price;
echo "</p></section>";
}
endwhile;
echo "<section><a class='view-more' href='". get_term_link($cat->slug, 'product_cat') ."'>View More Products</a></section></section>";
}
}
echo "</section></section></div></li>";
}
}
附帶一提,我知道我的代碼很亂。 抱歉!
要證明列表的合理性,請添加:
.sub-list {
display: table;
table-layout: fixed;
}
.subme {
width: 100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.