Ste 3: Code description:
menu.css
body
{
background-color:Gray;
}
/*-- This is main div */
#div1
{
position: absolute; width: 400px; height: 200px; background-color:#FEFDDE;
overflow:auto;
z-index: 1; left: 190px; top:50px; border: 2px solid #000080;
padding-left: 4px; padding-right: 4px; padding-top: 1px;
padding-bottom: 1px;
}
/* this is left bar with */
#menu
{
padding: 1px 10px;
position: absolute; width: 150px; height: 200px; z-index: 2;
left: 10px; top:50px; border: 2px solid #000080;
background-color: #DDFDFF;
}
a
{
color:Navy; font-weight: bold; text-decoration: underline;
}
Default.aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_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 id="Head1" runat="server">
<title>mm.AjaxExtension : asp:ScriptManager</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<!--
you need script manager to use JavaScript
-->
<asp:ScriptManager runat="server"
ID="ScriptManager1">
</asp:ScriptManager>
<script type="text/javascript">
function buildAString(title){
var headTagStart = "<head>";
var str;
var headTagEnd = "</head>";
var titleTagStart = "<title>";
var titleTagEnd = "</title>";
var doc1 = document.getElementById("div1");
var sb = new Sys.StringBuilder(this.x);
str = headTagStart + titleTagStart + title + titleTagEnd +
headTagEnd;
sb.append(titleTagEnd);
sb.append(title);
sb.append(titleTagEnd);
sb.append(headTagEnd);
// Displays: "The result: <head><title>A Title</title></head>"
alert("The result" + sb.toString());
doc1.innerHTML += str.toString() + " <br/>The result : " +
sb.toString();
}
var title = "JavaScript with asp:ScriptManager";
buildAString(title);
</script><br/>
<a onclick="javascript: buildAString('<br/> Add more words');">
Click Me </a><br /><hr />
</div>
</form>
</body>
</html>