Splitting a horizontal submenu in 2 rows?

[4viggo]

I'm testing a horizantal menu with a horizantal submenu.
The horizontal submenu becomes to wide to fit on the page.
Is it possible to split the horizontal submenu in two rows?

regards
4viggo

[4viggo]

Is there anyone out there who has tried to accomplish this solution in their menu

Please help

regards
4viggo

[kevin3442]

I have never seen such or tried it myself. Don't know if there's a built-in method. If there isn't, I can imagine a way that might work, but it would involve a bit of custom coding.

On a related note, this sort of begs the question... what about horizontal overflow? According to the docs:

overflow is used to enable Scollable menus. Setting this property to "overflow" [sic - "scroll"] will force proprietary operating system scroll bars to appear on the right hand side of your menu [talics added]

So, there is apparently no option for horizontal scrolls. I wonder if this is planned for the future, or what other plans may be in place to deal with horizontal overflows?

I also notice that, when a page renders that will potentially display a long horizontal menu, the browser's horizontal scrollbar appears, even when the menu has not been displayed. Just thought I'd mention that, in case it hasn't come up before.

Kevin

[John]

The only thing I can think of would be a menu item in the first row that would bring up the second row of items right below the first. I know that's not what you want, but I don't think there's a way to have the menu pop 2 rows by itself - unless, of course, Andy's been keeping secrets again...

[kevin3442]

Opening the menus would be fairly straight forward. You could have the main menu item open a submenu as usual, and also use its onfunction property to call a function to pop additional menus, positioned relative to the first submenu's current location. That part wouldn't be too tough. However, because they would actually be separate "submenus" open simultaneously, keeping them all open through mouseovers and closing them all at the same time when appropriate would be more of a challenge. I suppose you could tie the state of the additional submenus to the automatic state of the first submenu. I bet it could be done, but it might be a bit of a pain. This is an example where "onopen" and "onclose" events would be quite useful; you could use them to achieve an automatic menu cascading effect.

Kevin

[4viggo]

Thank's a lot kevin and John for looking into this subject, sounds like it's not possible to achieve the effect i was after with the menu at the moment.
Maybe Andy could sher some light on the possibility of adding this feature in the future releases/versions of the menu

regards
4viggo

[Andy]

Why not include 2 horizontal menus one of top of another.

This will work and shouldn't be too difficult. However, it won't be very dynamic though.

Let me know if this will help or not. It means playing around with the structure of the menu and this can be quite time consuming. Horizontal is much easier than vertical though so could be possible.

Cheers
Andy

[4viggo]

Thanks for the reply Andy
But wouldn't i lose the possibilty of having them both open when I hoover over one of the submenus
The question is to get get both the horizontal submenus to act as one submenu and for them both to stay open when hoovering over either of them.

Thanks for taking the time to look at this.

regards
4viggo

[Andy]

Not really - You just set them both to be alwaysvisible.

This way they will both be present all the time.

Cheers
Andy

[4viggo]

So - I open one submenu the normal way and open the second submenu by using onfunction and then i specify them both to be allwaysvisible

Probably a bit slow learner but you will have to bear with me

regards
4viggo

[kevin3442]

...You just set them both to be alwaysvisible. This way they will both be present all the time...

I may be missing something, but I thought the goal was to have stacking horizontal submenus, that behave as one... like a normal submenu. I.e., the whole structure opens when the user mouses over a calling Main Menu item, and closes under the same circumstances that would close a single submenu. Right?

Kevin

[John]

I may be missing something, but I thought the goal was to have stacking horizontal submenus, that behave as one... like a normal submenu.

That's what I understood, Kevin. One sub is too wide for the window, so he wants to split in into 2 parts, one above the other.

[4viggo]

That's correct Kevin and John, that is my goal.

regards
4viggo

[Hergio]

I think Andy was referring to maybe a top level menu that consists of two horizontal menus place directly on top of each other. This would definetly be feasible as a top level menu. But I agree, having a submenu consist of two rows of horizontal menus looks tough.

If you don't plan to have the items have subs of their own (meaning they will just be links) you might be able to get away with putting a table in the text of your menu item. The table could have multiple columns and two rows and in each cell you'd have a link. They wouldn't react like the menu does (although you could do it with your own mouseover stuff) but at least you'd get an arrangement of links that you want stemming from one main menu item. Just another option....

[4viggo]

Thanks Herigo.
That might actually work for me, could you give some help regarding what that code would have to look like? ( a short example would be marvelous )
I'm not too hot on javascripts (yet)

regards
4viggo

[Hergio]

I was just thinking something like....this all goes on ONE line by the way.

Code: Select all

aI("text=<table><tr><td>Item1</td><td>Item2</td><td>Item3</td></tr>
<tr><td>Item4</td><td>Item5</td><td>Item6</td></tr>
<tr><td>Item7</td><td>Item8</td><td>Item9</td></tr></table>;");

This would put a 9x9 table in a menuitem, and you could put whatever you wanted into them. But in each td, you could put a little mouseover script that would change the background as well as a hyperlink. You just have to watch your quotes and escaping of characters.
One of the typical TDs could look like this...

Code: Select all

<td class=cell_not onmouseover=\"this.className='cell_hot';\"><a href=\"page.htm\">Item1</a></td>

ANd then you'd just have two classes set up in the page that would be what the differenent states of the TDs should be, and you could get them to match that of the menu.

Code: Select all

<STYLE>
.cell_hot{
  background: red;
  color: white;
}
.cell_not{
  background: blue;
  color: black;
}
</STYLE>

This is the idea what I was getting at. It takes alittle xtra leg work, but until the menu supports such a thing and you still want this type of functionality, we may need to just work around it. Hope this helps!

[jswick]

I too do not like the horizontal menu running off the page. I've been trying to incorporate this script I found for a horizontal scrolling menu into the Milonic DHTML menu. http://www.dynamicdrive.com/dynamicinde ... rlink.htm#

I thought I could easily use Milonics instructions for inserting a relative main menu into a table to insert it into this script. It's not having the results I was looking for. I'll keep working on it. However, I only came across both menu's today so someone more familiar with the Milonic menu may have better luck. If I get it working - I'll post my solution.

[Ruth]

I'm not sure what you mean by running off the page. The menu should be within the page, unless you've specified a pixel width and make the browser window smaller than that width. Can you give us a url to see what's happening?

As to the other thing. I don't think you'll get it to work, though I could be wrong, since I don't do functions. But, that seems to be some kind function that is 'writing' a menu. So, I don't know how you'd get it to write the Milonic Menu Program. Maybe there's a way to get it to only write the 'scroll' part and leave the menu out and just code the menu in the table like you do when putting it in a regular table, but again, that seems to put things in a div and you really are not supposed to put it in a div. But, as I said I don't do functions.

I had one thought. Have you considered an iframe? Again, I'm not sure why your horizontal menu is running off the page, but I'd think if you created an iframe at x pixels high and x wide then have a page that has the menu load in it, if the menu is 'wider' than the iframe the iframe would get a bottom horizontal scroll bar, and until it actually got the scroll bar if you have no borders it wouldn't even look like an iframe.

Anyway, if you could give us the page where your menu is going beyond the browser window we could see what's going on.

Ruth

[jswick]

I don't have a URL i can send as I'm doing this on my local computer. But what I mean by "running off the page" is that if you have a horizontal main menu with a lot of items that run past the length of the window, you'll get the horizontal scroll bars and have to scroll the page to see all the menu options. I added a lot of items to your sample that comes with the download to test this. I want to set the horizontal menu width and be able to scroll it if the menu items extends beyond that width. I tried using the menuwidth property in the main menu but it doesnt seem to restrict the menu width on a horizontal menu. You're correct that what i posted earlier is a function that writes a menu into a div or layer tag at a set width with overflow set to hidden. What I tried to do is have it write a relative menu script. I just came across both the Milonic menu and the other example today - and haven't had too much time to work with them, however, you're idea to use an iframe would work. By using a scrollable iframe and putting the horizonal menu in the iframe i would have a scrollbar at the bottom of the horizontal menu. however I would rather have a couple of icons at either end of the menu to scroll it instead of the scrollbar at the bottom, for aesthetic purposes.

[Ruth]

Hi,

I know if you just got the menu there's a lot you don't know that it can do. Personally I think it is the best thing out there since it has such great functionality and at the same time is so versatile in artistic design. For example, on my site I have created css styles in the head of all my pages [I'm retired so I have a lot of time ] With those styles I use the offclass and onclass properties of the menu and my menus match the bgcolor and font colors of each page with the use of that.

As to the horizontal scroll, I can play around, but off the top of my head I can suggest two things. There is a menu property for horizontal menus called divides. You could code the main menu with divides=2; that will automatically make the menu two rows top and bottom. That also would mean doing some coding in the items for eliminating the separator on the last item in the top row if you are using a separator, or adding a separator in the last item of the bottom row. You'd have to experiment. You can also set it up as has been done by some to have two 'main' menus one above the other, mixing and matching colorschemes for your particular layout, you can even make them followscroll without separating.
Example 1 contains two main menus that are the same width, and Example 2 contains two main menus centered, the top one wider than the bottom one which is also centered in the top menu width. These are two of the double menu ones for which I still have links; and this is the topic post where Kevin explains about the followscroll setup for doing that if you want them to follow scroll viewtopic. ... 6026#16026

You could also place the menu in a table, again you'd make two 'main' menus, that is make the two of them alwaysvisible, putting one in the top row and the other in the next row. Or depending on just what your layout is and what is in the menu, there are some who have put two menus on a page in different places based on what is in each menu.

I'd be glad to play around with other options, but to do that I really would need your page layout otherwise I might be doing a lot of stuff for something that wouldn't fit what you wanted.

Ruth