By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,795 Members | 1,660 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,795 IT Pros & Developers. It's quick & easy.

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

Haitashi
P: 96
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

Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Aren't all sub-menus vertical? See third item here.
May 29 '08 #2

Haitashi
P: 96
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

Haitashi
P: 96
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

Haitashi
P: 96
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
Expert Mod 15k+
P: 16,027
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.