DropDown menu in every page; how to do that?

DropDown menu in every page; how to do that?

by Fabio Serenelli -
Number of replies: 10
Hi,
I saw the very nice customizations on these sites:
 and I noticed the great horizontal dropdown menu they use.

So I applied the same solution (with a different css menu) on this site:

www.amism-fism.org/moodle2

And I inserted css and html code in the header.html file

I'm using the "mooxp" theme on a 1.8.2 Moodle.

Everything works well exept the css menu that appears only on the home page and not int the courses.

How is it possible to let it appear in every page [like on the automotive site]?
where have I to put the code to make the menu visible also on course page?


I hope You may help me!

Thanks very much for your advices,

fabio

smile

(Edited by Helen Foster - site link removed by request of owner - original submission Sunday, 21 October 2007, 01:10 PM)

Average of ratings: -
In reply to Fabio Serenelli

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Julian Ridden -

Thanks for the feedback. I built both those sites some time back. Good to see they still get around smile

This is probably due to the fact you have put your code within the " if heading" statement.

if ($home) { // This is what gets printed on the home page only
?>
anything written here will only show on the homepage
<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>
 anything written here will only show on pages other than the homepage
<?php } ?>


The code above, typical in most themes, allow for content to be on the home page (contained within the if ($home) statement) or on the rest of the pages (within the else if ($heading) statement)

So you can either put your menu outside that statement if your design allows it, or duplicate the code so it appears in both.

Hope that helps.

Average of ratings: -
In reply to Julian Ridden

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Fabio Serenelli -
Hi Julian, thanks very much for your fast answer!

I tried what you suggested me: I copyed the same css/html/javascript afte this tag:

<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>


and..it is possible to see the menu in other pages but...It's a bit frustrating...(maybe because I'm note a coder) the menu does not work well [background disappear and things like this]:-\

I'll try to modify it and to make it runnning properly.

Thanks very much for your answer!

smile
fabio
Average of ratings: -
In reply to Fabio Serenelli

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Stuart Anderson -
Your site looks really good faBio. I thought you might be interested to look at an alternative dropdown menu implementation. From what I can make out, this one is the defacto standard to use as it is extremely light-weight, very accessibly, and very cross-browser compatible with only IE6 needing a tiny bit of javascript to make it work. The implementation is called "son of suckerfish". The example in the link below won't give you all the styling you want, but it gives you the important bits to get the menus to work. See:

http://www.htmldog.com/articles/suckerfish/dropdowns/

--Stuart.
Average of ratings: -
In reply to Stuart Anderson

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Fabio Serenelli -
HI Stuart,
I saw that menu but it was a little bit complex for my coding knowledge...
so I tried this one :

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

and work great with IE and FIrefox!
tell me what do you think about it smile


fabio
Average of ratings: -
In reply to Fabio Serenelli

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Stuart Anderson -
Hi Fabio,

I think that the link I sent you does require a little knowledge of CSS and HTML, but it is very accessible. The beauty of the implementation I sent you is that to a screen reader the menu will seem to be just a list of links, where as the dynamic drive one is entirely javascript driven and not accessible at all. The down side to the one I sent you is that there will be extra HTML markup to describe the structure of the menu in every page where the menu features, whereas the dynamic drive one hides away the menu structure in a single script. This isn't really a major problem if your menu will appear in the header because you only need to put the menu in the one header.html file of your theme anyway.
I would say that if accessibility is important to you, try to work on the information I sent you, if not, stick to the easier dynamic drive implementation.
Good luck!

--Stuart.
Average of ratings: -
In reply to Stuart Anderson

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Sharming Wang -

Hi Stuart,

Thanks very much for posting the son of suckerfish link, I have tried to implement it to my site and it works for the number of web browsers I've tested including IE6. I did add an extra few css lines to ensure all the tabs are staying in one single horizontal line in IE6.

Free Image Hosting

Now I have a question, the mouse hover effect is set by the css background-color attribute :

#nav li:hover, #nav li.sfhover {
 background: #BFDFFE; /*shade color*/
}

Would I be able to use a background image instead? I have tried to use background image but it just wouldn't show up :

background: url(pix/blockheader.gif) repeat-x;

I'm only a beginner so I don't know what I may have missed, I'll really appreciate it if you may give me your thoughts on this.

----Sharming

Average of ratings: -
In reply to Sharming Wang

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Stuart Anderson -
Hi Sharming,

Strange, I seemed to be able to apply a background image without any problems so I know it is possible. If you zip up your theme I would be happy to take a look at your code for you.

--Stuart.
Average of ratings: -
In reply to Stuart Anderson

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Sharming Wang -
Thank you so much Stuart, the theme folder is too big so I only attached  the header, i  can email you the theme folder if you wish. Anyway, thanks! smile
Average of ratings: -
In reply to Sharming Wang

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Stuart Anderson -

Hi Sharming,

You've taken a slightly different approach to this than I did as you have put all your css and javascript directly into the header of each page. This is fine, though as it will only effect the home page so the benefits of abstracting this away to any imported css and javascript files aren't great.

To solve your problem, you need to use a tiny bit of php to make sure that the path to the image file is written out correctly in your css:
background:url(<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/blockheader.gif) repeat-x;

The <?php echo $CFG->themewww .'/'. current_theme() ?> bit dynamically writes out the path to the current theme which is necessary in this case.

Took me a while to pick up on this, but problem solved at last!

--Stuart.


Average of ratings: -
In reply to Stuart Anderson

Re: DropDown menu in every page; how to do that?if ($home) { // This is what gets printed on the home page only

by Sharming Wang -

Hi Stuart,

Thanks a lot for spotting that for me, I changed it and it worked. And I took your advice, I've created a new css file for the dropdown menu, now I don't have to use php code to point the path anymore. Thanks Stuart!big grinbig grin

Sharming

Average of ratings: -