collapseable menu title as a link

jesshami / 2009-11-02 02:30:18   

Hi,

I'm using the collapsible menu on a site for a friend, and it works great (thank you to everyone who contributed to those posts). However I would like to be able to click on the menu title of and have it act as a link to a kind of splash page for that section.

Here is my site

and I would like clicking on the 'projects' to both expand the menu and bring you here

  1. I managed to create the link by using this  
  2. $(document).ready(function projectLink() {
  3. var project_title = $("#menu li.section-title");
  4. project_title.click(function() {
  5.             window.location = "http://02ea5f1.netsolhost.com/indexhibitv070e/index.php?/projects/projects/";
  6.         });
  7.  });

But that wreaks havoc on the expandable menu and I'm a super newbie with javascript so I'm not sure how to resolve this. If you could point me in the right direction I would really appreciate it.

Thanks!
Jess

arsondpi / 2009-11-02 10:05:01   

I'm no js expert as well but I think you need to bind both functions because one contradicts the other. You create a variable which is not a variable after all - all section titles would take you to the same link plus you have an extra bracket that creates an javascript error (get firebug for firefox).

  1. $('#menu ul li.section-title:first-child').html("<a href='http://02ea5f1.netsolhost.com/indexhibitv070e/index.php?/projects/projects/'>Projects</a>");

This is a very quick and awful solution - it will only work for the first section title and there's no fallback if javascript is deactivated. Of course you can create a script that searches specific text in your code and replaces it with something else - thus aiming at each section title....
I can see serious coders dissin me for this one, Vaska and Leslie getting grey hair out of disppointment etc etc.
:-P
I'd post this in the jquery forum to be honest...

ivaniannoli / 2009-11-02 18:58:28   

I have a similar question, but maybe more generally:

Is it possible to have a section title (with all of it's attributes), be a link itself?

Could this be done with inline css in the pre-nav section?

I have collapsing menu (my site is here) and I'd like to have a 'NEWS' section that links to my blog, but have that link look like every other section title.

Much obliged.

ivaniannoli / 2009-11-02 19:16:20   

FOLLOW UP TO LAST POST:

I did it with inline css (again, my site is here).

I've read that inline css isn't good, but I'm not sure why.

Does this seem problematic for anybody?

Thanks again.

jesshami / 2009-11-03 05:09:38   

Thanks arson, its actually the binding of the functions that I'm having issues with. That's the only section title I'm using so how I create the link doesn't matter to me so much...for some reason I can't even get yours to function as a link.

The jquery forum is a good idea though.

I'll keep playing with it and keep you updated..or better yet convince my friend to drop the splash altogether.

Ivaniannoli, as far as I know, people avoid inline css because it makes the code look less clean, and if you want to apply the same look to multiple things it can waste a lot of space.

That being said, creating the link in the pre-nav section is exactly the thing to do. I think if you don't want the css inline you can assign the link a class and define that in your stylesheet just like you would anything else.
But right now your site looks good to me. No point in fixing something that isn't broken.

arsondpi / 2009-11-03 09:05:35   

jesshami your is offline... I can't help further...
Basically I added it in the $(document).ready(function() { ... } of index.php

TJ / 2009-11-17 15:06:07   

Hmmm I tried putting the line in my sample/index.php but both of my menu titles change into >PROJECT< and no links shows when clicking it.

  1. $(document).ready(function() { $('#menu ul li.section-title:first-child').html("<a href='http://www.spaceandmatter.nl/architecture/favourites/'>PROJECT</a>"); 
  2. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  3.     expandingMenu(0);
  4.     expandingMenu(1);
  5.     expandingMenu(2);
  6.     expandingMenu(3);
  7.     expandingMenu(4);
  8. ¬†¬†¬†¬†expandingMenu(5); });

I want to link the menu title to a thumbnail overview (still under construction).
Anyone a clue what I am missing here?

This thread has been closed, thank you.