+ Start a Discussion
Sai Ram ASai Ram A 

Static pages navigation - Treeview in left panel. Urgent Requirement

I have a set of static vf pages . 

Creating a Page with left and Right panel.   

 

Trying to achieve this kind of functionality. Left panel should be static  (collapse when clicked on category - my personal settings in image) , when we click on link Appropriate page should appear in right panel.

Quick reply is much appreciated. 

 

 

image 

 

 

 

 

<apex:page sidebar="false">

 

<style type="text/css">

    #maindiv {

        width:100%;

        height:100%;

        padding-left:1%;

        float:left;

        }

   

    #leftPanel {

        padding-left:8%;

        font-size:18px;

        font-weight:bold;

        font-family:GE inspira;

        color:#33CCFF;

     //   text-decoration:none;

    }

</style>


<apex:form >

<div id="maindiv" >
<apex:pageBlock >
<table width="100%" border="1" >
<tr>
<td width="25%" >
<div id="leftPanel" width="18">
<br/>
<ul>
<apex:pageBlockSection title="title 1" >

<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content1" >A</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content2" >B</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content3" >C</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content4" >D</apex:outputLink><br/></li><br/>
</apex:pageBlockSection>


<apex:pageBlockSection title="Title 2">
<apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content5" >E</apex:outputLink><br/><br/>
<apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content6" >F</apex:outputLink><br/><br/>
 </apex:pageBlockSection>
</ul>
</div>
</td>

 <td  >

</td>
</tr>
</table>
</apex:pageBlock>
</div>


 </apex:form>


</apex:page>

 

 

 

 

 

 

 

 

 

 

image