Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Expanding menu - help please!

 

Indexhibit version: Legacy
Thread is not resolved.

elliethompson
UNITED KINGDOM
7 year(s) ago
Permalink Post

Hello,

I know there have been various posts on this topic - and I have read through them BUT I am still having problems trying to customise my expanding menu. (http://www.elliethompson.co.uk)

Basically what I want is for the menu to only expand one section at a time, so for instance if 'Print' is open, and you click 'websites', then the print menu will close and then the website menu will open.

I have seen another thread that uses the following code:

$(document).ready(function()
{
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});

});

BUT i cant seem to get this to work - I have been trying to place it into my index.php file. I would be really greatful if someone could give me some advice. And sorry if I am repeating topics, but im getting quite desperate now!

thanks.

mikkel
UNITED STATES
7 year(s) ago
Permalink Post

i just made the same thing but with this javascript

and then i added

  1. cursor: pointer; to the 
  1. #menu ul li.section-title {

in my style.css

mikkel
UNITED STATES
7 year(s) ago
Permalink Post

wow that wasnt right. my post should look like this:

i just made the same thing but with this javascript

and then i added:

  1. cursor: pointer;

to the

  1. #menu ul li.section-title {

-part of my style.css

elliethompson
UNITED KINGDOM
7 year(s) ago
Permalink Post

Hello,

Thanks for your help... I have tried that, however it seems to not be working for me (see http://www.elliethompson.co.uk). Perhaps i'm not doing it quite right. If you could advise that would be great, otherwise I may have to abandon it!

Many thanks

divisions
KOREA SOUT
7 year(s) ago
Permalink Post

have you tried the Cairns script? though, i'm not sure if that is what you are looking for, but it is quite easy to implement...

  1. /*¬†¬†¬†¬†Expanding Menus for Indexhibit
  2.  *¬†¬†¬†¬†¬†¬†¬†¬†uses jquery
  3.  *
  4.  *¬†¬†¬†¬†Created by Ross Cairns  Mar 2008
  5. */

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; });
    
    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

    /* add click functions + pointer to title */
    item_title.css({cursor:"pointer"}).toggle(
        function () {
            items.show(speed);
        }, function () {
            items.hide(speed);
        }
    )
}

Then in your index.php file add, depending on the number of secions...

  1. <script type='text/javascript'>
  2. path = '<%baseurl%>/files/gimgs/';

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

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

@ellie :
in your index.php, you made a mistake.

  1. behind these lines
  2. < script type='text/javascript'>
  3. path = 'http://www.hmplus.net/files/gimgs/';

you already "call" the script (that's good)

  1. <script type='text/javascript' src='http://www.elliethompson.co.uk/ndxz-studio/site/js/expandingMenus.js'></script>

but (the misunderstood is here) you implement the script at the place of this

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

so remove this

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis 
  4. $("#menu ul li.section-title").nextAll().hide();
  5. // then the active exhibit is showed
  6. $("#menu ul").each(function()
  7. {
  8. $(this).find("li.active").prevAll().nextAll().show();
  9. });

and put what I wrote above.

And come back here to say what's happening.

elliethompson
UNITED KINGDOM
7 year(s) ago
Permalink Post

@divisions

thanks for that - That was the cose I was using originally, but wanted only 1 section to open at a time (with this code you can open all the sections if you dont click them again to make them close).

Thanks

elliethompson
UNITED KINGDOM
7 year(s) ago
Permalink Post

@lemathieu

I tried to follow your instrustions and still couldnt make it work - thanks for your help though. I have now reverted the script to the original one (where all sections can open), as at least this is nearly what I want to happen!

I appreciate your help, thanks.

gbodziak
UNITED STATES
7 year(s) ago
Permalink Post

Lemathieu, I tried to follow your instructions to but I can't make it work, I also want only one section to expand and then when I click on the next one the first one is closing.
any idea?

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

Didi you use the nine's script (get it here) ?

If you use it (as I do), you may upgrade your jquery to the last version : open yours and copy-paste the one you will find at jquery home.
But be aware that some exhibition formats won't work anymore (slideshow).

Jasi
UNITED STATES
7 year(s) ago
Permalink Post

I'm trying to implement Ross's expanding menu's and it doesn't seem to work....:?
http://www.etaudst.org/home
Any help please

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

you have 2

  1. });

after

  1. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  2. ¬†¬†¬†¬†expandingMenu(0); 
  3.     expandingMenu(1);
  4.     expandingMenu(2);
  5.     expandingMenu(3);
  6.     expandingMenu(4);
  7.     expandingMenu(5);
moss
GERMANY
7 year(s) ago
Permalink Post

Hello,

I have a quick Q maybe someone can answer. I can't crack it. I have my menu now aligned to the right but now the vertical accordion motion has been replaced with the list flying in from the left? how can i change this? Is that even possible?

many thanks!

m

Vaska A
UNITED STATES
7 year(s) ago
Permalink Post

Link?

moss
GERMANY
7 year(s) ago
Permalink Post

my bad sorry

www.mauriceredmond.com

Vaska A
UNITED STATES
7 year(s) ago
Permalink Post

Ok, bare with my answer here...

First off, the problem here lies with Jquery. I believe that if you had a newer version it will not come from the left.

It might also be the speed...but setting it to a faster speed besides zero won't solve it with this version of Jquery.

If you upgrade to a newer version of Jquery some exhibition formats might not work - I believe Slideshow won't work anymore.

So...you can see it's a bit of a pickle here...

moss
GERMANY
7 year(s) ago
Permalink Post

thanks vaska.

I actually updated my jquery the other day to 1.2.6 to solve an issue with the djuve plugin.. i am not using slideshow now anyway.

not to worry. i just upped the speed to 100, which is will do.

i can't wait to get my paws on this new version of indexhibit :D

thanks as always.

mosss

moss
GERMANY
7 year(s) ago
Permalink Post

hmm just check and the latest version is in fact 1.3.2. still doesn't resolve it. Oh well can't have everything.

Vaska A
UNITED STATES
7 year(s) ago
Permalink Post

With 1.3.2 maybe you need a shift + refresh before it will work?

I'll show you soon Maurice...need a little time before I put it online.

;)

scaaarvelis
UNITED STATES
7 year(s) ago
Permalink Post

hi im a beginner at this so bear with me. where do i put all of the expand scripting. in the style css file or in my index php file?

thnx

arsondpi
GREECE
7 year(s) ago
Permalink Post

Hey...
Did you try the search box on the right? There's buzillions (!) of threads for the expanding menu... Try keywords like expanding menu and ross cairns...

beam
UNITED KINGDOM
7 year(s) ago
Permalink Post

Hi, I would like to use the close function implemented in the nine script mentioned above. But with the menu expanding and closing on hover.

So when one section title is active the other closes etc.

I'am using the most recent jquery.

http://present-london.com/

my Js code

Its almost there.

Any help appreciated.

Thanks,

beam
UNITED KINGDOM
7 year(s) ago
Permalink Post

Double post, but i got what i was after from the nine script.

I just deleted the .show() from the active exhibit line and added .hover to the toggle function.

if thats not clear, you can see my js file in the link above.

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis 
  4. $("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").hover(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});
    
});

Audreys
GERMANY
7 year(s) ago
Permalink Post

Hi,

I really tried everything since 7 days to customize my menu to expanding. So I can´t tell you what is the status now.
Now I am so confuse. Can someone help me please!?
It is this side:
www.studio-sima.de

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

as I said you previously, I don't see anything connected to the "expanding menu" in your source code : no javascript called, nothing after setTimeout('move_up()', 1);

and you can't do it with the eatock template. switch to advanced mode and choose the sample theme.
then make the changes needed to have the expanding menu in site/sample/style.css and index.html

Audreys
GERMANY
7 year(s) ago
Permalink Post

Hi lemathieu,

I am totally confused.
Which code I have to connect to "expanding menu". I got the js expandingMenus.js.
I think one of these many PHP codes. But which one?
And can you tell me extactly which part of the code I have to change into?

Here is my site/sample/style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: ; }

#menu {
width: 220px;
overflow: auto;
top: 0;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

#menu ul li.branding { cursor: pointer; }

#content {
height: 100%;
margin: 0 0 0 220px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

But Sorry, I am an amateur. - Where is the index.html?

www.studio-sima.de

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

ok, you switched to the sample theme…

after that, look at this thread.

Audreys
GERMANY
7 year(s) ago
Permalink Post

Hi lemathieu,

the thing with eatock I understood now.
I read and read thousand times the forum.
Now it sounds clear.
But it doesn´t work.
Can you have a look again?
http://www.studio-sima.de/indexhibit/indexhibitv070e/

this is my
indexhibitv070e\ndxz-studio\site\js
expandingMenus.js

1. function expandingMenu(num) {
2. var speed = 200;
3.
4. var item_title = $("#menu ul").eq(num).children(":first");
5. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
6. /* hide items if not active */
7. if (items.is(".active") == false) {
8. items.hide();
9. }
10. /* add click functions + pointer to title */
11. item_title.css({cursor:"pointer"}).toggle(
12. function () {
13. items.fadeIn(speed);
14. }, function () {
15. items.fadeOut(speed);
16. }
17. )
18. }

Should I change something? Names or Numbers?

Audreys
GERMANY
7 year(s) ago
Permalink Post

And this my style.css

/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 9px;
    font-family: Georgia, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: none; }

#menu {
width: 220px;
overflow: auto;
top: 20;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});

#content {
height: 100%;
margin: 0 0 0 220px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

lemathieu A
FRANCE
7 year(s) ago
Permalink Post

no. Go there and copy paste all the content of this page in your expandingMenus.js

you have to (as well) erase all the javascript lines in your css

  1. $("#menu ul li.section-title").nextAll().hide();
  2. // then the active exhibit is showed
  3. $("#menu ul").each(function()
  4. {
  5. $(this).find("li.active").prevAll().nextAll().show();
  6. });
  7. // This is the toggle function
  8. // first it hides all sections
  9. $("#menu ul li.section-title").click(function()
  10. {
  11. $("#menu ul li.section-title").nextAll().hide();
  12. $(this).nextAll().slideToggle("fast");
  13. });
Audreys
GERMANY
7 year(s) ago
Permalink Post

Yes! I got it!
Thanx.

One small thing I have to solve.
Is it possible to change the position of text and images.
I want the text underneath the image.

krvl
GERMANY
7 year(s) ago
Permalink Post

Hey out there,

though trying like crazy, I can´t get my expanding menu running. Tried Ross Cairns' read a lot of threads but still no way out in sight. Any hints welcom!

http://www.fkarch.de

arsondpi
GREECE
7 year(s) ago
Permalink Post

...it's one of these mistakes that are annoying - you typed:

  1. expandingMenu(O);

in which you have 0 (the letter) instead of 0 (the number)...
You can spot these things easily with firebug - a plugin for firefox...

krvl
GERMANY
7 year(s) ago
Permalink Post

That easy..it is working already. Thanks a lot - happy new year!

rb
UNITED STATES
6 year(s) ago
Permalink Post

hello,

i really tried it, but i don't get it.
i copyed this: http://www.rosscairns.com/downloads/expandingMenus.js
to my expandingMenues.js and i think, i don't have any javascript lines in my style.css.
but it don't work.

can please someone have a look in what mistake i did.?

thanks

www.heyfiete.com

this is my style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: none; }

#menu {
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

#menu ul li.section-title { }

#content {
height: 100%;
margin: 0 0 0 215px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

rb
UNITED STATES
6 year(s) ago
Permalink Post

oh sorry, my problem:

what I want is for the menu to only expand one section at a time, so for instance if 'Mercedes-Benz' is open, and you click 'Fujitsu Siemens', then the Mercedes menu will close and then the Fujitsu menu will open.

arsondpi
GREECE
6 year(s) ago
Permalink Post

search the forum for the nine script...

rb
UNITED STATES
6 year(s) ago
Permalink Post

i did,

but if i use the nine script in this way:

$(document).ready(function()
{
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();
// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").hover(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});

});

i have the problem that every menu point is open and i can't close it.

i thought i have to use this one:

/*    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; });
    
    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

    /* add click functions + pointer to title */
    item_title.css({cursor:"pointer"}).toggle(
        function () {
            items.show(speed);
        }, function () {
            items.hide(speed);
        }
    )
}

but that's false.
i don't know what to change.

arsondpi
GREECE
6 year(s) ago
Permalink Post

I wouldn't know... I can't go through large amounts of code, sorry.

One thing to note is that the nine-script works only with jquery 1.3.2 (and above) and the Ross Cairns script works with Jquery 1.1.2 (and above)

rb
UNITED STATES
6 year(s) ago
Permalink Post

sorry for this.

i tried something and now it works. i think.
but there is still one big problem: every menue point which is on the first place can not be closed.
why is this so?

www.heyfiete.com

rb
UNITED STATES
6 year(s) ago
Permalink Post

another problem is, that everytime one of the menue points (the one i opened al last) is open.
i tried so much in the expMenu but i don't know what to write in that ll menue points are closed.

has anybody an idea?

arsondpi
GREECE
6 year(s) ago
Permalink Post

...the answer to your first question might be that the main/home page is in the first section.

By default the section an active exhibit (the exhibit you see on screen) will stay open.

Move it to another section with a hidden section title and set Hide Page from Index to Off.

The second question I don't understand, sorry...

rb
UNITED STATES
6 year(s) ago
Permalink Post

i think the main/home page is, as you can see, the section "über mich".
i moved it to another section but i can't set it to OFF.
i do, but it's still there.

it's the only section with no "delete" button.

do you have another idea?

www.heyfiete.com

arsondpi
GREECE
6 year(s) ago
Permalink Post

Validate your page...

You have an extra ending head tag within your body unclosed tags
Fix them and it will work!

rb
UNITED STATES
6 year(s) ago
Permalink Post

i don't know if i really understand:

should i go to the style.css or the index.php?

arsondpi
GREECE
6 year(s) ago
Permalink Post

start from the pre-nav area...

rb
UNITED STATES
6 year(s) ago
Permalink Post

thanks a lot!!!

i got it!

rb
UNITED STATES
6 year(s) ago
Permalink Post

it's me again,

another point which makes me going crazy:

if i click to "Softis" the menue opens, but i cant't close it so that at a time all menue points are closed. one of them is everytime open.

sorry for posting this, but my english isn't that good so the best way to understand:

$(document).ready(function()
{
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();
// then the active exhibit is showed
$("#menu ul").each(function()
                        
{
$(this).find("li.active").prevAll().nextAll().show();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide(500).animate({easing:"linear"});
$(this).nextAll().slideToggle(500);
});
});

i know i have to change something in this code, but i don't know where and what.
can you please help me a last time:)

lemathieu A
FRANCE
6 year(s) ago
Permalink Post

It's because it works like that… same reason that for the "active" section open.

You know, we always love perfect things, but be conscious that your visitors won't see this little stuffs… Don't stay focused on micro bugs.

Nothing is perfect in life !
;)

rb
UNITED STATES
6 year(s) ago
Permalink Post

you are so right:)

but i'm addictet to perfection:)
and i saw on another page that it can be done...

Showing 1 - 50 of 67 posts in Forum » Customize » Expanding menu - help please!
 

This thread has been closed, thank you.