Dropdown Navbarlink for Invision

Hi guys

I found this dropdown navbarlink for only phpBB2 Ange Tuteur made for someone in this topic: https://help.forumotion.com/t143683-how-to-create-add-drop-down-menu#980348

Does anyone know how to convert this so it works on Invision too or maybe all versions?
Because I want to add a categories link to the navbar with a dropdown of all our categorylinks..

All help is much appreciated

Testforum: http://punt.forumactie.com/
Version: Invision

It is pretty easy to do. Add a link in the Admin Panel with an url like

Code: #cat

. The text after # can be whatever you want. Also, do you need sub-dropdowns?

i think in the code you should change this

link.className = 'mainmenu';
to this
link.className = 'submenu';

Occultist wrote:It is pretty easy to do. Add a link in the Admin Panel with an url like #cat. The text after # can be whatever you want. Also, do you need sub-dropdowns?

Thank you @Occultist and yes I want it to have 6-7 sublinks which are my category links
I made the link in the navbar, it's called "Categorie" .. so how to add sublinks to it is the question

skouliki wrote:i think in the code you should change this

link.className = 'mainmenu';
to this
link.className = 'submenu';

Thank you @skouliki I will give that a try and report back if it worked
EDIT: It didn't worked skouliki

The javascript code:

Code:

;var d=document;
function _q(e){
return d.querySelectorAll(e);
};
function q(e){
return d.querySelector(e);
};
function l(e, ev, c){
e.addEventListener(ev, (f)=>c(f));
};

var struct=[{
  name:"name",
  href:"url",
}, {
  name:"name",
  href:"url",
}];

l(d, 'DOMContentLoaded', function(){
var link=q("[href='#categorie']"), h="";
struct.forEach(e=>{
h+="<a href='"+e.href+"'>"+e.name+"</a>";
});
link.innerHTML="<span class='droptitle'>"+link.innerHTML+"</span><span class='dropmenu'>"+h+"</span>";
});

The CSS:

Code:

a[href="#categorie"]{
display:inline-flex;
flex-direction:column;
}
a[href="#categorie"]:hover{
background:none !important;
}
a[href="#categorie"]:hover > .dropmenu, .dropmenu:hover{
top:auto;
}
a[href="#categorie"] *{
transition-duration:0.4s;
}
.droptitle{
margin-top:-10px;
margin-bottom:-20px !important;
padding:5px 10px 5px 10px;
}
a[href="#categorie"]:hover .droptitle{
background:white;
}
.dropmenu{
background:white;
position:absolute;
display:flex;
flex-direction:column;
width:200px;
margin-top:17px;
top:-1000px;
box-shadow:0 3px 6px rgba(0,0,0,0.16)
}
.dropmenu>a{
margin:0 !important;
width:178px;
padding-left:10px !important;
}

You will need to modify the struct array in the javascript code to add/remove/edit links in the dropdown. Let me know if you need help designing the dropdown in a specific way.

Thank you very much @Occultist I will give this a try later on today and will report back if it's succesful or not and/or need some styling

EDIT:
Yay, almost there, it now shows the dropdown with the category names , but as soon as I move the mouse down towards the toplink the displayed block with links disappears before I can reach one..

Replace the CSS with this one:

Code:

a[href="#categorie"]{
display:inline-flex;
flex-direction:column;
}
a[href="#categorie"]:hover{
background:none !important;
}
a[href="#categorie"]:hover > .dropmenu, .dropmenu:hover{
top:auto;
}
a[href="#categorie"] *{
transition-duration:0.4s;
}
.droptitle{
margin-top:-10px;
margin-bottom:-20px !important;
padding:5px 10px 5px 10px;
}
.dropmenu{
background:white;
position:absolute;
display:flex;
flex-direction:column;
width:200px;
margin-top:5px;
top:-1000px;
box-shadow:0 3px 6px rgba(0,0,0,0.16);
z-index:999;       
}
.dropmenu>a{
width:183px;
position:relative;
left:5px;
padding-left:5px !important;
}

Occultist wrote:Replace the CSS with this one:

Code:

a[href="#categorie"]{
display:inline-flex;
flex-direction:column;
}
a[href="#categorie"]:hover{
background:none !important;
}
a[href="#categorie"]:hover > .dropmenu, .dropmenu:hover{
top:auto;
}
a[href="#categorie"] *{
transition-duration:0.4s;
}
.droptitle{
margin-top:-10px;
margin-bottom:-20px !important;
padding:5px 10px 5px 10px;
}
.dropmenu{
background:white;
position:absolute;
display:flex;
flex-direction:column;
width:200px;
margin-top:5px;
top:-1000px;
box-shadow:0 3px 6px rgba(0,0,0,0.16);
z-index:999;       
}
.dropmenu>a{
width:183px;
position:relative;
left:5px;
padding-left:5px !important;
}

Wow, you nailed it @Occultist thank you so much

Thanks for all the help guys