Create single Dropdown with this div using css only

Question

How can I turn this into a single dropdown menu ? Right now I have it set with single buttons for each li.

I just want to make it turn into a single dropdown for all of them.

For smaller screens, prefer css example if you can.

<div class="col-md-3">
    <ul class="pc-scroller">
        <span>GO TO</span>
        <li class="pc-welcom">Welcome</li>
        <li class="pc-bebidasbeverages-114">Beverages</li>
        <li class="pc-traditional-style-breakfast-114">Traditional Breakfast</li>
        <li class="pc-mexican-style-breakfast-114">Mexican Breakfast</li>
        <li class="pc-mexican-plates-114">Mexican Plates</li>
        <li class="pc-botanasappetizers-114">Appetizers</li>
        <li class="pc-mariscosseafood-114">Seafood</li>
        <li class="pc-parrilladabarbecue-114">Barbecue</li>
        <li class="pc-kids-plates-114">Kid's Plates</li>
        <li class="pc-postresdesserts-114">Desserts</li>                    
    </ul>   
</div>

score 0 · Accepted Answer · answered Apr 19 '18 at 01:13

0

Check this

https://jsfiddle.net/1fxq39gj/2/

<div class="col-md-3">
    <select class="pc-scroller">
        <option >GO TO</option>
        <option value="welcome" class="pc-welcom">Welcome</option>
        <option value="beverages" class="pc-bebidasbeverages-114">Beverages</option>
        <option value="traditional" class="pc-traditional-style-breakfast-114">Traditional Breakfast</option>
        <option value="mexican" class="pc-mexican-style-breakfast-114">Mexican Breakfast</option>
        <option value="plates" class="pc-mexican-plates-114">Mexican Plates</option>
        <option value="appetizers" class="pc-botanasappetizers-114">Appetizers</option>
        <option value="seafood" class="pc-mariscosseafood-114">Seafood</option>
        <option value="barbecue" class="pc-parrilladabarbecue-114">Barbecue</option>
        <option value="kid" class="pc-kids-plates-114">Kid's Plates</option>
        <option value="desserts" class="pc-postresdesserts-114">Desserts</option>                    
    </select>   
</div>

answered Apr 19 '18 at 01:13

Chuks

1,134
11
21

Nice thanks for the help. Problem is I cant change the div because its created automatically within a plugin. But I can edit with css. – Nathan Apr 19 '18 at 01:25
It's easy. You can write a JavaScript to do the changing after creation. – Chuks Apr 19 '18 at 20:11
1

Check this https://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name – Chuks Apr 19 '18 at 20:30
Ok thanks, I am so bad at Java. And Jquery. I will try to follow your answers. I suppose there is no css solution. I will leave you as best answer if no one else has the solution with css. Thanks you. – Nathan Apr 19 '18 at 22:06
This answer looks similar to my question I just cant get it to work. (https://stackoverflow.com/questions/18298726/a-dropdown-menu-for-a-navbar?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – Nathan May 07 '18 at 02:40

score 0 · Answer 2 · answered Jul 25 '18 at 18:14

unfortunately the way that the current HTML is set up a pure CSS solution is hard. However, jQuery has a fairly easy solution, and it can do that without going in and changing the actual HTML. Here is the jQuery that you will need to get this working:

// If the span is clicked
$(".pc-scroller > span").click(function() {
    // Check to see if the screen is small
  if ($(window).width() < 500) {
    // Toggle hide/show all list items
    $(".pc-scroller > li").toggle();
  }
});

// When the screen is resized
$(window).resize(function(){
    // If the screen is small, hide all list items
    if ($(window).width() < 500) {
    $(".pc-scroller > li").hide();
  // If the screen is larger, show all list items
  } else {
    $(".pc-scroller > li").show();
  }
});

I have also posted a jsfiddle with this working.

Create single Dropdown with this div using css only

2 Answers2