Javascript and Linq Menus

Mahak Gupta
May 10, 2010

9.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Javascript Menus:

We create a simple javascript menu like this:

Step 1: First we write the following code in the body tag source page:->

<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="td">
<div id="div1" onmouseover="showdiv()">Home</div>
</td>
</tr>
<tr>
<td class="style5">
<div id="div2" onmouseover="showdiv()" onmouseout="hidediv()">
<table id="tab1" cellpadding="0" cellspacing="0" border="2">
<tr>
<td id="td1" onmouseover="display()" onmouseout="hide()" class="td" align="center" style="display:none;">Home1</td>
</tr>
<tr>
<td id="td2" onmouseover="display1()" onmouseout="hide1()" class="td" align="center" style="display:none;">Home2</td>
</tr>
<tr>
<td id="td3" onmouseover="display2()" onmouseout="hide2()" class="td" align="center" style="display:none;">Home3</td>
</tr>

</table>

</div>

</td>
</tr>

</table>

</form>

We use table in our example for creating a simple menu.In the first td we define the div(div1) for menu(Home) and in the second td we define another div (div2) for level menu.In this div we again create a table for create the level menu. In this example we apply javascript and a little part of stylesheet.

Here we can define the two div one for main menu(div1) and second for the menu which will be show when will me put our mouse over on it (div2).

Note: There is a stylesheet apply on it on the td tag like this:->

.td
{
text-align:center;
background-color:#999999;
width: 129px;
}

and we can apply this stylesheet on our source page like this:->

Step 1.1: First we define the source of the stylesheet like this in the head section of our page(in this case our stylesheet name is:->StyleSheet.css

<link href="StyleSheet.css" type="text/css" rel="Stylesheet" />

Step 1.2: Second we apply this where we want(in this case we apply this on a td tag) like this:->

<td class="td">
<div id="div1" onmouseover="showdiv()">Home</div>
</td>

Step 2: Here we use javascript to show the simple menu.We define it in the head section of the source page like this:->

<script language="javascript" type="text/javascript">

function showdiv() {

document.getElementById('td1').style.display = '';
document.getElementById('td2').style.display = '';
document.getElementById('td3').style.display = '';
}
function hidediv() {

document.getElementById('td1').style.display = 'none';
document.getElementById('td2').style.display = 'none';
document.getElementById('td3').style.display = 'none';

}
function display() {
document.getElementById('td1').style.backgroundColor = 'White';
}
function display1() {
document.getElementById('td2').style.backgroundColor = 'White';
}
function display2() {
document.getElementById('td3').style.backgroundColor = 'White';
}
function hide() {
document.getElementById('td1').style.backgroundColor = '#999999';
}
function hide1() {
document.getElementById('td2').style.backgroundColor = '#999999';
}
function hide2() {
document.getElementById('td3').style.backgroundColor = '#999999';
}

</script>

We create the Sub Menu of the Level Menu in javascript Like this:

Step 1: First we write the following code in the body tag source page:->

<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="td" style="border-style: solid; border-width: thin">
<div id="div1" onmouseover="showdiv()" onmouseout="hidediv()">Home</div>
</td>
</tr>
<tr id="trmain" style="display:none;">
<td class="style5">
<div id="div2" onmouseover="showdiv()" >
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td id="td1" onmouseover="display();hidesubmenu();" onmouseout="hide()" class="style7"
align="center" style="display:none;">Home1</td>

</tr>
<tr>
<td id="td2" onmouseover="display1();showsubmenu();" onmouseout="hide1();" class="style7"
align="center" style="display:none;">          Home2    
>></td>

</tr>
<tr>
<td id="td3" onmouseover="display2();hidesubmenu();" onmouseout="hide2();" class="style7"
align="center" style="display:none;">Home3</td>

</tr>

</table>

</div>

</td>
</tr>

</table>
</div>
</form>
<div id="div3" onmouseout="hidesubmenu()" onmouseover="showsubmenu()" style="position:absolute;left:138px;top:55px;width:100px;height:70px">
<table id="tabsub" style="display:none;" cellpadding="0" cellspacing="0" style="height: 69px" border="2">

<tr>
<td id="td4" onmouseover="display4()" onmouseout="hide4()" class="style7"
align="center" style="display:none;">SubHome1</td>

</tr>
<tr>
<td id="td5" onmouseover="display5()" onmouseout="hide5()" class="style7"
align="center" style="display:none;">SubHome2</td>

</tr>
<tr>
<td id="td6" onmouseover="display6()" onmouseout="hide6()" class="style7"
align="center" style="display:none;">SubHome3</td>

</tr>
</table>
</div></body>

Note: Here we define the third div tag(div3) for sublevelmenu.

Step 2: We can apply this stylesheet on our source page like this:->

Step 2.1: First we define the source of the stylesheet like this in the head section of our page(in this case our stylesheet name is:->StyleSheet.css

<link href="StyleSheet.css" type="text/css" rel="Stylesheet" />

Step 2.2: Second we apply this where we want(in this case we apply this on a td tag) like this:->

<td class="td">
<div id="div1" onmouseover="showdiv()">Home</div>
</td>

Step 3: Here we use javascript to show the simple menu.We define it in the head section of the source page like this:->

<script language="javascript" type="text/javascript">
function showdiv() {

document.getElementById('td1').style.display = '';

document.getElementById('td2').style.display = '';

document.getElementById('td3').style.display = '';
document.getElementById('trmain').style.display = '';

}
function hidediv() {
document.getElementById('td1').style.display = 'none';
document.getElementById('td2').style.display = 'none';
document.getElementById('td3').style.display = 'none';
}
function display() {
document.getElementById('td1').style.backgroundColor = 'White';
}
function display1() {
document.getElementById('td2').style.backgroundColor = 'White';
}
function display2() {
document.getElementById('td3').style.backgroundColor = 'White';
}
function hide() {
document.getElementById('td1').style.backgroundColor = '#999999';
}
function hide1() {
document.getElementById('td2').style.backgroundColor = '#999999';
}
function hide2() {
document.getElementById('td3').style.backgroundColor = '#999999';
}
function showsubmenu() {
document.getElementById('div3').style.display = '';
document.getElementById('td4').style.display = '';
document.getElementById('tabsub').style.display = '';

document.getElementById('td5').style.display = '';

document.getElementById('td6').style.display = '';
}
function hidesubmenu() {
document.getElementById('div3').style.display = 'none';
document.getElementById('td4').style.display = 'none';
document.getElementById('tabsub').style.display = 'none';

document.getElementById('td5').style.display = 'none';

document.getElementById('td6').style.display = 'none';
}

</script>

We create an another javascript menu like this:

Step 1 : First we write the following coding in the body tag source page:->

<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="td" style="border-style: solid; border-width: thin">
<div id="div1" onmouseover="showdiv()" >Home</div>
</td>
<td class="td" onmouseover="showdiv2()" style="border-style: solid; border-width: thin" >
Home2</td>
</tr>
<tr id="trmain" style="display:none;">
<td class="style5" >
<div id="div2" onmouseover="showdiv()" >
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td id="td1" onmouseover="display();hidesubmenu();" onmouseout="hide();hidediv();" class="style7"
align="center" style="display:none;">Home1</td>

</tr>
<tr>
<td id="td2" onmouseover="display1();showsubmenu();" onmouseout="hide1();" class="style7"
align="center" style="display:none;">    Home2 >></td>

</tr>
<tr>
<td id="td3" onmouseover="display2();hidesubmenu();" onmouseout="hide2();hidediv();" class="style7"
align="center" style="display:none;">Home3</td>

</tr>

</table>

</div>

</td>
<td class="style5" valign="top">
<div id="div4" onmouseover="showdiv2()" onmouseout="hidediv2()" >
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td id="td7" onmouseover="secdisplay();" onmouseout="hide7()" class="style7"
align="center" style="display:none;" >Home1</td>

</tr>
<tr>
<td id="td8" onmouseover="secdisplay1();" onmouseout="hide8();" class="style7"
align="center" style="display:none;" >   Home2     </td>

</tr>

</table>

</div>

</td>
</tr>

<tr>
<td id="td4" onmouseover="display4()" onmouseout="hide4()" class="style7"
align="center" style="display:none;">SubHome1</td>

</tr>
<tr>
<td id="td5" onmouseover="display5()" onmouseout="hide5()" class="style7"
align="center" style="display:none;">SubHome2</td>

</tr>
<tr>
<td id="td6" onmouseover="display6()" onmouseout="hide6()" class="style7"
align="center" style="display:none;">SubHome3</td>

</tr>

</table>

Step 2: We can apply this stylesheet on our source page like this:->

Step 2.1: First we define the source of the stylesheet like this in the head section of our page(in this case our stylesheet name is:->StyleSheet.css

<link href="StyleSheet.css" type="text/css" rel="Stylesheet" />

Step 2.2: Second we apply this where we want(in this case we apply this on a td tag) like this:->

<td class="td">
<div id="div1" onmouseover="showdiv()">Home</div>
</td>

Step 3: We can define the javascript functions in this menu like this:->

<script language="javascript" type="text/javascript">
function showdiv() {

document.getElementById('td1').style.display = '';

document.getElementById('td2').style.display = '';

document.getElementById('td3').style.display = '';
document.getElementById('trmain').style.display = '';
}
function showdiv2() {

document.getElementById('td7').style.display = '';
document.getElementById('td8').style.display = '';
}

function hidediv() {

document.getElementById('td1').style.display = 'none';
document.getElementById('td2').style.display = 'none';
document.getElementById('td3').style.display = 'none';

}
function hidediv2() {

document.getElementById('td7').style.display = 'none';
document.getElementById('td8').style.display = 'none';

}
function display() {
document.getElementById('td1').style.backgroundColor = 'White';
document.getElementById('td1').style.fontStyle = 'italic';
}
function secdisplay() {
document.getElementById('td7').style.backgroundColor = 'White';
document.getElementById('td7').style.fontStyle = 'italic';
}
function secdisplay1() {
document.getElementById('td8').style.backgroundColor = 'White';
document.getElementById('td8').style.fontStyle = 'italic';
}

document.getElementById('td6').style.display = '';
}

function hidesubmenu() {
document.getElementById('div3').style.display = 'none';
document.getElementById('td4').style.display = 'none';
document.getElementById('tabsub').style.display = 'none';

document.getElementById('td5').style.display = 'none';

document.getElementById('td6').style.display = 'none';
}

</script>

Linq Menu:

We create a simple linq menu like this:

Step 1: First we write the following code in the body tag of the source page:->

<form id="form1" runat="server">
<div>
<table class="style1" border="2" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="background-color: #666666" onmouseover="showtab()"
class="style2">
Home</td>
</tr>
<tr>
<td id="td1" onmouseover="showtab()" onmouseout="hidetab()" align="center" style="background-color: #666666; display:none;">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</td>
</tr>
</table>
 </div>
<asp:GridView ID="GridView1" runat="server" Visible="False">
</asp:GridView>
</form>

Note: Here we define a literal (Literal1) and a Gridview (GridView1) for get the value from the database.

Step2: In this we apply Javascript in the following way:->

<script language="javascript" type="text/javascript">
function showtab()
{
document.getElementById('td1').style.display='';
}
function hidetab()
{
document.getElementById('td1').style.display='none';
}
</script>

Step 3: Here we define a Linq to sql class named (DataClasses.dbml)

Step4: Now we write the following code in the Page_Load event of the page like this:->

    protected void Page_Load(object sender, EventArgs e)
    {
        query();
        Page.RegisterClientScriptBlock("onmouseover", "<script language='javascript'>function show1(){ document.getElementById('td1').style.background='White';} function hide1(){ document.getElementById('td1').style.background='#666666';} function show2(){ document.getElementById('td2').style.background='White';} function hide2(){ document.getElementById('td2').style.background='#666666';} function show3(){ document.getElementById('td3').style.background='White';} function hide3(){ document.getElementById('td3').style.background='#666666';} function show4(){ document.getElementById('td4').style.background='White';} function hide4(){ document.getElementById('td4').style.background='#666666';}</script>");
        string s1 = "";
        s1 = "<table border=1 width=100%><tr><td id=td1 onmouseover=show1() onmouseout=hide1()><a>";
        s1 += GridView1.Rows[0].Cells[1].Text;
        s1 += "</a></td></tr>";
        s1 += "<tr><td id=td2 onmouseover=show2() onmouseout=hide2()><a>";
        s1 += GridView1.Rows[1].Cells[1].Text;
        s1 += "</a></td></tr>";
        s1 += "<tr><td id=td3 onmouseover=show3() onmouseout=hide3()><a>";
        s1 += GridView1.Rows[2].Cells[1].Text;
        s1 += "</a></td></tr>";
        s1 += "<tr><td id=td4 onmouseover=show4() onmouseout=hide4()><a>";
        s1 += GridView1.Rows[3].Cells[1].Text;
        s1 += "</a></td></tr></table>";
        Literal1.Text = s1.ToString();
    }

private void query()
{
DataClassesDataContext db = new DataClassesDataContext();
var a = from b in db.GetTable<home>() select b;
GridView1.DataSource = a;
GridView1.DataBind();
}

Note: Here we use the Page.RegisterClientScriptBlock because Allows ASP.NET server controls to emit client-side script blocks in the page.In this page we call javascript functions. and a DataContext (DataClassesDataContext) because it is used to manage it's access to the database as well as tracking changes made to entities retrieved from the database.

Menu using a database with the help of SqlDataAdapter:

Step 1: First we write the following code in the body tag of the source page:->

<form id="form1" runat="server">
<div>

</div>
</form>

Step2: We can define the javascript functions in this menu like this:->

<script language="javascript" type="text/javascript">
function showtab()
{
document.getElementById('td1').style.display='';
}
function hidetab()
{
document.getElementById('td1').style.display='none';
}
</script>

Step3: We create a table in database(menu1) name home like this:->

create table home
(
id int identity(1,1),
menuname varchar(30)
)

and after that we can insert the values in this.

Step 4: Now we write the following code in the (page.cs) page event of the page like this:->

Step 4.1: First we write the sqlconnection for this:->

SqlConnection conn1 = new SqlConnection("data source=MA\\SQLEXPRESS;initial catalog=menu1;integrated security=true;");

Step 4.2: Second we write the following code in the Page_Load event like this:->

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.RegisterClientScriptBlock("onmouseover", "<script language='javascript'>function show(){ document.getElementById('td1').style.background='White';} function show1(){ document.getElementById('tr2').style.background='White';} function hide(){ document.getElementById('td1').style.background='#666666';} function hide1(){ document.getElementById('tr2').style.background='#666666';}</script>");

        SqlDataAdapter da1 = new SqlDataAdapter("select * from home", conn1);
        DataSet ds1 = new DataSet();
        da1.Fill(ds1, "home");
        string s1 = "";
        s1 = "<table border=1 width=100%><tr><td id=td1 onmouseover=show() onmouseout=hide()><a>";
        s1 += ds1.Tables["home"].Rows[0][1].ToString();
        s1 += "</a></td></tr>";
        s1 += "<tr id=tr2 onmouseover=show1() onmouseout=hide1()><td ><a>";
        s1 += ds1.Tables["home"].Rows[1][1].ToString();
        s1 += "</a></td></tr></table>";
        Literal1.Text = s1.ToString();
    }

Recommended Free Ebook

Printing in C# Made Easy

Download Now!