I need to get this problem fixed for showing the project next week. Anyway, I posted this before and made some progress. I'm using the 4.0 framework with the menu control to display horzontally accross the page. On heavy loading pages the menu control displays
vertically on the page very ugly. I have the menu control Render Mode set to list. I added a style that I found on the net to hide all the child nodes which helps but the top level still spreads down the page any way to fix it? I' have not been able to get
the css menu control adapter either. Any Help please.
This is the Dynamic style and menu control using a sitmap too with roles.
If I understood you correctly, the Menu is rendering correctly after the page loads, during the page load time the menu looks vertical that makes it ugly ... If this is your problem, then place the menu control in a div with style set to display:none.On
body onload, or use jquery document.ready method to make the div visible..
The real voyage of discovery consists not in making new landscapes, but in having new eyes
MenuNav is the name of the Div tag that surrounds the Menu control. Not sure if this is what you'r suggestion in th efirst part but it didn't do anything, might have the sytax wrong
If you're using v4 the CSS adapters aren't relevant as the default rendering of the menu is CSS friendly.
Does the rendered output appear as a list, or as a table? If the latter check the controlRenderingCompatibilityVersion attribute on the <pages> element to make sure it's set to "4.0".
If the menu renders the correct HTML - ie a list - which is what it sounds like, since a list is by default vertical, then it sounds like the CSS isn't being applied correctly. Can you use the IE Developer Tools (just hit F12) or FireBug in Firefox (or the
native inspector or similar in Chrome) to view the HTTP requests. It should show a request for the CSS file; the request will be a Get for WebResource.axd
I made some good progress last night. I made my div tag aroung the menu control style set visibility to hidden and then used a javascript to show the div tag and called it from the body onload event. This got rid of the pesky vertical problem but I still
see it tried to dispaly an empty area on the page. but it did improve. Godd point Dave about the UL are made to go vertical, Maybe I'll try making the menu render as a table instead I quickly changed it add it performed better but I'll need to remove the
arrows from the top level menu items.
I'd stick to UL/LI if you can; it's more better markup and has accessibility advantages too.
If you want to get rid of the empty area use both visibility:hidden and display:none on the inital CSS, then set them to visibility:visible and display:block when you want to show them.
There's a property on the Menu control that controls the image - StaticPopOutImgeUrl I think - set it to and empty string and the image won't appear.
Marked as answer by rsvore on Mar 01, 2012 03:40 PM
rsvore
Member
324 Points
286 Posts
Urgent help with Menu Control
Feb 29, 2012 04:52 PM|LINK
I need to get this problem fixed for showing the project next week. Anyway, I posted this before and made some progress. I'm using the 4.0 framework with the menu control to display horzontally accross the page. On heavy loading pages the menu control displays vertically on the page very ugly. I have the menu control Render Mode set to list. I added a style that I found on the net to hide all the child nodes which helps but the top level still spreads down the page any way to fix it? I' have not been able to get the css menu control adapter either. Any Help please.
This is the Dynamic style and menu control using a sitmap too with roles.
<style type="text/css"> .DynamicMenu { display: none; } </style> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" DataSourceID="SiteMapDataSource1" MaximumDynamicDisplayLevels="4" StaticDisplayLevels="2" OnMenuItemDataBound="NavigationMenu_MenuItemDataBound" staticEnableDefaultPopOutImage="true" RenderingMode="List" > <StaticMenuItemStyle HorizontalPadding="10px" /> <StaticMenuItemStyle VerticalPadding="6px" /> <DynamicMenuStyle CssClass="DynamicMenu" /> </asp:Menu>sreejukg
All-Star
27493 Points
4094 Posts
Re: Urgent help with Menu Control
Feb 29, 2012 04:56 PM|LINK
If I understood you correctly, the Menu is rendering correctly after the page loads, during the page load time the menu looks vertical that makes it ugly ... If this is your problem, then place the menu control in a div with style set to display:none.On body onload, or use jquery document.ready method to make the div visible..
My Blog
rsvore
Member
324 Points
286 Posts
Re: Urgent help with Menu Control
Feb 29, 2012 06:26 PM|LINK
Thanks, I'll check i tout and let you know.
rsvore
Member
324 Points
286 Posts
Re: Urgent help with Menu Control
Feb 29, 2012 06:59 PM|LINK
Tried this in the masterpage where I have the menu control:
<body onload="document.getElementById('MenuNav').style.display:none;">Dave Sussman
All-Star
37716 Points
5005 Posts
ASPInsiders
MVP
Re: Urgent help with Menu Control
Mar 01, 2012 08:35 AM|LINK
If you're using v4 the CSS adapters aren't relevant as the default rendering of the menu is CSS friendly.
Does the rendered output appear as a list, or as a table? If the latter check the controlRenderingCompatibilityVersion attribute on the <pages> element to make sure it's set to "4.0".
If the menu renders the correct HTML - ie a list - which is what it sounds like, since a list is by default vertical, then it sounds like the CSS isn't being applied correctly. Can you use the IE Developer Tools (just hit F12) or FireBug in Firefox (or the native inspector or similar in Chrome) to view the HTTP requests. It should show a request for the CSS file; the request will be a Get for WebResource.axd
rsvore
Member
324 Points
286 Posts
Re: Urgent help with Menu Control
Mar 01, 2012 11:33 AM|LINK
I made some good progress last night. I made my div tag aroung the menu control style set visibility to hidden and then used a javascript to show the div tag and called it from the body onload event. This got rid of the pesky vertical problem but I still see it tried to dispaly an empty area on the page. but it did improve. Godd point Dave about the UL are made to go vertical, Maybe I'll try making the menu render as a table instead I quickly changed it add it performed better but I'll need to remove the arrows from the top level menu items.
Dave Sussman
All-Star
37716 Points
5005 Posts
ASPInsiders
MVP
Re: Urgent help with Menu Control
Mar 01, 2012 11:59 AM|LINK
I'd stick to UL/LI if you can; it's more better markup and has accessibility advantages too.
If you want to get rid of the empty area use both visibility:hidden and display:none on the inital CSS, then set them to visibility:visible and display:block when you want to show them.
There's a property on the Menu control that controls the image - StaticPopOutImgeUrl I think - set it to and empty string and the image won't appear.
rsvore
Member
324 Points
286 Posts
Re: Urgent help with Menu Control
Mar 01, 2012 03:39 PM|LINK
Great thanks. It's looking much better now.