CSS Horizontal menu of fixed width push additional items into a drop down menu-CodePudding

I have a horizontal menu on desktop, the width of the menu supports 6 items, each item is pulled in from a database, if a 7th or 8th item is added to the db then it wouldn't be shown. I would like to add any additional items 7 onwards to a drop down menu.

Clicking the three dots below would display the menu to show additional items.

> Item1 Item2 Item3 Item4 Item5 Item6  ...
>                                     Item7
>                                     Item8
>                                     Item9

What is the correct way to go about this? My HTML is similar to that below but the

    <ul>
        @foreach(\Illuminate\Support\Facades\Cache::remember('filter-category-u', 60 * 30, fn () => \App\Models\Category::all()->keyBy('slug')) as $key => $category)
        <li >
            <a class="@if(route_human_value('browse', 'category') == $key) active @endif" href="{{ route_human('browse', ['category' => $key]) }}">
                {{ $category->name }}
            </a>
        </li>
        @endforeach
    </ul>

The output is similar to below. How can I get any items beyond 6 to go into a drop down menu? I'm sure this is solvable with css only but I can't figure it out. Thanks

<ul>
<li>
    <a href="#">
        Item1
    </a>
</li>
<li>
    <a href="#">
        Item2
    </a>
</li>
<li>
    <a href="#">
        Item3
    </a>
</li>
<li>
    <a href="#">
        Item4
    </a>
</li>
<li>
    <a href="#">
        Item5
    </a>
</li>
<li>
    <a href="#">
        Item6
    </a>
</li>
<li>
    <a href="#">
        Item7
    </a>
</li>
<li>
    <a href="#">
        Item8
    </a>
</li>
</ul>

CodePudding user response：

After Paulie_D pointed out this is called a Priority Menu I was able to find a great example just like what I need. See the link below:

https://martinblackburn.co.uk/responsive-nav/

CodePudding user response：

I don't think it can be made with CSS, but there is a way using javascript, create a function that checks the number of items in the list, check if the number is greater than 6, if yes show a button that, when clicked shows the other items

var listHolder = document.getElementById("list");
var expandButton = document.createElement("button");
expandButton.innerHTML = "show more";
expandButton.onclick = expandList;
var shrinkButton = document.createElement("button");
shrinkButton.innerHTML = "show less";
shrinkButton.onclick = shrinkList;

function shrinkList() {

  var list = document.querySelectorAll("ul#list li");
  if(list.length > 6) {

    for(let i = 6; i < list.length;   i) {

      list[i].style.display = "none";

    }
    shrinkButton.remove();
    listHolder.appendChild(expandButton);
    
  }
}

function expandList() {

  var list = document.querySelectorAll("ul#list li");
  if(list.length > 6) {

    for(let i = 6; i < list.length;   i) {

      list[i].style.display = "list-item";

    }
    expandButton.remove();
    listHolder.appendChild(shrinkButton);
    
    
  }

}

shrinkList();

<ul id="list">

  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>

</ul>

the above code is just a simple one. click run snippet and check it out, you can make it look cooler.