Only expand submenu when selecting parent menu item

Need help with the Administration of your Joomla! 1.5 site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
keb1965
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 117
Joined: Mon Dec 15, 2008 7:23 pm

Only expand submenu when selecting parent menu item

Post by keb1965 » Tue Dec 16, 2008 8:11 pm

I would like to know if it is possible to have a menu item point to the current page such or to nothing in such a manner that if the menu item is selected, it will simply open the submenu.

Ultimately what I would like to do is this ...

I have 3 sections setup, each has several static articles that I would like to be accessible as menu items. I also have 3 menu items setup corresponding to the 3 sections. I suppose it would be simple to link each menu item with the section and display all the items in the section, but I would rather have each menu item, when selected, to display all available articles in that section as submenu items, the user would then select the item to display from the submenu.

I can get there from here by simply manually creating each submenu item, but I would prefer the submenu be built automatically from the published articles in the section. Further, I would like the parent menu item to point to nothing, just simply expand the submenu when selected.

I would appreciate any insight into this issue.

alisial3
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Jun 24, 2008 2:30 pm

Re: Only expand submenu when selecting parent menu item

Post by alisial3 » Tue Dec 16, 2008 10:33 pm

yes its possible, open menu item manager in joomla admin, select the menu u want to have do nothing, in this case the parent item, and click on Select Menu Item Type, and in it choose "Separator" from the last(its the last one), this will make the parent item be a place holder, instead of it pointing to a link

keb1965
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 117
Joined: Mon Dec 15, 2008 7:23 pm

Re: Only expand submenu when selecting parent menu item

Post by keb1965 » Wed Dec 17, 2008 1:38 am

nope, it doesn't work, the menu item then changes to be static text and doesn't display the submenu attached. Besides the different look, it is also not functional.

I don't simply want a placeholder, I want it to be funtional in only the aspect that when selected, it will display the subment and not change the current page being shown.

karakoram
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Feb 03, 2009 1:55 am

Re: Only expand submenu when selecting parent menu item

Post by karakoram » Tue Feb 03, 2009 2:15 am

Hi!

I have the exact same need: i have a menu item in my main menu, which has a submenu. When i click the parent menu item, i would like the action to only expand the submenu, *without* actually loading the page that the menu item points to.

I actually already tried making my parent menu item a separator before searching these forums :) and also tried to make my menu item an external link with no URL in its link parameter - either approach just makes my menu item un-clickable dead text.

Could somebody please help?

Thanks!

malwk
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Feb 19, 2009 8:54 pm

Re: Only expand submenu when selecting parent menu item

Post by malwk » Thu Feb 19, 2009 9:07 pm

This would be terribly useful if someone had a solution.

I've attempted the same solutions as above (before locating this thread), with no success.

I just want a menu item that doesn't do anything but open up it's sub-menus and not change anything else.

Thank you.

Stevetm
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Mon Sep 18, 2006 2:13 pm

Re: Only expand submenu when selecting parent menu item

Post by Stevetm » Wed Feb 25, 2009 4:35 pm

Hi

Choose external URL and type # as a link, that will work - at least if u use a template with a mainmenu with submenus.
/Steve
Last edited by Stevetm on Wed Feb 25, 2009 6:31 pm, edited 1 time in total.

malwk
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Feb 19, 2009 8:54 pm

Re: Only expand submenu when selecting parent menu item

Post by malwk » Wed Feb 25, 2009 4:58 pm

Steve,

Thanks for the reply. This doesn't seem to work for me. When I click on the now External Link, the URL changes to just add the #, but the submenu doesn't change.

Stevetm
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Mon Sep 18, 2006 2:13 pm

Re: Only expand submenu when selecting parent menu item

Post by Stevetm » Wed Feb 25, 2009 5:23 pm

Hi

Strange, I have been using this solution on several (10+) sites with Joomla 1.5.X, se exampel at http://www.cajutan.com click or hover over the menu item "Restaurangen" and the submenus expands. Maybe related to a template/menu difference.

/Steve

keb1965
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 117
Joined: Mon Dec 15, 2008 7:23 pm

Re: Only expand submenu when selecting parent menu item

Post by keb1965 » Wed Feb 25, 2009 6:03 pm

The menu I am having problems with isn't the top menu. This does not work for me on the side menus.

User avatar
gadjah1966
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Mar 04, 2009 3:15 pm

Re: Only expand submenu when selecting parent menu item

Post by gadjah1966 » Fri Mar 06, 2009 3:35 pm

Stevetm wrote:Hi

Choose external URL and type # as a link, that will work - at least if u use a template with a mainmenu with submenus.
/Steve
Thanks Steve, it works for me. My menu is on user3 position.

www.propcongolf.com

outlawpolyester
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Tue Dec 12, 2006 11:04 pm

Re: Only expand submenu when selecting parent menu item

Post by outlawpolyester » Thu May 28, 2009 6:52 pm

I can say this solution also does not work for me. I am attempting to use it on a side menu in the 'Left' position. As malwk said, it just adds a '#' to the end of the url and doesn't expand the menu.

Anyone else have a workable solution?

nmask
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Sep 10, 2009 12:46 pm

Re: Only expand submenu when selecting parent menu item

Post by nmask » Thu Sep 10, 2009 12:50 pm

Hi,

I have the same problem..
Any suggestions?

thanks

monalisasmile
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Jan 11, 2009 1:19 am

Re: Only expand submenu when selecting parent menu item

Post by monalisasmile » Sun Jan 31, 2010 6:58 am

i would lilke to know how to solve this too!

marcodelpercio
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Apr 18, 2010 9:42 am

Re: Only expand submenu when selecting parent menu item

Post by marcodelpercio » Sun Apr 18, 2010 9:54 am

I wonder why this topic has been unanswered so long time, I was having the same issue/need and seeing that no one posted a nice solution I decided to share my implementation. The solution is in 4 simple steps and the result is pretty eyecandy ;-) :

1) Change the parent menu item type to "External link" and be sure not to write anything in the Link field (it must be empty)

2) Include jQuery js file in your template index.php and remember to invoke jQuery.noConflict(); right after including jQuery so that it won't conflict with default mootools.js included in Joomla and/or your template

3) In your modules showing menus be sure activate the option to "Always show submenu items"

4) paste this code wherever you want (Eg. in the head section of your index.php template)

Code: Select all

jQuery(document).ready(function() {
     jQuery('div ul.menu li').each(function() {
                  var liCurr = this;
                  var liCorrente = jQuery(this);
                  var aParent = null;
                  var hasSubMenu = false;
                  var ulSubmenu = null;
                  liCorrente.children().each(function() {
                        if(this.nodeName.toUpperCase() == 'UL') {
                            hasSubMenu = true;
                            ulSubmenu = jQuery(this);  
                        }
                        else if(this.nodeName.toUpperCase() == 'A') {
                            aParent = jQuery(this);  
                        }
                  });
                  if(hasSubMenu && ulSubmenu != null && aParent != null) {
                      var idName = liCurr.className.replace(/\s*/g,'') + '_submenu';
                      ulSubmenu.attr('id',idName);
                      ulSubmenu.css('display', 'none');
                      aParent.click(function(){
                          jQuery('ul#'+idName).slideToggle('fast');
                          return false;
                      });
                  }
            });
});
As result of these settings and code you'll be able to click on any parent item and it will slideup/slidedown the submenu items with nice jQuery effect and any parent link action/navigation will be disabled. Hope it helps.

Greetings
Marco Del Percio

Stephanjk
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Aug 29, 2010 9:00 pm

Re: Only expand submenu when selecting parent menu item

Post by Stephanjk » Sun Aug 29, 2010 9:51 pm

I'm trying to implement marcodelpercio's solution, but I can't get it to work. This is what I did so far:

- I changed the parent item to "External link".
- The menu module is set to "Always show submenu items".
- I found the "fquery.js" file in "/plugins/content/sigplus/js" and copied that file to "/templates/templatename".
- In index.php I added the next code:

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/templatename/jquery.js; jQuery.noConflict();">

jQuery(document).ready(function() {
     jQuery('div ul.menu li').each(function() {
                  var liCurr = this;
                  var liCorrente = jQuery(this);
                  var aParent = null;
                  var hasSubMenu = false;
                  var ulSubmenu = null;
                  liCorrente.children().each(function() {
                        if(this.nodeName.toUpperCase() == 'UL') {
                            hasSubMenu = true;
                            ulSubmenu = jQuery(this);  
                        }
                        else if(this.nodeName.toUpperCase() == 'A') {
                            aParent = jQuery(this);  
                        }
                  });
                  if(hasSubMenu && ulSubmenu != null && aParent != null) {
                      var idName = liCurr.className.replace(/\s*/g,'') + '_submenu';
                      ulSubmenu.attr('id',idName);
                      ulSubmenu.css('display', 'none');
                      aParent.click(function(){
                          jQuery('ul#'+idName).slideToggle('fast');
                          return false;
                      });
                  }
            });
});
</script>
There is no error message, but when I click the menu item nothing happens.

I hope somebody can help me out.

Stephanjk
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Aug 29, 2010 9:00 pm

Re: Only expand submenu when selecting parent menu item

Post by Stephanjk » Tue Aug 31, 2010 8:24 pm

Nobody who can help me? ???

NormBleac
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Sep 01, 2010 3:17 pm

Re: Only expand submenu when selecting parent menu item

Post by NormBleac » Wed Sep 01, 2010 7:35 pm

OK I'm no expert in these fields, but I did manage to make this thing work. It just took a little tinkering and a lot of trial and error.

First I got a copy of jQuery from http://docs.jquery.com/Downloading_jQuery.
I put that in my joomla/media/system/js folder (see the corresponding path in the code).
In the main menu module checked 'always show submenu items'.
Then I made all parent menu items of type 'external link', and assigned '#' as the link. I did this so that the cursor changes to a pointing hand when hovering over these menu items.
Finally, in the header section of index.php I pasted this:

Code: Select all

<script type="text/javascript" src="<?php echo $tmpTools->baseurl();?>media/system/js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
     jQuery('div ul.menu li').each(function() {
                  var liCurr = this;
                  var liCorrente = jQuery(this);
                  var aParent = null;
                  var hasSubMenu = false;
                  var ulSubmenu = null;
                  liCorrente.children().each(function() {
                        if(this.nodeName.toUpperCase() == 'UL') {
                            hasSubMenu = true;
                            ulSubmenu = jQuery(this); 
                        }
                        else if(this.nodeName.toUpperCase() == 'A') {
                            aParent = jQuery(this); 
                        }
                  });
                  if(hasSubMenu && ulSubmenu != null && aParent != null) {
                      var idName = liCurr.className.replace(/\s*/g,'') + '_submenu';
                      ulSubmenu.attr('id',idName);
                      ulSubmenu.css('display', 'none');
                      aParent.click(function(){
                          jQuery('ul#'+idName).slideToggle('fast');
                          return false;
                      });
                  }
            });
});
</script>
Many thanx to marcodelpercio..!

Stephanjk
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Aug 29, 2010 9:00 pm

Re: Only expand submenu when selecting parent menu item

Post by Stephanjk » Thu Sep 02, 2010 10:38 am

Thank you Normbleac for your reaction. I changed my script and played around a little with it, but I can't get it to work. At a later time I will look at it in more detail, because I'm at work right now. I let you know the result.

marcodelpercio
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Apr 18, 2010 9:42 am

Re: Only expand submenu when selecting parent menu item

Post by marcodelpercio » Sun Sep 05, 2010 7:07 am

Hi

Sorry for not answering you before, it has been a very long time I posted this and I was on holiday. Anyway glad to see that you made it to work. In fact in the first try you made... the js inclusion was the problem. If any other has issues about this please let me know....
By the way: if you already have jquery included because you have decided to use (for example) sigplus or (more in general) any other extension that already provide jquery... you simply don't need to include it :-)

Stephanjk
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Aug 29, 2010 9:00 pm

Re: Only expand submenu when selecting parent menu item

Post by Stephanjk » Sun Sep 05, 2010 9:26 pm

Thanks for replying as well, Marco. Unfortunately, I still have problems with the code.

When I remove the jquery inclusion (because I use sigplus) and I open the website I get the error "jQuery is undefined".

So I included the following line to include jQuery:

Code: Select all

<script type="text/javascript" src="<?php echo $tmpTools->baseurl();?>media/system/js/jquery.js"></script>
When I open the website the only text I see is <script type="text/javascript" src=".

Then, when I change $tmpTools->baseurl(); to $tmpTools->baseurl; I can open the website without any error, but nothing happens when I click the menu item.

I also downloaded the newest version of jQuery (jquery-1.4.2.js) and ofcourse changed the filename in the inclusion, but I get the same results.

What am I missing here?

marcodelpercio
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Apr 18, 2010 9:42 am

Re: Only expand submenu when selecting parent menu item

Post by marcodelpercio » Sun Sep 05, 2010 9:58 pm

Hi
Stephanjk wrote:When I remove the jquery inclusion (because I use sigplus) and I open the website I get the error "jQuery is undefined".
Sigplus is a nice content plugin that may use various js frameworks, not necessarily jQuery... if you are using Sigplus but you choosed mootools...then of course it is not including jQuery and (as probably in your case) you need to include it separately. If you are using Sigplus with jQuery then Sigplus already include jQuery framework for you ...and you won't need to include it twice.
Stephanjk wrote: So I included the following line to include jQuery:

Code: Select all

<script type="text/javascript" src="<?php echo $tmpTools->baseurl();?>media/system/js/jquery.js"></script>
When I open the website the only text I see is <script type="text/javascript" src=".

Then, when I change $tmpTools->baseurl(); to $tmpTools->baseurl; I can open the website without any error, but nothing happens when I click the menu item.
This is certainly a php error and in any case printing out a wrong path (since you said nothing happens). I really don't understand why you use something like $tmpTools... I don't know what the hell is that...I suppose it was the name of a custom php object variable declared somewhere in some template, you cannot use it anywhere in any template... just forget about $tmpTools. For now try a simple inclusion giving a static path to where you copied jquery js file and see if it works...(it really should) then if you really need to provide a dynamic path using php ..I'd suggest you to use standard Joomla API like JUri::base or similar... look here http://docs.joomla.org/JURI/base

Stephanjk
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Sun Aug 29, 2010 9:00 pm

Re: Only expand submenu when selecting parent menu item

Post by Stephanjk » Tue Sep 07, 2010 7:50 pm

Hi Marco,

I used $tmpTools, because Normbleac used it in his script (see above) so I assumed that should work. However, not in my case.

In the meantime I found out that the problem is the menu itself. I use another menu than the main menu, which is working as it should. When I change a parent menu item in main menu it does expand. Only in the other menu it does not work. I will compare the settings between those menu's and hope to get it working.

In the main menu the inclusion works both with the direct link and php. :)

Update: The main menu had "list" as Menu Style and "-menu" as Module Class Suffix. When I change one of those values to "Legacy - Vertical" or "art-vmenu" the expanding does not work anymore. Any ideas where to look in the template?

Shelomit
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Sep 25, 2009 10:59 pm

Re: Only expand submenu when selecting parent menu item

Post by Shelomit » Mon Jan 03, 2011 6:03 pm

Thank you marcodelpercio and NormBleac, this solution is working for me. The submenu opens only when the parent item is clicked.

However when an item in the submenu is clicked, the submenu closes again, and in order to open another submenu item the parent item must be clicked again.

I would like the submenu to stay open until another top-level item is clicked. How can this be achieved?

Thank you.

Shelomit
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Sep 25, 2009 10:59 pm

Re: Only expand submenu when selecting parent menu item

Post by Shelomit » Mon Jan 10, 2011 6:58 am

Does anyone have some clues on this? Can the submenu be set to stay open until another top-level item is clicked?

PavloL
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri May 11, 2012 4:50 pm

Re: Only expand submenu when selecting parent menu item

Post by PavloL » Fri May 11, 2012 4:57 pm

Hi guys,

I had the same problem. And now I have a solution which works for me.
You do you parent menu item type as Text separator. You do all you submenus and then you go to Extensions -> Module Manager. Select the menu you are working with (where you want a parent element just to display submenus). On the right side there is Basic Options. Check Yes in Show Sub-menu Items and click Save on top to save your changes. That's all. It works for me.

I hope it'll help.

Best regards,
Pavlo


Locked

Return to “Administration 1.5”