471,078 Members | 806 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,078 software developers and data experts.

Can I have a vertical sub-menu in a horizontal type CFMenu?

Haitashi
Hello everyone:

I have a CFMenu with the type set to horizontal. I'd like to have the sub-menu items open vertically. Is that possible?

Here is my code. I want the Portals sub-menu (Portal A, Portal B, Portal C) to open vertically instead of horizontally.
Expand|Select|Wrap|Line Numbers
  1.             <cfmenu name="topMenu" type="horizontal" fontsize="14" fontcolor="##7A7251"
  2.                font="'Lucida Sans', verdana, sans-serif;" selectedFontColor="##F58026" 
  3.                 menustyle="background-image:url('../images/toplinks_bg.gif');"    
  4.                 bgColor="##FFFFFF" childstyle="float:center;border-style:solid;padding:0px;border-width:0px;display:inline;margin-left:45px;">
  5.  
  6.                     <cfmenuitem name="home" href="##" 
  7.                     display="Home"/>
  8.  
  9.                 <!--- The ColdFusion menu item has a pop-up menu. --->
  10.                 <cfmenuitem name="portals"
  11.                         href="##" display="Portals" childstyle="border:0px;padding:2px 10px 2px 10px;">
  12.                     <cfmenuitem name="fso"
  13.                         href="##" display="Portal A"/>
  14.                     <cfmenuitem name="fso"
  15.                         href="##" display="Portal B"/>
  16.                     <cfmenuitem name="fso"
  17.                         href="##" display="Portal C"/>
  18.                 </cfmenuitem>
  19.  
  20.                 <cfmenuitem name="logout" href="##" 
  21.                     display="Logout"/>
  22.             </cfmenu>
May 29 '08 #1

✓ answered by Haitashi

Found the culprit:

#toplinks li {
display: inline;
}

The div class where I placed the CFMenu was called toplinks. This display attributed caused the sub menu to open horizontally instead of the default vertical. Good to know that there's a way to do that since by default submenu will open vertically and there's no clear way to change it.

So, in case anyone ever needs vertical sub menus in CFMenu - There ya go! jeje

5 5440
acoder
16,027 Expert Mod 8TB
Aren't all sub-menus vertical? See third item here.
May 29 '08 #2
Acording to that link:
Menus can have submenus, but only the top menu can be horizontal. All children of a horizontal menu are vertical.
However, no matter if I set the menu type to horizontal or vertical, all the child nodes of "Portals" still open horizontally. Is this just me? O.o

I'm suspect of styling... Maybe there's some CSS misfit code that's affecting how it's being displayed. I'm gonna look into that and report back.
May 30 '08 #3
Yes, there are some styling issues. Apparently the site's styles are overriding the YUI CSS. I ran an instance of CFMenu on a blank page on the same server and it worked fine.

Very imp lesson learned. I will now hunt for the specific styles and make changes. I will also convey to our designer that he should use more specific styling. As far as I can tell, he applied styles to UL and LI. This looks like the cause of the problem.
May 30 '08 #4
Found the culprit:

#toplinks li {
display: inline;
}

The div class where I placed the CFMenu was called toplinks. This display attributed caused the sub menu to open horizontally instead of the default vertical. Good to know that there's a way to do that since by default submenu will open vertically and there's no clear way to change it.

So, in case anyone ever needs vertical sub menus in CFMenu - There ya go! jeje
May 30 '08 #5
acoder
16,027 Expert Mod 8TB
Thanks for posting the solution and, what do you know, you've actually discovered a way to display sub-menus horizontally should anyone need it.
May 30 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Felipe Gasper | last post: by
11 posts views Thread by michael | last post: by
3 posts views Thread by Spiros Bousbouras | last post: by
13 posts views Thread by Bill | last post: by
40 posts views Thread by maya | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.