Use of smartmenu with asp.net menu

[hwyckoff]

I have an asp.net menu rendered as an unordered list, which is infamous for inserting classes into the list items, making it a “dirty list”. My attempts to clean out the list with jQuery on the client side have proved useless, because asp.net somehow enforces those class names. (Why not just type in the html directly? Why not have an xml object render the table cleanly? That’s a different discussion and a red herring.)

In any case, if I post the relevant html, I am hoping that someone can clue me in to what modifications I need to smartmenu so that I can get the basic smartmenu functionality working.

This is the resulting HTML of the asp:menu control rendered into an unordered list, surrounded by a div.

I’ve been banging my head against the wall for a better part of a week, so any help I get would be greatly appreciated. Thank you!

<div id="divMenu">
        <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>
                                </ul>
                            </li>
                        <li><a href="/SNV/Vehicles/Specialty_Vehicles.aspx">Specialty</a></li><li>
                            <a href="/SNV/Vehicles/Truck_Conversions.aspx">Truck Conversions</a></li><li>
                                <a href="/SNV/Vehicles/Vans_For_Quadriplegic_Driver.aspx">Vans for Quadriplegic
                                    Drivers</a></li>
                    </ul>
            </li>
            <li><a href="/SNV/Products/products.aspx">Products</a><ul class="level3">
                <li><a href="/SNV/Products/Airbag_Safety/Airbag_Safety.aspx">Airbag
                    Safety</a><ul class="level4">
                        <li><a href="/SNV/Products/Airbag_Safety/AirBag_Danger_More_Info.aspx">
                            Airbag Danger: More Information</a></li><li><a href="/SNV/Products/Airbag_Safety/AirBag_Safety_On_Off_Switch.aspx">
                                On/Off Switch</a></li><li><a href="/SNV/Products/Airbag_Safety/DrEvans_Excerpts_from_Traffic_Safety.aspx">
                                    Excerpts from "Traffic Safety"</a></li><li><a href="/SNV/Products/Airbag_Safety/DrSmock_Protecting_Yourself_From_Airbag_Injuries.aspx">
                                        Protecting yourself from Air Bag Injuries</a></li>
                    </ul>
                </li>
                <li><a href="/SNV/Products/Incline_Platform_Lifts.aspx">Incline
                    Platform Lifts</a><ul class="level4">
                        <li><a href="/SNV/Products/Incline_Platform_Lifts/Harmar_IL500_Sierra_Incline_Platform_Lift.aspx">
                            Harmar IL500 (Sierra Incline Platform Lift)</a></li>
                    </ul>
                </li>
                <li><a href="/SNV/Products/Ramps.aspx">Ramps</a><ul class="level4">
                    <li><a href="/SNV/Products/Ramps/Harmar_AR_100_Single_Fold_Ramp.aspx">
                        Harmar AR100 (Single Fold Ramp)</a></li><li><a href="/SNV/Products/Ramps/Harmar_AR_200_Rubber_Threshold_Ramp.aspx">
                            Harmar AR200 (Rubber Threshold Ramp)</a></li><li><a href="/SNV/Products/Ramps/Harmar_AR_300_Multi_Fold_Ramp.aspx">
                                Harmar AR300 (Multi-Fold Ramp)</a></li><li><a href="/SNV/Products/Ramps/Harmar_AR_500_Adjustable_Threshold_Ramp.aspx">
                                    Harmar AR500 (Adjustable Threshold Ramp)</a></li><li><a href="/SNV/Products/Ramps/Harmar_AR_800_Threshold_Ramp.aspx">
                                        Harmar AR800 (Threshold Ramp)</a></li>
                </ul>
                </li>
                <li><a href="/SNV/Products/StairLifts.aspx">Stairlifts</a><ul
                    class="level4">
                    <li><a href="/SNV/Products/Stairlifts/Acorn_120_Outdoor_Stairlift.aspx">
                        Acorn 120 Outdoor</a></li><li><a href="/SNV/Products/Stairlifts/Acorn_120_Stairlift.aspx">
                            Acorn 120</a></li><li><a href="/SNV/Products/Stairlifts/Acorn_180_Stairlift.aspx">
                                Acorn 180</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_CSL500_Helix_Curved_Stairlift.aspx">
                                    Harmar CSL500 Helix Curved</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_SL400_Vantage_Straight_Stair_Lift.aspx">
                                        Harmar SL400 Vantage Straight</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_SL600_Pinnacle_Premium.aspx">
                                            Harmar SL600 Pinnacle Premium</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_SL600HD_Pinnacle_Heavy_Duty_Stair_Lift.aspx">
                                                Harmar SL600HD Pinnacle Heavy Duty</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_SL3500OD_Outdoor.aspx">
                                                    Harmar SL3500OD Outdoor</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_RP350_Alpine_II_Standard.aspx">
                                                        Harmar RP350 Alpine II Standard</a></li><li><a href="/SNV/Products/Stairlifts/Harmar_RP350S_Alpine_II_Signature_Stair_Lift.aspx">
                                                            Harmar RP350S Apine II Signature</a></li>
                </ul>
                </li>
                <li><a href="/SNV/Products/Vehicle_Adaptations/Systems_Controls/Systems_Controls.aspx">
                    Systems Controls</a><ul class="level4">
                        <li><a>Automotive Secondary Systems Controls</a></li><li><a>
                            Electronic Parking Brakes</a></li><li><a>Floor System</a></li>
                    </ul>
                </li>
                <li><a href="/SNV/Products/Vehicle_Adaptations/Vehicle_Adaptations.aspx">
                    Vehicle Adaptations</a><ul class="level4">
                        <li><a href="/SNV/Products/Vehicle_Adaptations/Steering_Controls/Steering_Controls.aspx">
                            Steering Controls</a></li>
                    </ul>
                </li>
                <li><a href="/SNV/Products/Vertical_Platform_Lifts.aspx">Vertical
                    Platform Lifts</a><ul class="level4">
                        <li><a href="/SNV/Products/Vertical_Platform_Lifts/Harmar_CPL_Vertical_Platform_Lift.aspx">
                            Harmar CPL (Commercial Vertical Platform Lift)</a></li><li><a href="/SNV/Products/Vertical_Platform_Lifts/Harmar_CPL_400H_1400H_Hydraulic_CPL_with_Modular_Tower.aspx">
                                Harmar CPL (400H-1400H Hydraulic CPL with Modular Tower)</a></li><li><a class="level4"
                                    href="/SNV/Products/Vertical_Platform_Lifts/Harmar_CPL_400P_Portable_Vertical_Platform_Lift.aspx">
                                    Harmar CPL (400P Portable Vertical Platform Lift)</a></li><li><a href="/SNV/Products/Vertical_Platform_Lifts/Harmar_EPL_Enclosed_Vertical_Platform_Lift.aspx">
                                        Harmar EPL (Enclosed Vertical Platform Lift)</a></li><li><a href="/SNV/Products/Vertical_Platform_Lifts/Harmar_RPL_Residential_Vertical_Platform_Lift.aspx">
                                            Harmar RPL (Residential Vertical Platform Lift)</a></li><li><a href="/SNV/Products/Vertical_Platform_Lifts/Harmar_TG400_Toe_Guard_Commercial_Platform_Lift.aspx">
                                                Harmar TG400 (Toe Guard Commercial Platform Lift)</a></li>
                    </ul>
                </li>
            </ul>
            </li>
            <li><a href="/SNV/About_Us/about_us.aspx">About Us</a><ul class="level3">
                <li><a href="/SNV/About_Us/find_us.aspx">Find Us</a></li><li><a class="level3"
                    href="/SNV/About_Us/latest_news.aspx">Latest News</a></li><li><a href="/SNV/About_Us/Special_Needs_Lifestyles.aspx">
                        Radio Show</a></li>
            </ul>
            </li>
            <li><a href="/SNV/resources.aspx">Resources</a><ul class="level3">
                <li><a href="/SNV/ADA_Guidelines.aspx">ADA Requirements</a></li><li><a
                    class="popout level3" href="/SNV/Brochures.aspx">Brochures</a><ul class="level4">
                        <li><a>Incline Platform Lifts</a></li><li><a>Ramps</a></li><li>
                            <a>Stairlifts</a></li>
                    </ul>
                </li>
                <li><a>Brochure Request</a></li><li><a href="/SNV/Rebates.aspx">
                    Rebates</a></li><li><a href="/SNV/References.aspx">References</a><ul
                        class="level4">
                        <li><a>Manuals</a></li><li><a>Sell Sheets</a></li>
                    </ul>
                    </li>
            </ul>
            </li>
            <li><a href="/SNV/Sitemap.aspx">Sitemap</a></li>
        </ul>
    </div>

[admin]

Hi,

It’s not a problem if you can’t control completely the outputted structure as long as it is still valid (and yours is just fine). The only slight difference for you from the default setup instructions is that you will need a slightly different init code – e.g. something like this:

$(function() {
	$('#divMenu > ul').attr('id', 'main-menu').addClass('sm sm-blue').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8
	});
});

Here is a working demo:

https://jsfiddle.net/x3k1nrmc/

This uses the default “sm-blue” theme but I guess it should be easy for you to change that if you like.

Cheers!

[hwyckoff]

Thank you. This did the trick. This question is fully resolved.

[Author]

Posts