How to create multilevel tabbed navigation menus in jsp

I am designing a jsp page. In that i have created tabbed panels in a one level, but our project requirement is multilevel (subtabs under tabs). So i can i do this using below javascript and html code.

so here is html code.

<html>
<body>
    <div id="panel1" style="background-color:transparent;position:relative;width:1000px;height:350px;left:100px;top:100px;">
    <script language="JavaScript" type="text/javascript">
    var pacpanel1=new Array('','','','','','','','','','','','');
    var piacpanel1=new Array('','','','','','','','','','','','');

    </script>
    <div id="panel1panel0" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:12;">
    your JSP code for panel 1</div>
    <div id="panel1tab0" onclick="cjselectTabpanel1(0,pacpanel1,piacpanel1)" title="tab number 1" class="cjdflttbcls" style=" background-color:#d3d3E3;width:90px;height:40px;left:0px;z-index:12;background-image: url('./Images/tabpan.png');background-size:cover;">
    payment </div>
    <div id="panel1panel1" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:11;">
    your JSP code for panel 2</div>
    <div id="panel1tab1"   onclick="cjselectTabpanel1(1,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:91px;z-index:11;background-image: url('./Images/tabpan.png');background-size:cover;">
    <label for="interest_inet" id="label-interest1" onClick="func()">tab2</label></div>
    <div id="panel1panel2" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:10;">
    your JSP code for panel 3</div>
    <div id="panel1tab2" onclick="cjselectTabpanel1(2,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:182px;z-index:10;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab3</div>
    <div id="panel1panel3" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:9;">
    your JSP code for panel 4</div>
    <div id="panel1tab3" onclick="cjselectTabpanel1(3,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:270px;z-index:9;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab4</div>
    <div id="panel1panel4" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:8;">
    your JSP code for panel 5</div>
    <div id="panel1tab4" onclick="cjselectTabpanel1(4,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="width:90px;height:40px;left:360px;z-index:8;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab5</div>
    <div id="panel1panel5" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:7;">
    your JSP code for panel 6</div>
    <div id="panel1tab5" onclick="cjselectTabpanel1(5,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:450px;z-index:7;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab6</div>
    <div id="panel1panel6" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:6;">
    your JSP code for panel 7</div>
    <div id="panel1tab6" onclick="cjselectTabpanel1(6,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:540px;z-index:6;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab7</div>
    <div id="panel1panel7" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:5;">
    your JSP code for panel 8</div>
    <div id="panel1tab7" onclick="cjselectTabpanel1(7,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:630px;z-index:5;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab8</div>
    <div id="panel1panel8" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:4;">
    your JSP code for panel 9</div>
    <div id="panel1tab8" onclick="cjselectTabpanel1(8,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:720px;z-index:4;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab9</div>
    <div id="panel1panel9" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:3;">
    your JSP code for panel 10</div>
    <div id="panel1tab9" onclick="cjselectTabpanel1(9,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:810px;z-index:3;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab10</div>
    <div id="panel1panel10" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:2;">
    your JSP code for panel 11</div>
    <div id="panel1tab10" onclick="cjselectTabpanel1(10,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:900px;z-index:2;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab11</div>
    <div id="panel1panel11" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:1;">
    your JSP code for panel 12</div>
    <div id="panel1tab11" onclick="cjselectTabpanel1(11,pacpanel1,piacpanel1)"  class="cjdflttbcls" style="float:left;width:90px;height:40px;left:990px;z-index:1;background-image: url('./Images/tabpan.png');background-size:cover;">
    tab12</div>
    </div>
</body>
</html>

Here is my javascript code for displaying correspondent tab panels.

<script language="JavaScript" type="text/javascript">
    <!--
    function func()
    {

    function cjselectTabpanel1(n,pac,piac) {
    var panelID='panel1';
    var numDiv=12;
    var panelDiv;
    var tabDiv;

    for(var i=0; i<numDiv; i++) {
    if (document.layers) {
    panelDiv=document.layers[panelID+'panel'+i];
    tabDiv=document.layers[panelID+'tab'+i]; }
    else
    if (document.all) {
    panelDiv=document.all[panelID+'panel'+i];
    tabDiv=document.all[panelID+'tab'+i]; }
    else
    if (document.getElementById) {
    panelDiv=document.getElementById(panelID+'panel'+i);
    tabDiv=document.getElementById(panelID+'tab'+i); }
    z=panelDiv.style.zIndex;
    if (i==n) z=numDiv;
    else z=(numDiv-i);
    panelDiv.style.zIndex=z;
    tabDiv.style.zIndex =z;
    if (pac[i]!='' && i==n) tabDiv.style.backgroundImage='url('+pac[i]+')';
    if (piac[i]!='' && i!=n) tabDiv.style.backgroundImage='url('+piac[i]+')';

    if (i==n) tabDiv.style.backgroundColor='#d3d3E3';
    else      tabDiv.style.backgroundColor='#e8e8e8';
    } }
    //-->
</script>

Here is css for displaying tabs and its panels.

<style type="text/css">

.cjdflttbcls  /*this css for tabs*/
{
    position:absolute; cursor:pointer; font-weight:bold; text-align:center; border:1px;
    border-color:#666633; border-style:outset; background-color:#D3D3e3; border-bottom-style:none;border-bottom-color:#D3D3E3;border-left-style:groove;
    margin:0px; 
}


.cjdfltpnlclss   /*this is for tabs panels*/
{
    position:absolute; border:1px; border-color:1px solid #666699; background-color:#d3d3d3; border-style:solid; left:0px;
    top:40px; margin:0px; padding:6px; 
}

</style>


Source: jsp

Leave a Reply