HOW TO USE LEFT PANEL MENU IN ASP.NET OR MVC USING JQUERY.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 1518  View(s)
Ratings:
Rate this:
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. 
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use left panel Menu in asp.net or mvc using jquery.

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!