Expanding menu - help please!

rb / 2010-02-09 21:34:35   

like this one http://antonmircea.com/

lemathieu A / 2010-02-09 21:49:25   

You could just style a link to your home (in prenav after your logo) as a section title, and hide the home/main from your menu.

Btw, he don't use the same script for the expanding thing…

jessedittmar / 2010-06-15 17:34:20   

Is it possible to have the first expanding menu to be open by default when someone enters the page?

link here: www.jessedittmar.com/potw/

ulkor / 2010-08-11 07:44:53   

Hi ,
I'm using the nine's script for expandable menu and I m trying to change the color of the active menu title

I tried something like this and it doesnt work :
#menu ul li.section-title:ACTIVE {color:#000;}

here is a link : alwaysflightfirst.webege.com

I've searched in the forum but didn't find anything about it.

Any help would be very much appreciated

lemathieu A / 2010-08-11 09:44:42   

your #menu ul li:active is working fine for me (black).
You want show the active section ?

lemathieu A / 2010-08-11 09:44:55   

edit : double bubble

arsondpi / 2010-08-11 09:45:32   

who's double clicking? huh? :-P

lemathieu A / 2010-08-11 09:48:46   

;)

ulkor / 2010-08-11 10:04:16   

@lemathieu je répond en français car j'ai un peu de mal avec l'anglais ;)

c'est bien le titre du menu que je voudrais voir en noir lorsque je suis dans une section. Par ex, si je suis dans portfolio 1 dans éditorial, je voidrais que le EDITORIAL soit en noir aussi ( et le reste tant que je n'ai pas quitté la page. )

Merci pour ton aide

lemathieu A / 2010-08-11 12:51:53   

I really don't know how to add an active section, might be in the js…

Somebody ?

aricobean / 2010-10-26 21:32:02   

does anyone know how to add an active section to the js??? I would love the active section to stay highlighted when open. I have been searching how to edit the js but I can't figure it out.

mario / 2010-11-02 10:08:56   

Hi people,

I've tried to insert arrow-like images on active sections of the menu using jquery.
The issue is that I can manage to change arrow image to a different state (collapsed - not collapsed), but I cannot make it work just in the active section I'm clicking, it changes image on every section of the menu (active and no active as well).

Here's the code I'm using:

Jquery:

$(document).ready(function(){

var items = $("#menu ul li.section-title").siblings();

// on load hide all, then show active
items.hide();
$(this).find("#menu ul li.active").siblings().siblings().show();
// add pointer to title, on click hide all, show clicked menu-items if they were hidden before
$("#menu ul li.section-title").css({cursor:"pointer"}).click(function() {
var viewable = $(this).next().css("display");
items.hide();
if (viewable == 'none')
$(this).siblings().show();
$(".section-title").toggleClass("section-titleb");
});
});

CSS:

#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;
    font-style:italic;
}

#menu ul li {
    display:block;
    margin-bottom: 2px;
    
}

#menu ul li.section-title {
    width:175px;
    font-size:14px;
    border-bottom:1px solid #000000;
    margin-bottom:6px;
    font-style:normal;
    background-image:url(plegado.gif);
    background-repeat: no-repeat;
    background-position: right;
}

#menu ul li.section-titleb {
    width:175px;
    font-size:14px;
    border-bottom:1px solid #000000;
    margin-bottom:6px;
    font-style:normal;
    background-image:url(desplegado.gif);
    background-repeat: no-repeat;
    background-position: right;
}

As you can see, I'm using nine's script with the latest jquery version.

I'm trying to change image only in the section title I'm clicking, while the rest should'nt be changing.

Any help would be very useful. Thank you in advance.

mario / 2010-11-02 10:09:19   

Hi people,

I've tried to insert arrow-like images on active sections of the menu using jquery.
The issue is that I can manage to change arrow image to a different state (collapsed - not collapsed), but I cannot make it work just in the active section I'm clicking, it changes image on every section of the menu (active and no active as well).

Here's the code I'm using:

Jquery:

$(document).ready(function(){

var items = $("#menu ul li.section-title").siblings();

// on load hide all, then show active
items.hide();
$(this).find("#menu ul li.active").siblings().siblings().show();
// add pointer to title, on click hide all, show clicked menu-items if they were hidden before
$("#menu ul li.section-title").css({cursor:"pointer"}).click(function() {
var viewable = $(this).next().css("display");
items.hide();
if (viewable == 'none')
$(this).siblings().show();
$(".section-title").toggleClass("section-titleb");
});
});

CSS:

#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;
    font-style:italic;
}

#menu ul li {
    display:block;
    margin-bottom: 2px;
    
}

#menu ul li.section-title {
    width:175px;
    font-size:14px;
    border-bottom:1px solid #000000;
    margin-bottom:6px;
    font-style:normal;
    background-image:url(plegado.gif);
    background-repeat: no-repeat;
    background-position: right;
}

#menu ul li.section-titleb {
    width:175px;
    font-size:14px;
    border-bottom:1px solid #000000;
    margin-bottom:6px;
    font-style:normal;
    background-image:url(desplegado.gif);
    background-repeat: no-repeat;
    background-position: right;
}

As you can see, I'm using nine's script with the latest jquery version.

I'm trying to change image only in the section title I'm clicking, while the rest should'nt be changing.

Any help would be very useful. Thank you in advance.

kaivandave / 2010-11-04 02:38:11   

can you guys help me with my problem?

Vaska A / 2010-11-04 09:53:50   

People can help if you ask a proper question. Please read the forum rules, thanks.

Yes, us guys can help (to answer the question but it's not really the right question).

elquango / 2011-05-30 15:30:32   

i have 4 sections that expand on my menu could anyone tell me how i get rid of the large gap in between each line please?

http://www.elquango.co.uk/

im not sure where to look in my file to get rid of the line break. thanks

rickykappa / 2011-05-31 07:56:00   

in your style.css you have:

#menu ul li.section-title {
line-height: 15pt;
    color: white;
font-size: 8pt;
}

as a first step I'd remove the line-height value: rather useless for a single line item, and add a padding or margin instead for further tuning - i.e.
#menu ul li.section-title {
padding: 2px 0 2px 0;
    color: white;
font-size: 8pt;
}
see if that's working
;-)

This thread has been closed, thank you.