Printable View
Hey all,
I have been attempting this for some time now...and i haven't been able to achieve it...in VS2008, it has tool box menus on the left and right (see attached picture)...i am trying to replicate this for a asp.net page...but again...i haven't got it nor have a been able to find a page to replicate this...please help!!!
What are you trying to achieve?
Do you want a side menu to pop out from the side of the screen?
Are you good with html, css and javascript? Its not too difficult to construct like a list item for each tab and a corresponding div tag for each slide out menu area. The difficult javascript would be to give the menu div a smooth transitional slideout effect but you could grab that from some site.
Here's a ruffup
Code:<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.tab li {
display:block;
height:100px;
width: 40px;
background-color: grey;
margin: 1px;
}
.menu{
visibility:hidden;
position: absolute;
top: 20px;
left: 100px;
width:120px;
height:400px;
overflow:auto;
border: 1px solid;
background-color: white;
}
</style>
<script type="text/jscript">
function showMenu(menu){
document.getElementById("menu1").style.visibility = "hidden"
document.getElementById("menu2").style.visibility = "hidden"
document.getElementById("menu3").style.visibility = "hidden"
document.getElementById(menu).style.visibility = "visible"
}
function hideMenu(menu){
document.getElementById(menu).style.visibility = "hidden"
}
</script>
</head>
<body>
<ul class="tab">
<li id="tab1" onclick="showMenu('menu1')">Tab 1</li>
<li id="tab2" onclick="showMenu('menu2')">Tab 2</li>
<li id="tab3" onclick="showMenu('menu3')">Tab 3</li>
</ul>
<div class="menu" id="menu1">
<a href="javascript:void(0);" onclick="hideMenu('menu1')">Close X</a>
<h3>Menu 1</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="menu" id="menu2">
<a href="javascript:void(0);" onclick="hideMenu('menu2')">Close X</a>
<h3>Menu 2</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>itemxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
</ul>
</div>
<div class="menu" id="menu3">
<a href="javascript:void(0);" onclick="hideMenu('menu3')">Close X</a>
<h3>Menu 3</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</body>
</html>
Hey,
You might want to have a look at the following:
http://www.asp.net/(S(dfjoah55n4ywsy...ntrol-gallery/
Specifically here:
http://www.asp.net/(S(dfjoah55n4ywsy...px?category=41
Gary