The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Dropdown Navbarlink for Invision

3 posters

Go down

Solved Dropdown Navbarlink for Invision

Post by TonnyKamper September 21st 2019, 5:54 pm

Hi guys Hello

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.. Help me

All help is much appreciated Angel

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


Last edited by TonnyKamper on September 23rd 2019, 3:47 pm; edited 1 time in total
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Guest September 21st 2019, 6:11 pm

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?
avatar
Guest
Guest


Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by skouliki September 21st 2019, 6:18 pm

i think in the code you should change this

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

skouliki
skouliki
Manager
Manager

Female Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper September 21st 2019, 7:19 pm

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 Smile
I made the link in the navbar, it's called "Categorie" .. so how to add sublinks to it is the question Smile

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 Smile
EDIT: It didn't worked skouliki Dropdown Navbarlink for Invision Mouais
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Guest September 22nd 2019, 10:10 pm

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper September 23rd 2019, 12:43 pm

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 cheers

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

Female Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Guest September 23rd 2019, 2:21 pm

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;
}
avatar
Guest
Guest


Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper September 23rd 2019, 3:46 pm

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 Yes Huzzah

Thanks for all the help guys Bow 2 Flowers
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1095
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by SLGray September 23rd 2019, 7:45 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


Dropdown Navbarlink for Invision Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum