Thursday 3 November 2011

Creating TreeView Menu Using C#.NET

Default.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TreeViewMenus._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>TreeView Menus</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div id="header">
            <h1>
                Working With TreeView Menus</h1>
        </div>
     <div id="sidebar">
            <div id="nav">
                <asp:TreeView ID="TreeView2" runat="server" ImageSet="Arrows">
            <ParentNodeStyle Font-Bold="False" />
            <HoverNodeStyle ForeColor="#5555DD" />
            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
                HorizontalPadding="0px" VerticalPadding="0px" />
            <Nodes>
                <asp:TreeNode Text="Fruits" ToolTip="Fruits" Value="Fruits" Expanded="false">
                    <asp:TreeNode Text="Apple" ToolTip="Apple" Value="Apple"></asp:TreeNode>
                    <asp:TreeNode Text="Banana" ToolTip="Banana" Value="Banana"></asp:TreeNode>
                    <asp:TreeNode Text="Orange" ToolTip="Orange" Value="Orange"></asp:TreeNode>
                    <asp:TreeNode Text="Pine Apple" ToolTip="Pine Apple" Value="Pine Apple">
                    </asp:TreeNode>
                    <asp:TreeNode Text="Lichi" ToolTip="Lichi" Value="Lichi"></asp:TreeNode>
                    <asp:TreeNode Text="Grapes" ToolTip="Grapes" Value="Grapes"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="Vegetables" ToolTip="Vegetables" Value="Vegetables" Expanded="false">
                    <asp:TreeNode Text="Beans" ToolTip="Beans" Value="Beans"></asp:TreeNode>
                    <asp:TreeNode Text="Drumstick" ToolTip="Drumstick" Value="Drumstick">
                    </asp:TreeNode>
                    <asp:TreeNode Text="Lady's Finger" ToolTip="Lady's Finger"
                        Value="Lady's Finger"></asp:TreeNode>
                    <asp:TreeNode Text="Onion" ToolTip="Onion" Value="Onion"></asp:TreeNode>
                    <asp:TreeNode Text="Potato" ToolTip="Potato" Value="Potato"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
            <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"
                HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
        </asp:TreeView>
       
            </div>
        </div>
         <div id="footer">
                <p class="left">
                    All content copyright &copy; Mohan Private Software Solutions Inc.</p>
            </div>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace TreeViewMenus
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Stylesheet.css

html, body {
background-color: #FFFFFF;
color: #000000;
font: normal 90%/1.8em 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
margin: 0;
height: 100%;
}
h1 {
font-size: 1.8em;
font-weight: bold;
margin-top: 0em;
margin-bottom: 0em;
color: #a83930;
}
h2 {
font-size: 1.6em;
margin: 1.0em 0em 1.0em 0em;
font-weight: bold;
color: #a83930;
}
h3 {
font-size: 1.2em;
margin: 1.0em 0em 1.0em 0em;
font-weight: bold;
color: #a83930;
}
p {
font-size: 1.1em;
line-height: 1.8em;
margin: 1.1em 0em 1.1em 0em;
text-align: left;
}
ul 
{
    font-size: 1.1em;
}
a:link, a:visited {
color: #cc3300;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
color: #ff9900;
text-decoration: underline;
}
title {
    color: #a83930;
}
#header {
height: 50px;
padding: 0 0px 0 0px;
color: #a83930;
background-color: #000000;
border-bottom: 8px solid #d30a1a;
}
#header h1 {
padding: 10px 0 0 0;
color: #FFFFFF;
margin-left: 10px;
margin-bottom: 10px;
height: 8px;
margin-right: 0;
margin-top: 10px;
}
#logo {
background-color: #000000;
background: url(images/logo.gif);
background-position: top left;
background-repeat: no-repeat;
height: 100px;
width: 100px;
border: 0;
float: left;
}
#content {
margin-left: 210px; 
padding: 0 20px 1.8em 10px;
background-color: #fff;
}
.code {
color: #a83930;
background-color: #fdea12;
    font: 0.9em/1.4em verdana, arial, helvetica, sans-serif;
    float: right;
    border: solid 1px #a83930;
    padding: 10px;
}

#sidebar {
float:left;
padding: 0 10px 10px 10px;
background-color: #656565;
/*background-image: url(images/bg_2.gif);*/
background-repeat: repeat-y;
background-position: top left;
border-top: 2px solid #656565;
border-bottom: 2px solid #656565; 
width: 168px;  /* ds */
height:500px;
}
html>body #sidebar {
width: 185px;
}
#sidebar h3 {
  font-weight: bold;
  padding-bottom: 0.5em;
  border-bottom: 1px dashed #fdea12;
  color: #fdea12;
}

#nav a:link, #nav a:visited {
/*display: block;*/
width: 99.99%; /* for IE5 */
color: #FFFFFF;
text-decoration: none;
padding: 0.25em 0.5em 0.25em 0.5em;
font-weight: bold;
}
#nav a:hover {
text-decoration: none;
color: #FFFFFF;
/*background-color: #fdea12; */
}

.title {
    color: #a83930;
    font: bold 1.0em/1.0em verdana, arial, helvetica, sans-serif;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: #a83930 thin solid;
    margin-bottom: 5px;
}
#footer {
/*margin-left: 210px; */
padding: 0 20px 1.8em 10px;
border-top: 1px solid #000000;
clear: both;
}
#footer p {
font: normal 0.8em/0.9em verdana, arial, helvetica, sans-serif;
color: #666;
}
#footer p.left {
float: left;
clear: left;
}
#footer p.right {
float: right;
clear: right;
}
.spacer {
clear: both;
}
dd, dt {
font-size: 0.95em;
}
#mainTitle {
font-size: 2.0em;
font-weight: bold;
visibility: hidden;
}
.pageTitle {
font-size: 1.5em;
font-weight: bold;
}
.itemTitle {
border-bottom: 1px solid #a83930;
font-size: 1.5em;
}
.itemContent {
padding-bottom: 1.8em;
}
.box {
    border: solid 1px #a83930;
}
.boxFloat {
    /* border: solid 1px #a83930; */
    float: left;
}
.boxFloatRight {
    border: solid 1px #a83930;
    float: right;
}
.floatRight {
    /* border: solid 1px #a83930; */
    float: right;
}

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)