Jump to content

[solved] How to add drop-down menu to CMS link?


Recommended Posts

Hi there,

 

Im trying to add three drop-down menu links to my CMS link in the header horizontal menu.

post-90670-0-58713800-1369905571_thumb.png

I have successfully edited tmcategories.tpl file and replaced three categories links with my CMS links, now I would like to add three drop-down menu links to one of the CMS link in the menu and I stuck, that is way beyond my HTML/CSS/PHP knowledge and I hope someone will be able to help me. I attached two files for reference. Thanks in advance.

post-90670-0-23251400-1369905564_thumb.png

  • Like 1
Link to comment
Share on other sites

well, you have to create additional code there and you have to add links manually.

what you have to do is:

 

to the li with "support & cables guide" add own id="" param (must be individual) and style="position:relative";

 

then to this <li> add <div> or <ul> with links to the pages you want. You have to add style: position:absolute; width display:none;

 

then for the li with "support & cables guide" (id="") add onmouseover action, which will show the div with your links

 

hope all is clear, if not - feel free to continue discussion here

  • Like 1
Link to comment
Share on other sites

Thanks for your help!

I think I understand most of what you wrote, but still have a question regarding the own id="" and param. Do I have to create new id name and add it to the global.css with the "position:relative;" between the brackets? Or leave it empty --> id=""? And the param thing, is it kind of parameter? is it referring to the id="" mentioned before? Thanks!

Link to comment
Share on other sites

i mean that you have to use something like:

<li id="supportcable" style="position:relative;">[color=#343943][font=Arial, Helvetica, sans-serif][size=3]support & cables guide[/size][/font][/color]</li>

 

+ additional code with sublinks:

<li id="supportcable" style="position:relative;">[color=#343943][font=Arial, Helvetica, sans-serif][size=3]support & cables guide <ul id="support_sublinks" style="display:none; position:absolute;">
<li>link1</li>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]<li>link2</li>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]<li>link3</li>[/size][/font][/color]
[color=#343943][font=Arial, Helvetica, sans-serif][size=3]</ul>[/size][/font][/color]</li>

 

then create a script with:

 

$("#supportcable").mouseover(function() {

$("#support_sublinks").show();

});

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...