Dropdown Navbarlink for Invision
3 posters
Page 1 of 1
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
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
Last edited by TonnyKamper on September 23rd 2019, 3:47 pm; edited 1 time in total
Re: Dropdown Navbarlink for Invision
It is pretty easy to do. Add a link in the Admin Panel with an url like
. The text after # can be whatever you want. Also, do you need sub-dropdowns?
|
Guest- Guest
Re: Dropdown Navbarlink for Invision
i think in the code you should change this
link.className = 'mainmenu';
to this
link.className = 'submenu';
link.className = 'mainmenu';
to this
link.className = 'submenu';
Re: Dropdown Navbarlink for Invision
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
Re: Dropdown Navbarlink for Invision
The javascript code:
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.
- 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>";
});
- 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.
Guest- Guest
Re: Dropdown Navbarlink for Invision
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..
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..
Re: Dropdown Navbarlink for Invision
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;
}
Guest- Guest
Re: Dropdown Navbarlink for Invision
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
Re: Dropdown Navbarlink for Invision
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» CSS Dropdown Menu
» How to make Dropdown menus
» Dropdown NavBar
» dropdown menu problems
» i want add dropdown abridgement in sceditor
» How to make Dropdown menus
» Dropdown NavBar
» dropdown menu problems
» i want add dropdown abridgement in sceditor
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum