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

Total Post:341

Points:2389
Posted on    January-01-2016 11:16 PM

 .NET ASP.Net  JQuery 
Ratings:


 1 Reply(s)
 977  View(s)
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. 


aditya kumar Patel

Total Post:250

Points:1782
Posted on    January-01-2016 11:26 PM

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

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick