This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Horizontal Multi Level Drop Down Menu 2

I posted this same thing earlier, but apparently I did not post correctly and made a mess, so I'm posting a clean post now. I'm terribly sorry...

Hello. I am not that good or experienced with javascript or css and I am having troubles with making a horizontal multi level drop down menu navigation system. What I want to do is use a javascript rollover button (based on images) as my trigger for the vertical drop down menu. So, basically, you rollover the image button and the menu drops down from the image. In addition to this, I need to be able to set it up so that if a user rolls over one of the menu links, the link needs to spawn a new sub set of links beside it. I need the menu options to be able to be customizable. By this I mean that I need them to be able to be edited to have a particular color background and font color and then when they're rolled over, they can change color and/or font color.

Now I have a sample script that I have posted a link to below this text that can trigger a menu from the javascript rollover button. It's customizable and does everything I need it to do with the exception of giving me a sub set of links (no second level). I have tried working with other scripts that are a hybrid of CSS and javascript and uses HTML lists for the link menu levels, but it does not work with the javascript rollover button, which is essential to the design of the webpage.

My question is this: Is it possible to edit the code I've pasted below to be able to use a second level? If so, I would greatly appreciate any help I can get. If not, I would be open to any alternative scripts. But the scripts must be able to use the javascript button rollover images.

Here is the sample code for what I have right now (it's just one button):

http://www.stark4homes.com/new_page_3.htm

Browser: american_badass_4@hotmail.com,3

Re: Horizontal Multi Level Drop Down Menu 2

The script on your demo page came from DynamicDrive.com. To pick apart the code to make it multi-level would be a difficult tedious task, even for an experienced Javascript developer. But DynamicDrive also has a "Multi-Level Menu" subcategory, under their Menu section. Take a look at the one called HVMENU. It can be configured to work vertically or horizontally, and has the multi-level capability you require. A link to a demo is available on the "HVMENU" page.

Re: Horizontal Multi Level Drop Down Menu 2

Thank you for the quick response. I will take a look at the script and see if I can customize it to work the way I need it to and let you know.

Browser: american_badass_4@hotmail.com,3

Re: Horizontal Multi Level Drop Down Menu 2

Hey there Philo. I tried working with the HVMenu script you linked me up with and it would appear to be exactly what I need. However, I have encountered a problem. I tried light customization for one page to see if I could make it work and it worked, except for the fact that it was a vertical orientation rather than the horizontal that I need. Then I fully customized the .js file that I needed to work with after reading and following the directions that were given and tried putting it into a sample page and the menu refuses to show up. Would you be able to tell me what's wrong? Here are the links. I put them in HTML so that all you have to do is click. Hopefully it doesn't mess anything up.

First
Try_Partially Working



Second Try_Not showing


First Try Files
exmplmenu_var.js
menu_com.js

Second Try Files
exmplmenu_var.js
menu_com.js

HVMenu Link (should you need it)
Go to HVMenu

Browser: american_badass_4@hotmail.com,3

Re: Horizontal Multi Level Drop Down Menu 2

The first line of code in the Javascript file named "exmplmenu_var.js" is incorrect. The line reads as follows and defines the number of first level items in your menus.

var NoOffFirstLineMenus=5; // Number of first level items

You only have four first level items in your menu. This is causing the Javascript to bail out trying to find the fifth menu entry. Change it to the following and it will magically appear.

var NoOffFirstLineMenus=4; // Number of first level items

Re: Horizontal Multi Level Drop Down Menu 2

Ha! Of course it would be that simple. When you can't figure something out, it's always some small detail that you over looked! Thanks for that!

I have one last question. I have the script working, but I was wondering if there's any way that I can make it so I get the white border around the trigger images to go away, but leave the white border on the sub menu options? I've tried a couple of things. I've tried leaving the var BorderColor section blank (var BorderColor=' ') and the var BorderSubColor as white, but it just assigned a white border to everything anyway. I tried putting in the words transparent and null to see if that would do anything and it didn't. It just gave me an error message. I don't know if there's a color code out there that can make a color invisible or not. Any ideas as to how I can get rid of the border on the trigger images and leave it on the sub menu options?


Here is the working page

Browser: american_badass_4@hotmail.com,3

Re: Horizontal Multi Level Drop Down Menu 2

It was a little difficult at first seeing what was going on, some of what you want is possible. I say "some of what you want" because if you remove the border around the main menu items, you remove it from the dropdown items as well. Probably, with a lot more work, that could be done. You would need to define another variable for the dropdown item borders, and then separate the top menu creation code from the dropdown code, and substitute the new variable. But the gain is really not worth the time and effort.

Simply setting BorderWidth and BorderBtwnElmnts to zero, is not sufficient. It does remove the border added by the Javascript, but not the borders that are built into your images. If you open up the images you use on the top of the menu, in a graphic editor, you will see that some have white borders on the left, right, or both. If you eliminate these borders, and set BorderWidth and BorderBtwnElmnts to zero, the boarders to the left, top, and between the elements are removed. But it still leaves some bordering on the far right and at the bottom. To remove those borders, you need to stretch the images just a little. In your menu definition for the top level items, the height and width of the image is defined. An example is below.

Menu1=new Array("rollover:........","#","",3,20,117);

To remove the bottom border you need to stretch the image vertically a couple of pixels. This really isn't noticeable in the page. Again, and example is below. Do this for all the main menu entries.

Menu1=new Array("rollover:........","#","",3,22,117);

But this still a little bit of a border on the right. This takes a few more pixels, in the horizontal direction, to get rid of the border. The example below shows a stretching of the image by 5 pixels. This is a little more noticeable then the vertical stretching, but not much.

Menu4=new Array("rollover:........","#","",2,22,146);

You also mentioned transparency. You wouldn't set the transparency from the Javascript or HTML. Browsers don't fully understand that yet. However, GIF images have a transparency capability. Usually you set this in a graphic editor by making a solid color background for the image, and then declaring that color to be the transparent color. Really, it's a lot easier to do than it is to explain. But it's only a guess as to whether that would work.

Re: Horizontal Multi Level Drop Down Menu 2

Thanks a million for all your help. Learning how to work with this menu will be helpful not only for this project, but for future projects as well. So, I really appreciate the help.

I looked over your response and played with the code in the .js file a little bit, but I have decided that it's really too much work for not enough payoff to try and get the borders on the sub menu. Without the borders on the sub menu, it looks a little dull, but I really can't compromise the design by having the borders around the trigger images as that's not how I designed the layout. I just thought of a solution for the problem. I could go in and make rollover images for all the sub menu options, but that would take just too much time to do. This navigation system was originally designed for a single menu drop down, but then my client added more content which required a more complex system. So, the change kind of screwed things up, but what can you do I guess.

Thanks so much for your help!

Browser: american_badass_4@hotmail.com,3