How can we add Dropdown feature to FoF Links extension?

fakruzaruret

Is there any task for adding drop down feture to FoF links on its next releases? Currently I can add maximum 5 or 6 links without extend navigation bar.

Pollux

The links in the header are structured like this (taken from this forum):

<div id="header-primary" class="Header-primary">
  <ul class="Header-controls">
    <li class="item-link1"><a class="LinksButton Button Button--link" target="" href="https://flarum.org/" title="Home">Home</a></li>
    <li class="item-link6"><a class="LinksButton Button Button--link" target="" href="https://flarum.org/donate/" title="Donate">Donate</a></li>
    <li class="item-link7"><a class="LinksButton Button Button--link" target="_blank" href="https://flarum.org/docs/" title="Docs">Docs</a></li>
    <li class="item-link2"><a class="LinksButton Button Button--link" target="" href="https://discuss.flarum.org/d/859-flarum-community-guidelines" title="Guidelines">Guidelines</a></li>
    <li class="item-link4"><a class="LinksButton Button Button--link" target="" href="https://flarum.org/discord/" title="Chat">Chat</a></li>
  </ul>
</div>

Even though there is no easy way to have nested links, you can turn the whole links-block into a drop down menu. Following this article you could start your own experimentation with the following CSS (via admin panel > custom CSS):

#header-primary::before {
  content: "Links";
}
#header-primary ul {
  background: white;
  border: solid 1px #ddd;
  margin-top: 1rem;
  display: none;
}
#header-primary:hover ul {
 display: block;
}
#header-primary ul li {
  clear: both;
  width: 100%;
}

This code hides all links and replaces them with a text "Links". Hovering over "Links" makes the links visible which are now shown vertically.

There is still some work to do, but you get an idea what can be done without writing an extension.