Setting URL in Suckerfish dropdown menu

[cothedo]

I'm building my second site with Typolight, this time with a two level Suckerfish dropdown menu (http://htmldog.com/articles/suckerfish/dropdowns/).

Now everything works fine, but I was wondering if it is possible to set the URL of a page to "#".
For example, I have a menu-item called news, and that has two sub-items called "News overview" and "Picture of the month", like so:
- Home
- news
------ News overview
------ Picture of the month
- Our product
----- Product 1
----- Product 2

...etc...

Now, the "News" and "Product" menu-items should have a URL of "#", and its two sub-items should have regular URLs referring to their page.

Does anybody have any suggestions how to solve this?

Thanks in advance.

[Vera]

Well, you can change the page type into a redirect and set the url as #. I've never set an url to # before though!

I suggest you make the pages you do not want to be clickable in the menu an internal redirect to the first page underneath and then on top of that you may want to cancel the click event for those items using javascript (return false;/take out the onclickevent all thogether. Whichever you like best) This will leave perfectly good urls in the html but give the functionality you ask for. Or just make an overview page when you click those menu items.

The reason I'd not set an url to # is because usually that goes in the history and the address bar.

[cothedo]

Thanks, using the redirect is a good idea.

Stupid me, but I'm completely lost about how to set the URL (I tried setting the page alias to #, which resulted in an error) or how to add a JavaScript "return false". I couldn't find any answers in the online user guide, so any hint would be appreciated.

[Vera]

That will take some scripting.

Option one use a javascript toolkit. Actually the default javascript "toolkit" for typolight is mootools and I never use that. without a toolkit it becomes even more complicated, so I can't help you for the javascript.

There is also a way to create a navigation template (copy existing and edit). You can then add an attribute onclick="return false;" to the elements for which there are children. This will take some PHP scripting.

[cothedo]

Thanks for the reply. I'd thought of adjusting the navigation template, but I thought you meant that there was some sort of way of setting the page URL without scripting. :D
I'll go and adjust the template.

[Vera]

It just depends on what you want.

If you don't care about the # address in your html code, then you can do it without scripting. But adjusting the templates is not very hard, nor is adding javascript (provided you know mootools or use jquery although the later is not standard)

[cothedo]

If you don't care about the # address in your html code, then you can do it without scripting.

Really? How? All I could think of was to adjust the navigation template so that all (or some) first level menu-items would link to #. Or am I overlooking something really simple and obvious? (Probably... :D)

[Vera]

I tried setting the pages for which you want the link to be "#". I changed their types to "external redirect" and at the url I typed "#". This didn't work right away because TL has a base url element in the default html template. After removing that it did work exactly as I said.

You would need to remove: <base href="<?php echo $this->base; ?>" />

But like I said before: you should not use # as a url. Doing so is a trick to get something you want rather then a solution.

[cothedo]

Problem solved! I used an internal redirect and edited the navigation template by using a "return false" in the onclick event if there are child elements.

Thanks for your answers!

[Vera]

Good

Now you could also leave out the anchor (<a>) element for those items entirely That might require small changes on the "suckerfish" part...

Just keeping you busy :D

[cothedo]

Oh, now you tell me :-)

Actually, that was a good idea. I replaced the <a> with a <span> tag. It took only a minimum of tweaking.

[Vera]

Yeah well, I might not be a natural blonde, but still... :roll:

[polloloco]

Problem solved! I used an internal redirect and edited the navigation template by using a "return false" in the onclick event if there are child elements.

Thanks for your answers!

Would you mind posting the code you used to disable the parent element for clicking? I have the exact same issue and my php scripting abilities are nothing to be desired. Thank you very much in advance!

[cothedo]

I discarded the solution that you quoted here. I did some PHP scipting to adjust the navigation template (.tpl file). I'm not sure if I should post the template here, it is custom made to my own situation...

[polloloco]

I discarded the solution that you quoted here. I did some PHP scipting to adjust the navigation template (.tpl file). I'm not sure if I should post the template here, it is custom made to my own situation...

Darn...Thanks anyway. Is anyone aware of a simple solution to disabling the parent menu options? I'm not sure I quite follow the <a>/<span> discussion mentioned above? Thanks again in advance!

[cothedo]

What I did was convert an <a> tag into a <span> tag when a level1 menu item has child items. I did this in the navigation template with a bit of PHP. Well, I'll post what I made anyway, and maybe it is of help to you. I added a few classes of my own for the CSS:

<?php $class_count = 1 ?>
<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php $menu_item_class = "item" . $class_count; ?>
<?php if ($item['isActive'] || $item['subitems']): ?>
<li class="<?php if (!$item['subitems']): ?>active  <?php endif; ?><?php echo $menu_item_class; ?><?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="<?php if (!$item['subitems']): ?>active  <?php endif; ?><?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?> <?php echo $menu_item_class; ?>" <?php else: ?> class="<?php echo $menu_item_class; ?>" <?php endif; ?>>" <?php if ($item['class']): ?> class="<?php echo $item['class']; ?> <?php echo $menu_item_class; ?>" <?php else: ?> class="<?php echo $menu_item_class; ?>" <?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php $class_count++; ?>
<?php endforeach; ?>[/list]

Hope this helps, or maybe you can use it as a basis for your own solution.