First submenu overlaps horizontal menubar

[hwyckoff]

I suspect this exists because I am using an asp:menu, which litters the nested UL with classes and styles.

In any case, when I select any link on the horizontal menubar, the first submenu overlaps the horizontal menu. Is there some setting I can adjust so this does not happen?

Thank you for any ideas. This is an issue.

Here is the relevant context:

<script type="text/javascript">
        $(function () {
            $("#Menu1 ul:first").attr('class', 'sm sm-blue').smartmenus();
        });        
    </script>

<div id="Menu1">
	<ul class="level1">
		<li><a title="Homepage" href="/SNV/index.aspx">Homepage</a></li><li><a title="Main vehicles page" href="/SNV/Vehicles/vehicles.aspx">Vehicles</a><ul class="level3">
			<li><a href="/SNV/Vehicles/New_Vehicles.aspx">New Vehicles</a></li><li><a href="/SNV/Vehicles/Used_Vehicles.aspx">Used Vehicles</a><ul class="level4">
				<li><a href="/SNV/Vehicles/Side_Entry_Vehicles.aspx">Side Entry</a></li><li><a href="/SNV/Vehicles/Rear_Entry_Vehicles.aspx">Rear Entry</a></li>
			</ul></li><li><a href="/SNV/Vehicles/mv_1.aspx">MV-1</a><ul class="level4">
				<li><a href="/SNV/Vehicles/mv_1/se_standard_edition.aspx">SE Standard Edition</a></li>
			</ul></li><li><a href="/SNV/Vehicles/Rentals_Accessible_Van.aspx">Accessible Van Rentals</a></li><li><a href="/SNV/Vehicles/Commercial_Vans.aspx">Commercial Vans</a><ul class="level4">
				<li><a href="/SNV/Vehicles/Norcal_Ford_Transit_Connect.aspx">Norcal Ford Transit Connect</a></li><li><a href="/SNV/Vehicles/Nissan_NV.aspx">Nissan NV</a></li>

... and so on...

[admin]

Try initializing the script with the following options:

        $(function () {
            $("#Menu1 ul:first").attr('class', 'sm sm-blue').smartmenus({
                subMenusSubOffsetX: 1,
                subMenusSubOffsetY: -8
	    });
        });

And if you’ve customized the default “sm-blue” theme, you may need to experiment with different values for the mainMenuSubOffsetX and mainMenuSubOffsetY options too.

[hwyckoff]

No difference.

Last night I discovered the possibility of making an asp:menu custom class extension that might provide cleaner rendering, but I haven’t encountered the critical detail of exactly how to do that.

Work in progress…

[admin]

OK, if you like, please post an URL to some kind of testable demo and I can take a look. Unfortunately, it’s very difficult to guess what exactly might be causing the issue without checking your code.

[hwyckoff]

I already presented the code I used above, so there would be nothing else to show.

I know for a fact that the the javascript and classes the .net server dumps in the UL cannot be removed by jQuery because the .net server ensures that it’s the VERY LAST thing to process.

While I can get away with using an xml to ul approach on one website, there is another where I need to use the menu object because it does security trimming by role (and there’s over 25 roles at my internal site).

It’s all good (for now). It’s just a process of me figuring out how to override the asp.net menu to provide a clean UL on the server side.

The CSS Friendly Class Extender isn’t really css friendly because the demos I’ve seen don’t provide clean UL either.

[hwyckoff]

I finally figured something out. I’m sharing this in the off chance that there are any asp.net vb users who need to use an asp.menu control. Making a custom class (with Visual Studio) really isn’t that hard at all. I had just missed a very simple step at the very last.

http://stackoverflow.com/questions/30044028/how-can-i-override-the-asp-net-menu-so-that-it-doesnt-litter-the-rendered-ul-wi

[hwyckoff]

Scratch the last post. After refreshing the website, the menu didn’t work.

Back to the drawing board.

[hwyckoff]

I’m only providing some asp.net details for the sake of any future customer also using asp.net and experiencing the same issue as me.

I resolved this issue by doing a plan B. If I didn’t need security trimming, then I’d use an xslt transform of the sitemap (http://forums.asp.net/t/2047562.aspx?How+can+I+get+my+XSLT+file+to+read+the+web+sitemap+urls+so+they+are+resolved+for+client+). That method works perfectly because I ensure that the resulting UL is clean and has the correct ID and classname.

When I need security trimming by roles (as I do in this instance), I used an asp:repeater control. Unfortunately this takes me to only two levels. http://forums.asp.net/t/2047487.aspx?repeater+control+to+show+full+sitemap+with+all+child+nodes

By using either option, depending on your needs, you can use asp.net to produce a clean and rendered UL that isn’t littered with classes like the asp:Menu still does.

[hwyckoff]

And here’s an even better approach to supplying the UL in an asp.net webpage when you need to filter by active directory roles. I nested four levels of asp:repeaters together and worked out a server-side solution to remove empty UL tags (which cause “empty” menu boxes).

http://stackoverflow.com/questions/30084144/how-can-i-hide-empty-nested-repeaters/30108957#30108957

[Author]

Posts