Dropdown Navbarlink for Invision

Go down

Solved Dropdown Navbarlink for Invision

Post by TonnyKamper on 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
Forumember

Female Posts : 584
Reputation : 46
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Occultist on 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?
Occultist
Occultist
Forumember

Posts : 221
Reputation : 56
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by skouliki on 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 : 7688
Reputation : 1062
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper on 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
Forumember

Female Posts : 584
Reputation : 46
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Occultist on 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.
Occultist
Occultist
Forumember

Posts : 221
Reputation : 56
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper on 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
Forumember

Female Posts : 584
Reputation : 46
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by Occultist on 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;
}
Occultist
Occultist
Forumember

Posts : 221
Reputation : 56
Language : English and couple others

https://idonthaveaforum.forumotion.com

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by TonnyKamper on 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
Forumember

Female Posts : 584
Reputation : 46
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: Dropdown Navbarlink for Invision

Post by SLGray on 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 : 47010
Reputation : 3285
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Back to top


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