Dropdown submenu left column module -esport template

I'd like to be able to create a dropdown or split menu in the left column module position.(e-sport template)
Now all subitems are displayed, I only want them to be visable when I click the menu button or when hovering it.
Could somenone help me out with this? You can check a demoversion of my website at www.vmconline.be/KB
Thx

Its hard to give You complete solution, as it is quite custom thing that our templates doesnt support ootb.
You should edit /templates/gk_esport/js/gk.scripts.js
and add to

Code: Select all

jQuery(document).ready(function(){

})


some lines. I would start with:

Code: Select all

jQuery('#gkLeftLeft div.content').hide();
jQuery('#gkLeftLeft h3.header').click(function(){
   jQuery('#gkLeftLeft div.content'). slideToggle();
});
jQuery('#gkLeftLeft h3.header').css('cursor', 'pointer');


Thx for your reply. I've added the code but now the whole left sidebar collapses and only the menu title is visible. It should only hide or display the subitems. Any fix for that?

I have understood you wrongly .
Ok, You would like to be able to show and hide 2 level nav, but still 1rst level nav is clickable, so it cant work "on click" because then, you could not access 1rst level items. It could work on hover, but I'm not quite sure if from usability point of view it is a good solution. But if You would like it to work this way, just tell me, and I;ll try to prepare working code for You.

Yes, I'd like to be able to view the level 1 navigation as standard and when clicking it, it drops down and shows the level 2 nav. Hope this makes sense. Thx

Again, I need to be 100% clear - this way You will make 1rst level links unreachable (clicking it will drop down its child elements instead of opening that link) - is that correct?

Yes, that's correct. Clicking it will dropdown child elements

Sadly the site doesnt exist anymore. Could You post a current url?

Website is back online http://www.vmconline.be/KB/

Remove previous code (if it is still there), and add this one:

Code: Select all

jQuery('#gkLeftLeft div.content ul > li > ul').hide();
jQuery('#gkLeftLeft div.content ul > li > a').click(function(event){
   event.preventDefault();
   jQuery(this).next().slideToggle();
});


Is it possible to display a little arrow at the end of menu item so visitors know that this menu item has several subitems? Arrow only needs to be displayed when menu contains any subitems

It might be done, but please place one item with submenu, so I could prepare a working sample code for You.

I just added some submenus to item "Gelegenheidskaarsen" in the left column sidebar.

I've discovered another problem. When adding the following code to display the subitems
jQuery('#gkLeftLeft div.content ul > li > ul').hide();
jQuery('#gkLeftLeft div.content ul > li > a').click(function(event){
event.preventDefault();
jQuery(this).next().slideToggle();
});

The linked pages to that item no longer work. So when there are subitems it should show the dubitems. When there aren't any subitems it should navigate to the according page.

Code: Select all

jQuery('#gkLeftLeft div.content ul > li > ul').hide();
jQuery('#gkLeftLeft div.content ul > li.deeper > a').click(function(event){
event.preventDefault();
jQuery(this).next().slideToggle();
});


This should work better, but please test it.

To add the arrow:
Please edit: /templates/gk_esport/css/override.css and add at its end:

Code: Select all

#gkLeftLeft ul.nav li.deeper {background: transparent url('../path/to/your/png/file/with/arrow.png')} 100% 50% no-repeat;


(instead of ../ relativelly to override.css You could use full path with http)
Remember to enable "CSS override" in template settings - advanced section.