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 : 658
Reputation : 58
Language : Dutch/English
Location : The Netherlands

View user profile 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 : 225
Reputation : 63
Language : English and couple others

View user profile 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 : 9683
Reputation : 1243
Language : English,Greek
Location : Greece

View user profile 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 : 658
Reputation : 58
Language : Dutch/English
Location : The Netherlands

View user profile 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 : 225
Reputation : 63
Language : English and couple others

View user profile 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 : 658
Reputation : 58
Language : Dutch/English
Location : The Netherlands

View user profile 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 : 225
Reputation : 63
Language : English and couple others

View user profile 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 : 658
Reputation : 58
Language : Dutch/English
Location : The Netherlands

View user profile 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 Keep_s10
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 : 48313
Reputation : 3392
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Back to top


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