Indexhibit Support

I've changed the traditional indexhibit menu for a drop down menu like on this thread.

I'm pretty happy by the final result but would like to more customize the drop down menu.
Does somebody know how I could change the style of the sections ? I don't like the bold/italic style, I tried to fix it with CSS, but nothing works.
I am also not able to change the width.

I have searched a lot on the internet and found nothing apart from other way, like expanding menus.

Thanks for your help, here is my website.

Unfortunately this style of 'drop down' is actually component based, and is rendered entirely by the browser.

You cannot change the way the items display, and in fact, they will display different on other operating systems/browsers.

This is the downside to using the select element.

simplestick is right - nevertheless you can use javascript to further style the select drop menu. Search the web with keywords select menu form css jquery and form css jquery. I found lots of jquery plugins that allow you do this.

Thank you arsondpi, I found this tutorialtutorial, and modified it to fit with what I wanted.

But I'm on Mac and don't know how it is in other OS and IE...

Critiques are welcome.

Does someone coud check on Windows how my website works ?
The pull down menu in particular.
Thanks a lot.

looks good, including the customized drop down.

(On Mac) looks really good.
I like it.

love it on windows XP, Mozilla 3.5 and IE 8.
_

hi sylvainman, nice work, but there's a problem on my XP, FF 3.0.1, I guess related to screen size: 1024x768.
The drop down goes out of the screen e.g. I can read 'till "singles" but loose all what comes after. In facts I can't email you a screenshot 'cause I can't get your contact address anywhere...
IMHO to avoid such a problem you could raise a bit the menu to the top.
also I can't see any left padding of the options, don't now if that's your decision or just another cross-browser problem

Thank you everybody. I'm happy to see it works.

@ricky with this new menu, my info have disappeared (and the link to indexhibit too), I have to work on that.
For the padding it is a choice, but there is some fine tuning to do.
And yes you're right there is a problem in the menu if the screen is too small. I'm going to work on that.
Grazie !

I decided to rebegin completely my code menu. I want something cleaner.
I used the uni_index plugin to replace the traditional menu by a "select" menu. Then I wanted to customize it a bit and added a script to transform it in a jquery drop down menu...
I think it will be better to transform directly the traditional menu in a jquery drop-down menu. Right ?

I made a plugin menu_select to edit it and transfer it easily. I have something but... my knowledge in programming is limited to copy and paste...
So I need your help to finish this incredible project (for me).

Here is the first menu I made on my website.
And here is the beta one (it is a test page, so the design is not exactly the same).

And here are my questions :

1/ I don't understand why, the menu is in chronological order. I've changed it in the CMS but nothing change. If I change theme it works...

2/ I would like to be able to close the menu by a click everywhere in the page, not only on the button.
I've looked for information in jquery ressources but I'm lost. Here is the code :

1. $(document).ready(function () {

1. $('div.menu_head').click(function () {
2. $('div.menu_body').toggle();
3. });

1. $('div.menu_head').hover(function(){
2.    $(this).addClass("menu_headhover");
3.  },function(){
4.    $(this).removeClass("menu_headhover");
5.  });

1. });

3/ I would like to highlight lines in the menu. I found there's no class for theses lines, and I don't know how to add one or to do it without...

4/ Is it possible to have the active section in the head of the menu (instead of "select an exhibition") ?

5/ And the last, when the browser screen is too little we can't see all the information in the menu. How can I do to have a scroll bar in this case ?

I hope I gave all informations needed. Thanks a lot for your help.

F***k How do you use this code tag ?

1) maybe it's the actual way this theme works - maybe you need to change it to sectional order.

F***k How do you use this code tag ?

text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah
paragraph gap
<code>
All
the
code
goes
here
Don't leave any paragraph gaps inbetween - it breaks the code.
</code>
paragraph gap
text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah text blah blah blah

3) Not sure what you mean - you can add

1. $(document).ready(function()
2. {
3. $('.menu_body li:eq(5)').css('background', 'red');
4. });

to affect each list item seperately. In this example I set a red background to the fifth list item.

4) Search the words: "Select an exhibition" in your plugin and edit accordingly... Lots of ways to edit this depending on your skills.

5) Use the intelligent positioning from your tutorial...

Arsondpi, thank you for your reply.

1/ I tried to change it for a sectional order, but it doesn't work. It is weird because it works locally...

3/ I wasn't clear. I want to highlight lines when the mouse is over them.

4/ I know I have to edit "select exhibition", the problem is I don't know how.

5/ I think I found the place in js where it says to reposition the window, but same problem... how to take advantage of it ?

1. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†//decide if to place the new list above or below the drop-down
2. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†function newUlPos(){
3. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†var containerPosY = $containerDiv.offset().top,
4. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†docHeight = jQuery(window).height(),
5. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†scrollTop = jQuery(window).scrollTop();

                    //if height of list is greater then max height, set list height to max height value
                    if (newUlHeight > parseInt(opts.ddMaxHeight)) {
                        newUlHeight = parseInt(opts.ddMaxHeight);
                    }    

                containerPosY = containerPosY-scrollTop;
                if (containerPosY+newUlHeight >= docHeight){
                    $newUl.css({top: '-'+newUlHeight+'px', height: newUlHeight});
                    $input.onTop = true;
                } else {
                    $newUl.css({top: containerHeight+'px', height: newUlHeight});
                    $input.onTop = false;
                }
            }

Rhhhhhaaaa ! My code was almost nice.

3/ .menu_body ul li:hover { background: yellow; }
Maybe if Vaska or LelieOA will see this... dunno...

Thank you again arondpi, I had already tried your solution but that creates a highlight for every line even not click-able ones.
I think I'm going to abandon, it is a too big project for me.
It's a shame I was motivated.