First submenu overlaps horizontal menubar

Home Forums Older releases 0.9.x First submenu overlaps horizontal menubar

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2416
    hwyckoff
    Participant

    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...
    
    #2419
    admin
    Keymaster

    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.

    #2420
    hwyckoff
    Participant

    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…

    #2421
    admin
    Keymaster

    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.

    #2422
    hwyckoff
    Participant

    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.

    #2423
    hwyckoff
    Participant

    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

    #2424
    hwyckoff
    Participant

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

    Back to the drawing board.

    #2426
    hwyckoff
    Participant

    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.

    #2427
    hwyckoff
    Participant

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?