Forums » Ideas

Tutorial: collapsable menu -Spanish

nvdg
NETHERLANDS
2009-12-19 22:33:16
Permalink Post
 

Hi, I was wondering if and how it is possible to give the section titles a hover effect with this expanding method?

arsondpi A
GREECE
2009-12-20 11:22:55
Permalink Post
 

No need to doublepost though...

nvdg
NETHERLANDS
2009-12-20 11:58:14
Permalink Post
 

sorry, i just thought I'd start a new thread, so it's easier to find :)

laurenkim
UNITED STATES
2009-12-22 20:07:41
Permalink Post
 

got it to work! please disregard my last post :)

jbusy215
UNITED STATES
2009-12-23 01:11:09
Permalink Post
 

First off - THANK YOU this is such a great thing and great community, so thank you all so much for making me procrastinate during my real job to mess with code...just little background, i'm no wiz by any chance but used to do some VB coding back in the 90s so i know a liitle...anyways..

The script worked fantastic, my only issue is that my third menu does not appear hidden when I load the page..I've spent a few days messing before I thought I'd post and re-reading this thread probably ummm 400 times, here's what i've done:

• Uploaded script successfully
• Updated Jquery file
• Added nessecary code, which works for first 2 menus, just not third
• Fought with it for a few days, even deleted ENTIRE site, started completed over with indexhibit (and re-did tutorial very slowly and carefully, but obviously not carefully enough) and still same problem....

Here's how my code looks:

  1. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
  2. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
  3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>
  4. <plug:front_lib_js />
  5. <script type='text/javascript'>
  6. path = '<%baseurl%>/files/gimgs/';

$(document).ready(function() {
    setTimeout('move_up()', 1);
    expandingMenu(0);
    expandingMenu(1);
    expandingMenu(2);
    expandingMenu(3);
});


Not sure what it might be, but if anyone could check out my site and peek thru the source maybe someone could point me in the right direction? I like the mystery surrounded by this site :)

my site is www.joenash.tv

TY to anyone who can help!! BEST!! PEACE/LOVE! - Joe

kapodaki
RUSSIA
2009-12-23 13:41:16
Permalink Post
 

Hi! I use collapsable.menu.thenine.js for my site. The only problem is when the page is loading (or reloading) the menu unfolds completely and folds back in a second. Why does it happen? And how to fix it?

Vaska A
I WROTE THIS
2009-12-26 17:58:41
Permalink Post
 

Slow loading times on the browser or because the webhost is slow. It's a very though problem to solve...

But you will notice that it works very well on many sites without the loading oddity...

jbusy215
UNITED STATES
2010-01-01 23:36:42
Permalink Post
 

hey everyone,

I've posted the issue i keep fighting with two posts above.. since i've posted last i've re-done everything 3 times and still haven't figured it out...any insight anyone?

happy new year all :)

(joenash.tv)

arsondpi A
GREECE
2010-01-02 12:21:26
Permalink Post
 

The expanding menu code has a function with which the section that includes the active exhibit stays open. Your Contact page is your main/home page and thus Info will always appear open when one visits your site. I suggest to do this:

-Create a new section. In Settings set Display Section Title to Off
-Rename your Contact page to Main or Home (or whatever).
-Move the home page to the new section. Then click to edit it and hide it from the index.
-Create a new exhibit page and place it in the info section.

jbusy215
UNITED STATES
2010-01-03 00:38:01
Permalink Post
 

ahhhh i got it! I thought it was just the "section" that stayed and not also the "contact" page which was also an active exhibit that would not hide.

Thank you so much!! Much appreciated !!

best wishes, peace and love,

joe from philly

joeperezgreen
UNITED STATES
2010-01-10 20:14:37
Permalink Post
 

i have the same issue and moss and melazed.

I have right aligned my collapsable menu and want the expanding menu to preform as they do if it was a left aligned menu, instead of swooping in from the left.

I am assuming that left aligned is the default so the expanded menus appears to swoop because they are coming from their default "home".

Thing is, i dont know js at all. I am learning an reading but I just cant see where I would slip in the code I would need.

Any help would be great appreciated. And Ross, Thank you so much, this was a breeze thanks to your clear instructions.

joe

Tosh
AUSTRALIA
2010-01-11 06:53:09
Permalink Post
 

Excuse my ignorance, but does anyone know where I can find a step-by-step guide to integrate Ross Cairn's code for expandable menus (but preferably so it functions like http://www.beeemmott.co.uk/index.php)?

Thanks,
Tosh

jonathangrevsen
DENMARK
2010-01-12 15:14:24
Permalink Post
 

Hello.
I have made my collapse menu with rosscairns js:

http://www.test.tecadesign.com/indexhibitv070e/

For some reason the info section show as active from start, not like the other menus. Anyone have an idea?

Best regards Jonathan

lemathieu A
FRANCE
2010-01-12 15:50:30
Permalink Post
 

It's just because the landing page is the "main", so the secion aove this is open.

jonathangrevsen
DENMARK
2010-01-12 15:59:36
Permalink Post
 

Can you explain that more detailed?

jonathangrevsen
DENMARK
2010-01-12 16:18:10
Permalink Post
 

Ok. I got your point.. Now my problem is just to remove the main menu? Since it does not disapear when adding not published

lemathieu A
FRANCE
2010-01-12 16:42:56
Permalink Post
 

Sorry, don't get it…
what you want to do ?

jonathangrevsen
DENMARK
2010-01-12 16:54:05
Permalink Post
 

Hey. Sorry. Just meant if it is possible to disable the menu: Main? But guess it is good that its there. But it seems that it dont bring me to the frontpage after clicking some of the links..

lacaffettieracleofe
ITALY
2010-01-13 00:46:40
Permalink Post
 

Hi!
I have installed the collapse menu js.
but now I have some problem with indexhibit slideshow in safari: images do not appear.
It works in firefox.
I read the post about new js for slide show pro, but It is hard for me because I don't know php code.
I really love the basic indexhibit slideshow.
here my page: slide that doesen't work: I have three img dissapeared.
Is there any tip to make slideshow work?

tsoutisn
GREECE
2010-01-13 06:31:28
Permalink Post
 

where I can find a step-by-step for expandable menus
I want to be appears like www.bluetit.gr

arsondpi A
GREECE
2010-01-13 10:53:16
Permalink Post
 

Καλησπέρα...

Did you search the forum? What's your address?

joeperezgreen
UNITED STATES
2010-01-13 20:26:32
Permalink Post
 

Anybody? Anyone? right aligned drop downs that dont swoop in from the left ...

I know it has to be a line of java but i have no idea where to look for code for that or where in Ross' js to put it.

Even a point in the right direction would be really helpful.

joe

mmaattiillddaa
UK
2010-01-13 23:14:24
Permalink Post
 

Evening everyone - I've got a familiar question about the collapsing menus...

At the moment on my site you can have several menu items expanded at a time until you click on a new exhibit, then they all collapse, apart from the active one.

What I would like to happen is that as soon as you click a new menu item, any other expanded menus are collapsed straight away, without you having to click on a new exhibit. I would like it so you can only have one menu expanded at a time.

Just like in mitch's original question: 'if B is open and i click on C, B closes automatically?'

This is the code I'm using:

$(document).ready(function()
{
    setTimeout('move_up()', 1);expandingMenu(0);expandingMenu(1);expandingMenu(2);expandingMenu(3);expandingMenu(4);expandingMenu(5);expandingMenu(6);expandingMenu(7);expandingMenu(8);expandingMenu(9);});

$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
});

$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});

Can anyone tell me where I'm going wrong? I've looked through all of this thread and can't work it out.

Thanks in advance - here's my site www.mmaattiillddaa.com - still a work in progress ;)

mmaattiillddaa
UK
2010-01-13 23:17:43
Permalink Post
 

This is really to avoid having the scroll bar appear, which happens when too much stuff is expanded - it doesn't look very good!

tsoutisn
GREECE
2010-01-14 11:18:35
Permalink Post
 

arsondpi A

my mail mail is tsoutis@yahoo.gr, my site dimiourgikakimata.gr

mmaattiillddaa
UK
2010-01-14 11:32:35
Permalink Post
 

Any ideas for this this morning? I have tried copying some script from a site mentioned earlier in the thread - http://www.hypothesisdesign.com/ but it doesn't work

My site again is: www.mmaattiillddaa.com

(trying to get 'if B is open and i click on C, B closes automatically?' to work)

:)

mmaattiillddaa
UK
2010-01-14 14:58:08
Permalink Post
 

A friend did some tinkering with the script and now it works fine.

For anyone else's info, add this line of script:

var all = $("#menu ul").children().filter(function(){return $(this).attr("class") != "section-title";});

after this line:

var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });

palermo007
NETHERLANDS
2010-02-01 20:38:38
Permalink Post
 

Hi mmaattiillddaa

  1. I tried your solution, it doesn't work for me i'm afraid....
  2. added 
  3. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  1. to expandingMenus.js, no result. After that I also added
  2. $(document).ready(function()
  3. 35{
  4. 36 setTimeout('move_up()', 1);expandingMenu(0);expandingMenu(1);expandingMenu(2);expandingMenu(3);expandingMenu(4);expandingMenu(5);expandingMenu(6);expandingMenu(7);expandingMenu(8);expandingMenu(9);});
  5. 37// First we hide all exhibitis $("#menu ul li.section-title").nextAll().hide();
  6. 38
  7. 39// then the active exhibit is showed
  8. 40$("#menu ul").each(function()
  9. 41{
  10. 42$(this).find("li.active").prevAll().nextAll().show();
  11. 43});
  12. 44
  13. 45// This is the toggle function
  14. 46// first it hides all sections
  15. 47$("#menu ul li.section-title").click(function()
  16. 48{
  17. 49$("#menu ul li.section-title").nextAll().hide();
  18. 50$(this).nextAll().slideToggle("fast");
  19. 51});
  20. to index.php.
  21. Still no result. Can see the thing I'm doing wrong.
  22. Thanks very much!
  23. btw my website is <a href="http://www.paar.nl">Paar</a>
palermo007
NETHERLANDS
2010-02-01 20:44:17
Permalink Post
 

(now not in "code-mode" i hope)
Hi mmaattiillddaa

  1. I tried your solution, it doesn't work for me i'm afraid....
  2. added
  3. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  1. to expandingMenus.js, no result. After that I also added
  2. $(document).ready(function()
  3. 35{
  4. 36 setTimeout('move_up()', 1);expandingMenu(0);expandingMenu(1);expandingMenu(2);expandingMenu(3);expandingMenu(4);expandingMenu(5);expandingMenu(6);expandingMenu(7);expandingMenu(8);expandingMenu(9);});
  5. 37// First we hide all exhibitis $("#menu ul li.section-title").nextAll().hide();
  6. 38
  7. 39// then the active exhibit is showed
  8. 40$("#menu ul").each(function()
  9. 41{
  10. 42$(this).find("li.active").prevAll().nextAll().show();
  11. 43});
  12. 44
  13. 45// This is the toggle function
  14. 46// first it hides all sections
  15. 47$("#menu ul li.section-title").click(function()
  16. 48{
  17. 49$("#menu ul li.section-title").nextAll().hide();
  18. 50$(this).nextAll().slideToggle("fast");
  19. 51});

to index.php. Can see the thing I'm doing wrong?
Thanks very much!
btw my website is Paar

goss
GREECE
2010-02-10 14:23:02
Permalink Post
 

@ palermo
and anyone interested in collapsing any open section menu when another is clicked (and expanded). Note: This is a modification of
Ross Cairn's script.

  1. <strong>step 1</strong>
  2. As mmaattiillddaa said you add 
  3. var all = $("#menu ul").children().filter(function(){return $(this).attr("class") != "section-title";});
  4. right after
  5. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  6. <strong>step 2</strong> (that was missing)
  7. add
  8. all.hide(speed);
  9. right before
  10. items.show(speed);
  11. and
  12. items.hide(speed);

This seems to work fine at first, however if you test thoroughly you will find that if one opens and closes section menus, especially without clicking on exhibit links, every now and then previously menu will close but without the clicked one expanded - and you need to click a second time for that to happen.

  1. A quick workaround this is to replace the
  2. items.hide(speed);
  3. with
  4. items.show(speed);
  5. again, but this means you lose the ability to collapse the expanded menu on second click.

Also, with or without the workaround, this mod ignores the sections you might have left out of you index.php expandingMenu list - it will collapse those too if another section title is clicked.

Hopefully someone with more js knowledge than me will pick it up to solve these issues.
I'm still testing the site locally, hence no site link, hope you won't hold it against me.

verena
GERMANY
2010-02-11 13:39:50
Permalink Post
 

Hi,
I successfully installed Ross Cairns files (thanks a lot!) and got the collapsing menu to work.
Now I've gone through the whole thread, I tried Matildas and goss' code, because I would like to get this:

'if B is open and i click on C, B closes automatically?'

My js file now looks like this: did I get something wrong?

/*    Expanding Menus for Indexhibit
*        uses jquery
*
*    Created by Ross Cairns Mar 2008
*/

function expandingMenu(num) {
    var speed = 500;
    
    var item_title = $("#menu ul").eq(num).children(":first");
    var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
    
    
    # var all = $("#menu ul").children().filter(function(){return $(this).attr("class") != "section-title";});

    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

  1.     /* add click functions + pointer to title */
  2.     item_title.css({cursor:"pointer"}).toggle(
  3.         function () {
  4.             all.hide(speed);
  5.             items.show(speed);
  6.         }, function () {
  7.             items.hide(speed);
  8.         }
  9.     )
  10. }

I would really appreciate a helping hand, I've tried for hours now...

Thanks in advance
V.

Webpage

verena
GERMANY
2010-02-11 15:53:23
Permalink Post
 

Sorry for having this messy post above (I wanted the code to be shown as code but only worked partially).

To ask again: how do I achieve this:
if menu B is open and I click on menu C, menu B closes automatically.

In my menu, the previous menu isn't closing when I click an a new menu but only when I click on a menu item. And that's confusing sometime (because the menu gets bumpy).

I guess it's only a small thing I need to change, can anyone give me a hint, please?

Thanks a lot.
V.

realdavemoore
UNITED STATES
2010-02-12 03:36:04
Permalink Post
 

Hey all,
I used the rcairns tutorial, which was really easy to do, except that none of it worked. Can someone please take a look at my site and see if they see anything out of place?

Thank you so much, and I'll owe a beer to the one who fixes it.

http://www.therealdavemoore.com/

-DaveMoore

realdavemoore
UNITED STATES
2010-02-12 16:44:24
Permalink Post
 

Hello again,
rcairns helped me out. It works now. Thanks.

-DaveMoore

verena
GERMANY
2010-02-17 12:45:28
Permalink Post
 
Hi there,
for all those who had the same problem as I had with the accordeon effect on the collapsing menu (-> if menu B is open and I click on menu C, menu B closes automatically): I just used instead of ross' javascript file the one of lemathieu/thenine from this thread on page 3 (lemathieu:2009-11-07 10:49:41).
In this case don't forget to: upgrade your jquery to the last one (just download it from their site, rename it jquery.js and upload it to your server, replacing the existing one).
For the rest I followed ross' very helpful tutorial.
It works fine now.

example

jessjessjess
AUSTRALIA
2010-02-19 02:29:12
Permalink Post
 

what could i have done if when i move my mouse over a menu it automaticly drops down?

i just want to click it instead!

xmar
UNITED STATES
2010-02-25 02:25:53
Permalink Post
 

Hi Guys,
I've been going through the tutorial step by step and still can't seem to get the collapsible menus to work. I've thoroughly gone through the edits but I can't make it work.
It would be greatly appreciated if a second pair of eyes can check this out.
Thanks
xmar
Webpage

EightyEight
FINLAND
2010-02-27 12:13:50
Permalink Post
 

darn,
I just cant make it happpen so that the first menu doesn't open automatically. I think it is because my "home" exhibit under section "Info" is THE homepage, that cannot be deleted.
There was talk about this in this thread, and I know how to move the "home" to a new section which I can hide. But I want my Info-section to have an exhibition named "home" with a link to "www.homepage.com" i.e. to the real homepage which is hidden. I have succeeded only in making a page with a link to www.homepage.com/info/home which is not what i want.

Another issue is the separator which is visible only in the homepage, would be kinda cool if it was in every page. any tips?

Plz see my page HERE I hope smbdy could check what's up thanks.

chatdelicat
UNITED STATES
2010-03-01 23:16:17
Permalink Post
 

Question for @leMatthieu

Quote
"Just one detail, since I modified it when I put the cursor above the menu section it doesn't look like a link (little hand with pointing finger) anymore."
from
Elias
SWITZERLAND
2009-11-07 10:33:16

I am having the same problem.. where do I have to add?

#menu ul li.section-title { cursor: pointer; }

I've tried to add it on the style.css, expandablemenu.js etc.. but I cant get it to work. If anyone can give me some leads on this..I would really appreciate!

chatdelicat
UNITED STATES
2010-03-01 23:34:56
Permalink Post
 

ps: here's my Webpage
Thanks

chatdelicat
UNITED STATES
2010-03-01 23:58:50
Permalink Post
 

I figured it out! no worries..

verena
GERMANY
2010-03-05 12:37:36
Permalink Post
 

Hi there,
I just checked my website on Safari and found out that the collapsing menu isn't working there. On Firefox it's no problem.
Does anyone have an idea what's wrong??? I'd be very happy for any help.

Thanks in advance.

V.

Webpage

verena
GERMANY
2010-03-06 09:25:19
Permalink Post
 

Sorry, but still didn't solve it: does anyone know, why the collapsing menu doesn't work on safari? Did anyone else had this problem, too and got it to work?
Any help much appreciated.
Thanks.
V.

arsondpi A
GREECE
2010-03-06 09:28:35
Permalink Post
 

it works fine on my Safari.

verena
GERMANY
2010-03-06 09:49:18
Permalink Post
 

Thanks for checking! That's strange. On my Safari also the scaling doesn't work. Hope it works on other Safaris, too...

verena
GERMANY
2010-03-10 09:24:31
Permalink Post
 

Hi again,
I don't understand Safari. The expanding menu of my site is working now, except for the first section 'Poster'. The menu doesn't collapse but is the whole time open. Is there anything I can do about this? If someone knows, please tell me.

Thanks
V.

Webpage

Klara
SWEDEN
2010-03-18 12:37:09
Permalink Post
 

Hi everyone! I'm fixing my dads homepage; www.kristoffernilsson.se
I added the expanding menu as described in this post.. http://www.indexhibit.org/forum/thread/761/#post_5310

The "problem" is that I want the Sectiontitles to be normal and fixed. Only "Serier" should be expanded to show the names/pages of the different comic-strips he made.. is that possible?

I would love it to be expandible again aswell, though I've read it's over the top-difficult so I wait with that a bit.. ;)

Thank you all in advance!
klarabara

Klara
SWEDEN
2010-03-18 12:37:09
Permalink Post
 

Hi everyone! I'm fixing my dads homepage; www.kristoffernilsson.se
I added the expanding menu as described in this post.. http://www.indexhibit.org/forum/thread/761/#post_5310

The "problem" is that I want the Sectiontitles to be normal and fixed. Only "Serier" should be expanded to show the names/pages of the different comic-strips he made.. is that possible?

I would love it to be expandible again aswell, though I've read it's over the top-difficult so I wait with that a bit.. ;)

Thank you all in advance!
klarabara

lemathieu A
FRANCE
2010-03-18 12:53:03
Permalink Post
 

Make "serier" a section (i's for now an exhibition/project) for first.
Second is difficult.

Klara
SWEDEN
2010-03-18 13:14:16
Permalink Post
 

Im now trying to "fake it" haha
As you said I made Serier as a Section and also what I wanted to be the expandable one underneath as a section as well.. so i have "serier" that expands to various names and Skräddarsytt that is now expanding aswell, Perfect! Almost! Is there a way to make these feel "glued" together? As if Skräddarsytt is just a page under the section serier?
I have a feeling I'm getting into the area that says nono..but im giving it a shot anyway, holding my thumbs that this could be possible..

Showing 76 - 125 of 255 posts in Forum > Ideas > Tutorial: collapsable menu -Spanish