This time let's hit to create a Vertical Tab like the tab control in http://www.microsoft.com/. Have you seen the bottom tab content navigation in Microsoft home page http://www.microsoft.com/?
If you used TabContainer before, you must have thought it is really a vertical TabContainer. Now, we get to start from Zero, to create one by css and JavaScript.
See the line in the left section of image, it seems to be faded out and it's like a tail to the end. To achieve this, we have to prepare several images for it. The rest things are simple. (Just create some div in related sections)
Check the below code:
HTML:
<head runat="server">
<title></title>
<link href="AutoReport.css" rel="stylesheet" type="text/css" />
<script src="AutoReport.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divAdmin">
<div id="divAdmin_Content">
<div id="divAdmin_LeftMenu">
<div id="li-toptail">
</div>
<div id="liManager_User" onmouseover="HighLight_Li('liManager_User','liAdd_User','divManager_User','divAdd_User');">
Member</div>
<div id="liAdd_User" onmouseover="HighLight_Li('liAdd_User','liManager_User','divAdd_User','divManager_User');">
Add User</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div id="li-bottomtail">
</div>
</div>
<div id="divAdmin_RightView">
<div id="divManager_User">this is panel1
</div>
<div id="divAdd_User">this is panel2
</div>
</div>
</div>
</div>
</form>
</body>
<title></title>
<link href="AutoReport.css" rel="stylesheet" type="text/css" />
<script src="AutoReport.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divAdmin">
<div id="divAdmin_Content">
<div id="divAdmin_LeftMenu">
<div id="li-toptail">
</div>
<div id="liManager_User" onmouseover="HighLight_Li('liManager_User','liAdd_User','divManager_User','divAdd_User');">
Member</div>
<div id="liAdd_User" onmouseover="HighLight_Li('liAdd_User','liManager_User','divAdd_User','divManager_User');">
Add User</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div class="li">
</div>
<div id="li-bottomtail">
</div>
</div>
<div id="divAdmin_RightView">
<div id="divManager_User">this is panel1
</div>
<div id="divAdd_User">this is panel2
</div>
</div>
</div>
</div>
</form>
</body>
AutoReport.css
body
{
/*font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;*/
font-family:Tahoma,Verdana,Segoe,sans-serif;
font-size: 12px;
text-align: center;
color: #666;
}
/*Admin*/
#divAdmin
{
width: 550px;
}
#divAdmin_Header
{
padding: 5px;
background: url(Images/sprite.png) repeat-x 0px 0px;
height: 22px;
border: thin solid #D6D6C0;
text-align: right;
color: #666666;
}
#divAdmin_Content
{
}
#divAdmin_LeftMenu
{
float:left;
height: 350px;
width: 86px;
background-image: url('Images/leftmenu.png');
border-left-width: thin;
border-left-style: solid;
border-left-color: #CFCFCF;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #CFCFCF;
}
#divAdmin_RightView
{
float: left;
background-color: #EEEEEE;
width: 460px;
height: 350px;
border-right-width: thin;
border-right-style: solid;
border-right-color: #CFCFCF;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #CFCFCF;
}
.li
{
height: 30px;
width: 86px;
background-image: url('Images/leftmenu-line.png') ;
}
#li-toptail
{
background-image: url('Images/leftmenu-toptail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#li-bottomtail
{
background-image: url('Images/leftmenu-bottomtail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#divManager_User
{
padding-left:80px;
display:block;
text-align:left;
padding-top: 5px;
}
#divAdd_User
{
padding-left:80px;
display:none;
text-align:left;
padding-top: 5px;
}
#liManager_User
{
background-image: url('Images/leftmenu-litail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#liAdd_User
{
background-image: url(Images/leftmenu-line.png) ;
height: 30px;
list-style-type:none;
width: 86px;
}
{
/*font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;*/
font-family:Tahoma,Verdana,Segoe,sans-serif;
font-size: 12px;
text-align: center;
color: #666;
}
/*Admin*/
#divAdmin
{
width: 550px;
}
#divAdmin_Header
{
padding: 5px;
background: url(Images/sprite.png) repeat-x 0px 0px;
height: 22px;
border: thin solid #D6D6C0;
text-align: right;
color: #666666;
}
#divAdmin_Content
{
}
#divAdmin_LeftMenu
{
float:left;
height: 350px;
width: 86px;
background-image: url('Images/leftmenu.png');
border-left-width: thin;
border-left-style: solid;
border-left-color: #CFCFCF;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #CFCFCF;
}
#divAdmin_RightView
{
float: left;
background-color: #EEEEEE;
width: 460px;
height: 350px;
border-right-width: thin;
border-right-style: solid;
border-right-color: #CFCFCF;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #CFCFCF;
}
.li
{
height: 30px;
width: 86px;
background-image: url('Images/leftmenu-line.png') ;
}
#li-toptail
{
background-image: url('Images/leftmenu-toptail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#li-bottomtail
{
background-image: url('Images/leftmenu-bottomtail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#divManager_User
{
padding-left:80px;
display:block;
text-align:left;
padding-top: 5px;
}
#divAdd_User
{
padding-left:80px;
display:none;
text-align:left;
padding-top: 5px;
}
#liManager_User
{
background-image: url('Images/leftmenu-litail.png') ;
height: 30px;
list-style-type:none;
width: 86px;
}
#liAdd_User
{
background-image: url(Images/leftmenu-line.png) ;
height: 30px;
list-style-type:none;
width: 86px;
}
AutoReport.js
/*leftmenu onmouseover*/
function HighLight_Li(HighLight_Li,LowLight_Li,Display_div,Hidden_div)
{
document.getElementById(HighLight_Li).style.backgroundImage='url(Images/leftmenu-litail.png)';
document.getElementById(LowLight_Li).style.backgroundImage='url(Images/leftmenu-line.png)';
document.getElementById(Display_div).style.display='block';
document.getElementById(Hidden_div).style.display='none';
}
function HighLight_Li(HighLight_Li,LowLight_Li,Display_div,Hidden_div)
{
document.getElementById(HighLight_Li).style.backgroundImage='url(Images/leftmenu-litail.png)';
document.getElementById(LowLight_Li).style.backgroundImage='url(Images/leftmenu-line.png)';
document.getElementById(Display_div).style.display='block';
document.getElementById(Hidden_div).style.display='none';
}
Several images need to download, and please put them in Image folder:
leftmenu-toptail.png
leftmenu-litail.png
leftmenu-line.png
leftmenu-bottomtail.png
leftmenu.png
sprite.png
9 comments:
hum... I would know if all the content is loaded once ?
For exemple : if on "add user" we have 30 pics.
Are they loaded on the first load of the page ?
If you enable the cache on client, it will be saved in temporary folder, and load in first time.
I would know if all the content is loaded once ?
___________________
Vince
Your movies on demand
It sounds we have the same name, lol.
Yes, it will be loaded once time and put them in client cache.
thanx bro i've been looking for this for a long time cheers!!!!
vince can u through more light on how i can create my own Microsoft website type tab the css and js look a bit complex.thanx
To Fawzy:
Js's just used to swith the active tab. You can custom the css and js. Even you can create it with scriptcontrol in asp.net ajax.
Can you please tell me how can I add a dropdown menu to a tab?
vince how do i create more tabs. thanks
Post a Comment