forum

Home / DeveloperSection / Forums / How to use left panel Menu in asp.net or mvc using jquery.

Ask Question

How to use left panel Menu in asp.net or mvc using jquery.

Anonymous User266501-Jan-2016
I want to use  left panel Menu in asp.net or mvc using jquery.How to do this please give me a sample demo code. 
.net asp.net  jquery 
Updated on 03-Jul-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

Sure, here are the steps on how to use left panel menu in ASP.NET or MVC using jQuery:

  1. Create a left panel menu in your HTML page.
  2. Add a jQuery library to your HTML page.
  3. Write jQuery code to toggle the left panel menu.
  4. Bind the jQuery code to the left panel menu.

Here is an example of the code:

HTML

<div id="left-panel">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Toggle the left panel menu
    $("#left-panel").toggle();

    // Bind the jQuery code to the left panel menu
    $("#left-panel").on("click", function() {
        $("#left-panel").toggle();
    });
});
</script>

This code will create a left panel menu in your HTML page. The jQuery library will be loaded from Google CDN. The jQuery code will toggle the left panel menu when it is clicked. The jQuery code will be bound to the left panel menu using the on event handler.

Anonymous User

Anonymous User

01-Jan-2016

here we are going to create left panel menu using  jquery. following the below code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Fourm.aspx.cs" Inherits="Forumasp.Fourm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Menu - Categories</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            $("#menu").menu({
                items: "> :not(.ui-widget-header)"
            });
        });
    </script>
    <style>
        .ui-menu {
            width: 300px;
        }
        .ui-widget-header {
            padding: 0.2em;
        }
    </style>
</head>
<body>
    <ul id="menu">
        
        <li class="ui-widget-header">Main Master</li>
        <li>Dashboard</li>
        <li>State</li>
        <li>City</li>
        <li>Category</li>
        <li>Sub Category</li>
        <li>Product</li>
        <li class="ui-widget-header">Transaction</li>
        <li>Sales</li>
          <li>Sales Return</li>
        <li>Purchase</li>
         <li>Purchase Retuen</li>
        <li>Debit Note</li>
        <li>Credit Note</li>
        <li>Payment</li>
        <li>Receipt</li>
    </ul>

</body>
</html>

OutPut

answer 415870101112612

 

 

Liked By