In this article i will explain how to create a menu dynamically using jquery. The menu will create after click event of a button.
<%@ 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 runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<div id="htmltabs">
</div>
<style type="text/css">
ul#tab
{
margin: 0;
padding-left: 10px;
list-style-type: none;
background-image: url[ 'http://www.galaxyfinishingschool.com/images/coursepic-dotnet.jpg' ];
}
ul#tab li
{
display: inline;
padding-left: 10px;
text-decoration: none;
}
a
{
text-decoration: none;
background-color: Gray;
font-size: 20px;
color: White;
}
</style>
<script type="text/jscript">
$(document).ready(function () {
$("#btnTest").click(function () {
var str1 = '<span>srinu</span>';
var str = '<ul id="tab"><li ><a href="http://dotnettutorialblog.blogspot.in/">Dot Net Blog</a></li><li ><a href="https://www.google.co.in/" >GooGle</a></li><li ><a href="https://www.yahoo.com/" >Yahoo</a></ul>';
$("#htmltabs").html(str);
$("#btnTest").css("display", "none");
});
});
</script>
<input type="button" id="btnTest" value="Get Menu" />
</form>
</body>
</html>
<!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></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<div id="htmltabs">
</div>
<style type="text/css">
ul#tab
{
margin: 0;
padding-left: 10px;
list-style-type: none;
background-image: url[ 'http://www.galaxyfinishingschool.com/images/coursepic-dotnet.jpg' ];
}
ul#tab li
{
display: inline;
padding-left: 10px;
text-decoration: none;
}
a
{
text-decoration: none;
background-color: Gray;
font-size: 20px;
color: White;
}
</style>
<script type="text/jscript">
$(document).ready(function () {
$("#btnTest").click(function () {
var str1 = '<span>srinu</span>';
var str = '<ul id="tab"><li ><a href="http://dotnettutorialblog.blogspot.in/">Dot Net Blog</a></li><li ><a href="https://www.google.co.in/" >GooGle</a></li><li ><a href="https://www.yahoo.com/" >Yahoo</a></ul>';
$("#htmltabs").html(str);
$("#btnTest").css("display", "none");
});
});
</script>
<input type="button" id="btnTest" value="Get Menu" />
</form>
</body>
</html>
No comments:
Post a Comment