Completed
Last Updated: 07 Dec 2020 16:44 by ADMIN
Donald
Created on: 07 Nov 2016 17:37
Category: UI for ASP.NET AJAX
Type: Feature Request
2
RadNavigation expand on hover in hamburger menu
When the Navigation control collapses into the hamburger menu keep the hover to expand the menu items functionality.
1 comment
ADMIN
Rumen
Posted on: 07 Dec 2020 16:44

Hi Donald,

You can implement this with JavaScript/jQuery like this:

    <script>
        function OnClientLoad(sender, args) {
            $telerik.$(".rnvRootGroupWrapper").mouseover(function () {
                $telerik.$(".rnvHovered").click();
            });
        }
    </script>
    <telerik:RadNavigation runat="server" ID="Nav1" OnClientLoad="OnClientLoad">
        <Nodes>
            <telerik:NavigationNode Text="Guitars & Basses">
                <Nodes>
                    <telerik:NavigationNode Text="Classical Guitars">
                        <Nodes>
                            <telerik:NavigationNode Text="1/2 Size Classical Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="3/4 Size Classical Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="7/8 Size Classical Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="4/4 Size Classical Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Lefthanded Classical Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Concert Guitars"></telerik:NavigationNode>
                        </Nodes>
                    </telerik:NavigationNode>
                    <telerik:NavigationNode Text="Steel String Guitars">
                        <Nodes>
                            <telerik:NavigationNode Text="3/4 Size and Travel Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Dreadnought Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Jumbo Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Folk Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="12-String Westernguitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Lefthanded Acoustic Guitars"></telerik:NavigationNode>
                        </Nodes>
                    </telerik:NavigationNode>
                    <telerik:NavigationNode Text="Acoustic Basses">
                        <Nodes>
                            <telerik:NavigationNode Text="Electric Guitars">
                                <Nodes>
                                    <telerik:NavigationNode Text="ST Models"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="T-Models"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="LP-Models"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="SG Models"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="7-String Guitars"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="8-String Guitars"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Lefthanded Guitars"></telerik:NavigationNode>
                                </Nodes>
                            </telerik:NavigationNode>
                            <telerik:NavigationNode Text="Electric Basses">
                                <Nodes>
                                    <telerik:NavigationNode Text="4-String J-Basses"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="5-String J-Basses"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="4-String P-Basses"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Misc. 4-String Basses"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Misc. 5-String Basses"></telerik:NavigationNode>
                                </Nodes>
                            </telerik:NavigationNode>
                            <telerik:NavigationNode Text="Amplifiers for Acoustic Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Amplifiers for Electric Guitars"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Bass Amplifiers"></telerik:NavigationNode>
                        </Nodes>
                    </telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Drums & E-Drums">
                <Nodes>
                    <telerik:NavigationNode Text="Acoustic Drumsets">
                        <Nodes>
                            <telerik:NavigationNode Text="Acoustic Drumsets"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Shell Sets"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Bass Drums"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="Tomtoms"></telerik:NavigationNode>
                        </Nodes>
                    </telerik:NavigationNode>
                    <telerik:NavigationNode Text="E-Drums">
                        <Nodes>
                            <telerik:NavigationNode Text="Electronic Drumsets"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="E - Drum Sound Modules"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="E - Drum Bass Pads"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="E - Drum Tom Pads"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="E - Drum Snare Pads"></telerik:NavigationNode>
                            <telerik:NavigationNode Text="E - Drum Cymbal Pads"></telerik:NavigationNode>
                        </Nodes>
                    </telerik:NavigationNode>
                    <telerik:NavigationNode Text="Drum Thrones"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Percussions">
                <Nodes>
                    <telerik:NavigationNode Text="Percussion sets"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Congas"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Bongos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Djembes"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Cajons, Cajintos, Yambus"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Hand Drums"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Tambourines"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Maracas"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Pianos & E-Pianos">
                <Nodes>
                    <telerik:NavigationNode Text="Grand pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Upright pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Disklavier"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Silent pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Hybrit pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Digital pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="State pianos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Accessories"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Strings">
                <Nodes>
                    <telerik:NavigationNode Text="Violins and Violas"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Electric Violins and Violas"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Accessories for Violins and Violas"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Electric Cellos"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Double Basses"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Wind Instruments">
                <Nodes>
                    <telerik:NavigationNode Text="Saxophones"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Trumpets"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Flugelhorns"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Trombones"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Horns"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Flutes"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Clarinets"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Audio & PA">
                <Nodes>
                    <telerik:NavigationNode Text="Loudspeakers"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Power Amplifiers"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Intecoms"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Audiotools"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Microphones"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Mixing Desks"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Studio Monitors"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Digital Converters"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Synchronizers"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Controllers"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Audio Interface"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="MIDI Equipment"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Lighting & Stage">
                <Nodes>
                    <telerik:NavigationNode Text="Club & Disco"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Stage"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Cinema & TV"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Architectural & Decorative Lighting"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Controller & Dimmer"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Lighting Stands & Grip"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Video & Multimedia">
                <Nodes>
                    <telerik:NavigationNode Text="Camera support"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Video Processing"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Displays"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Projectors"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Screens"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Interactive Screens"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Cables & Connectors">
                <Nodes>
                    <telerik:NavigationNode Text="Instrumental Cables"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Microphone Cables"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Guitar Cables"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="XLR connectors"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Jack"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Banana Connectors"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Accessories">
                <Nodes>
                    <telerik:NavigationNode Text="Stands"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Seats and Stools"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Metronomes and Tuners"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Batteries and Charging sets"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Clothing"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>

 

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.