منوی کشویی

fenchool · مهر 97

سلام. من کدی دارم به شرح زیر:

   <div class="product-category"> <?php echo $product->get_categories( ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', $cat_count, 'woocommerce' ) . ' ', '.</span>' ); ?></div>
                <!--product-category--> 
                
              </div>
              <!--col-lg-6-->
              <div class="col-lg-4">
                <div class="product-benefits">
                  <ul class="benefit-item">
   
					 <li><a> <i class="spr-delivery"></i> <span class="text">امتیاز محصول </span> </a>
					  <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
					 </li>
					 <li><a> <i class="fa fa-credit-card"></i> <span class="text">تعداد بازدید</span> </a> 
                         <p align="center">
                          <?php
setPostViews(get_the_ID());
?>

<?php
echo getPostViews(get_the_ID());
?>
                       </p>
                        </li>
                  
                    <li><a> <i class="fa fa-map-o"></i> <span class="text">از کجا بخرم؟</span> </a></li>

می خوام قسمت "از کجا بخرم؟" منوی آبشاری داشته باشه. یعنی وقتی روش کلیک میشه منو باز بشه. میشه کدش رو برام بنویسید؟

ویرایش شده مهر 97 توسط fenchool

**Mobin** · مهر 97

سوال شما خیلی کلی هست باید بیشتر توضیح بدین

کد html ش به صورت زیر هست ولی باید براش با توجه به کدهای قالبتون css یا js اضافه بشه

<li>
<a> <i class="fa fa-map-o"></i> <span class="text">از کجا بخرم؟</span> </a>
       <ul>
               <li><a href='#'>hello</a></li>
       </ul>
</li>

مثال زیر به شما کمک میکنه

 <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div> 

<style>
   /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;} 
</style>