Tool Bar like VS 2008

**rrrctraptor31** · Feb 7th, 2010, 10:35 PM

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!!!

**Fishcake** · Feb 7th, 2010, 11:38 PM

What are you trying to achieve?

Do you want a side menu to pop out from the side of the screen?

**brin351** · Feb 7th, 2010, 11:50 PM

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>

**gep13** · Feb 8th, 2010, 03:03 AM

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

Thread: Tool Bar like VS 2008

Thread Tools

Display

Tool Bar like VS 2008

Re: Tool Bar like VS 2008

Re: Tool Bar like VS 2008

Re: Tool Bar like VS 2008

Posting Permissions