Topic: Vertical Fly-Out Menu in a Block

[jjwinc]

My ultimate goal is to have a "Member's Only" Left Block that contains a vertical flyout navigation bar which will be seen only after the user logs in. 

I built the block and the flyout menu (using PluginLab's Vertical CSS Image Flyout Menu Maker for Dreamweaver), but, what I figured would happen is happening.  When I mouse over a menu item that has a sub menu, the flyout isn't flying out on top of all other items, but is rather "flying under" causing a scroll bar to be shown.

I am by no means a CSS expert, but I do know my way around a little.  I played with the z-index, but that's not cutting it.  I started hunting for another CSS Property that I could change for the block itself, but before I dig into all of that, I wanted to see if anyone knew how to fix this easily.

If you want to see what I'm talking about, you can check it out here:

http://www.atu85.org/v2
ID: test
PW: testing

[jjwinc]

I need to add an update to this posting.  Turns out that the Left Block Vertical CSS menu is working just fine in IE, but there appears to be an issue when displaying it in Firefox.  IE layers the menu OVER the other blocks, while Firefox displays it under the Left Block, causing scroll bars.  This probably means that the PluginLab plug-in I am using for Dreamweaver is the culprit, not SP.

If anyone has seen this behavior before and could offer guidance, I'm all ears. 

[Eliana Tamerin]

Do you mind posting the css of the menu and any other css you changed?

[AngelinaBelle]

I see this issue in IE8 running as IE8, but not when running in IE7 compatability.
Just looking at it in IE8 developer tools, I can see that the z-heights are a little odd, but I cannot figure out why.  You'd think putting the submenus in divs with z=50 would make them float way out on top of all the other divs, but IE8 says the divs inside the divs inside the z=50 divs have z=0 somehow.
 
I'm not sure if IE 8 is rendering it correctly or not.

[AngelinaBelle]

There's another example of a similar problem at http://simpleportal.net/index.php?topic=5347.0
 

[jjwinc]

Do you mind posting the css of the menu and any other css you changed?

Thank you for the offering of help.  I haven't added any custom CSS, but here's the CSS that's generated by the the VI Menu plug-in, which ultimately calls javascript to do the bulk of the work.  If you'd like to see the script, too, let me know.  I also have a ticket in with the PluginLab help desk. 

Code: [Select]

<div id="PLVIMGMCWeZCDiv" style="position:relative;width:150px;height:175px;z-index:50;white-space:nowrap;direction:ltr;">
  <div id="PLVIMGMCWeZCMain" style="width:100%;height:100%;">
    <ul style="margin:0px;padding:0px;font:normal normal normal 12px Verdana,Arial,Helvetica,sans-serif;">
  <li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=profile" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">My&nbsp;Profile</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=pm" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">My&nbsp;Messages</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="http://atu85.org/v2/index.php?action=calendar" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Events&nbsp;Calendar</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Newsletter</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Political&nbsp;Action</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">Resources</a></li>
<li style="float:left;list-style:none;text-align:left;width:150px;height:25px;background-image:url(plvm_images/mm_up.png);"><a href="#" style="display:block;height:19px;padding:6px 0px 0px 6px;color:#000000;text-decoration:none;">ATU&nbsp;Business</a></li>
</ul>
</div>
<script type="text/javascript" src="../Pluginlab/Scripts/PLVIM.js">/* PLVIMMenu script ID:PLVIMGMCWeZC */</script>
</div>

[AngelinaBelle]

Is it possible to force createMenu menues to be vertical?

[jjwinc]

Is it possible to force createMenu menues to be vertical?

I was looking into that...so I could simply do away with the external plugin/javascript all together.  Anyone know if I can mod createMenu easily to make it vertical?  (looking at the code now)


<edit> Doing a little learnin' today, looking into the possibility of scrapping the VI Menu from the DW plug-in and just using createMenu from within SMF. 

In Subs_Menu.php, I see there are two options for a "menu_Type", dropdown and sidebar.  I'm not really sure how to form that call to createMenu() in a Left Side Block to change those values, and I want to make sure my assumptions are correct. 

[antechinus]

Eliana pointed me at this. Flyout  and/or drop menus need to have absolute positioning if they have to overlap other elements. Just using z-index by itself is not enough. You need to use z-index and absolute positioning. Take a look at the css for the RC3 Curve menus (which still need a bit of tweaking for RC4 but work as is).

Also I think you are on the right path re dumping that plug-in. The code it turned out is rubbish. This is quite usual for any "site builders" or whatever that I've seen. They all seem to turn out crappy code.

[AngelinaBelle]

I just worked out today that CreateMenu is used to create the admin and help menu/sidebar.  So that's what the two options do. Might not be exactly what you want.
 
I think the code you want for the fly-out menu might wind up being based on the sp_menu block. If you are using the standard menu bar, all you need to do is customize the CSS.  Otherwise, you'll need to write a function that works from a passed-in array instead of $context['...
 
 

[jjwinc]

I just worked out today that CreateMenu is used to create the admin and help menu/sidebar.  So that's what the two options do. Might not be exactly what you want.
 
I think the code you want for the fly-out menu might wind up being based on the sp_menu block. If you are using the standard menu bar, all you need to do is customize the CSS.  Otherwise, you'll need to write a function that works from a passed-in array instead of $context['...

It took me a bit to realize that the dropdown and sidebar values apply to the state of the menu (collapsed or normal (not collapsed)).  I didn't realize that it applied to just the admin and help menus, though.  Thank you for the info.

Interestingly enough, I added a Simple Portal Menu block, which just takes the main menu and makes it a vertical block and it, too, has the same problem in Firefox.  The flyouts are flying under the frame.  Again, it works fine in IE. 

http://www.atu85.org/v2
ID: test
PW: testing

This leads me to believe that my plug-in for DW may not be the issue.  Is this something that has always been like this?  I see the other thread (that happens to be watching my thread) is having the same issue.

http://simpleportal.net/index.php?topic=5347.msg32478#msg32478

[AngelinaBelle]

I've just had a good look at your site, and poked around in the CSS using the IE8 "developer tools".  I saw that this problem happens when overflow: auto is applied to the <div class="sp_block that contains the menu block code.
 
I'm using SMF 2.0RC3 and SimplePortal 2.3.2, and <div class=sp_block does not appear in the menu block (though it does appear in several other blocks on the portal page http://www.rockhallsailingclub.org/smf2test/ps.php) 
 
I don't know why this causes the problem, but I know that you can get a quick fix this way:
Themes/default/css/portal.css

Code: (find) [Select]

div.sp_block
{
 overflow: auto;
 padding: 0 0.5em;
}


Code: (replace) [Select]

div.sp_block
{
/* overflow: auto; */
 padding: 0 0.5em;
}


[jjwinc]

That worked like a charm, but all of the other blocks had the same property, causing my photo in the Welcome block to spill over outside of the borders.  So...I think we're a lot closer. 

I have learned one thing based on what you just told me.  I learned that IE is doing it incorrectly (ignoring the overflow: auto) and FF is handling it correctly (but we could've probably guessed that). 


In the Block that I have created, can I use the Style Options for Custom Title/Body Style at the bottom to control the overflow?  I saw other posts where you can control the title and body styles, but I think this is different because it's a div that applies to the whole block.

If not, I would like to see something added where I can control this, either in the Style Options area for the block or maybe a tick box asking if you would like overflow to be clipped, auto, visible, etc.

[AngelinaBelle]

There is a report that FF 3.6.3 has the same problem IE8 has.
I think the problems you are having are exactly why overflow was put into the CSS.
You could try resizing your images to make it fit where it should.
 
I hope nathaniel can step in and offer some advice when he gets a chance.
 
I don't have this problem at
rockhallsailingclub.org/smf2test/ps.php
I am running SP 2.3.2 on SMF 2.0RC3, and SP 2.3.2 does not do <div class="sp_block  for the sp_menu block.  I keep getting lost in the code, and cannot find where SimplePortal decides whether or not to wrap the block in "sp_block".
 
 

[jjwinc]

Actually, that would be a good place for me to start.  I need to upgrade from 2.3.1 to 2.3.2.  I had another posting about a problem I had with that upgrade and I got an answer, but I've yet to try it...been pulled this way and that with "life" things. 

Maybe I'll give that a try after the Penguins beat up on the Habs tonight <hockey reference>  Don't worry, no playoff beard here. 

Thank you for all the guidance and input thus far.  It's greatly appreciated.

[jjwinc]

I upgraded to 2.3.2 and I now see what you mean.  The Menu block created through SP does not wrap (overflow off) while the "member's only" block that I created still does.

I'm still sifting through code to see if I could put something together (and my skill level is just enough to get me in trouble).  If someone could lend a hand or offer suggestions, it would be greatly appreciated. 

[jjwinc]

Good morning...

I still do not have a solution to this problem.  Would the next step be for me to post it in Blocks and Modifications or would this be a better candidate for the Bug Report forum? 

[jjwinc]

<crickets>   

[AngelinaBelle]

You are using a custom HTML block for the menu?

The CSS fix I gave above doesn't do the job? Of course, it has to be applied again after the upgrade.
 
If that does not do what you need, then, yes, I think a little custom coding in Portal.template.php could help.

[jjwinc]

The solution you provided above does work, but it impacts all blocks on the page, which causes a problem if the page is resized or if there's an overflow where I'm expecting scroll bars.

I think I'm looking for a fix that will apply to just the menu block that I've built (not the menu block that comes with SP).  I've been pulled in so many directions I haven't had a chance to play with this one in a week or so.  Would you know the area in Portal.template.php that would need to be changed?

Is there any way to check the name of the sp_block before setting the overflow?  Maybe set it to NOT overflow in the CSS and then check the name of the block in hard code and say something like "if <> menu, overflow:auto" or something along those lines?!