Post
Ask Question

Create Custom Navigation Structure Using C# And .NET In Addition To JS

Today we will create a navigation stucture, using JavaScript, C and #.NET.

While developing Web parts, I got one new requirement to create navigation/tab structure, using C#.

The steps are given below to create it.
  1. Open Visual Studio -> create an empty project -> add Visual Web part.
  2. Open ->ascx file. In this file, we need to add div as follows. (it may vary according to the project requirement).
    1. <div id="divmain">  
    2.     <div id="divNavigation">  
    3.         <div id="divtab1" onclick="hideshow(this.id);" class="navigation"> Home </div>  
    4.         <div id="divtab2" onclick="hideshow(this.id);" class="navigation">HR </div>  
    5.         <div id="divtab3" onclick="hideshow(this.id);" class="navigation">IT </div>  
    6.         <div id="divtab4" onclick="hideshow(this.id);" class="navigation">Contact US </div>  
    7.         <div id="divtab5" onclick="hideshow(this.id);" class="navigation">Questions </div>  
    8.     </div>  
    9.     <div id="divContent">  
    10.         <div id="HomeContent">  
    11.             <div> Add ur Content for home page </div>  
    12.         </div>  
    13.         <div id="HRContent" style="display:none">  
    14.             <div> Add ur Content for HR page </div>  
    15.         </div>  
    16.         <div id="ITContent" style="display:none">  
    17.             <div> Add ur Content for IT page </div>  
    18.         </div>  
    19.         <div id="ContactContent" style="display:none">  
    20.             <div> Add ur Content for Contact page </div>  
    21.         </div>  
    22.         <div id="QuestionsContent" style="display:none">  
    23.             <div> Add ur Content for Questions page </div>  
    24.         </div>  
    25.     </div>  
    26. </div>  
  3. Add CSS given below to get the look and feel of tab structure.
    1. <style>  
    2.     .navigation {  
    3.         width: 80px;  
    4.         height: 10px;  
    5.         background: burlywood;  
    6.         padding: 14px;  
    7.         margin-bottom: 20px;  
    8.         border: 1px solid white;  
    9.         font-weight: bold;  
    10.         cursor: pointer;  
    11.     }  
    12.   
    13.     div#divNavigation {  
    14.         display: flex;  
    15.     }  
    16. </style>  
  4. Add JavaScript given below to hide show div based on the clicked tab.
    1. <script type="text/javascript">  
    2.     function hideshow(elmt) {  
    3.         if (elmt == "divtab1") {  
    4.             $("#HomeContent").show();  
    5.             $("#HRContent").hide();  
    6.             $("#ITContent").hide();  
    7.             $("#ContactContent").hide();  
    8.             $("#QuestionsContent").hide();  
    9.         } else if (elmt == "divtab2") {  
    10.             $("#HomeContent").hide();  
    11.             $("#HRContent").show();  
    12.             $("#ITContent").hide();  
    13.             $("#ContactContent").hide();  
    14.             $("#QuestionsContent").hide();  
    15.         } else if (elmt == "divtab3") {  
    16.             $("#HomeContent").hide();  
    17.             $("#HRContent").hide();  
    18.             $("#ITContent").show();  
    19.             $("#ContactContent").hide();  
    20.             $("#QuestionsContent").hide();  
    21.         } else if (elmt == "divtab4") {  
    22.             $("#HomeContent").hide();  
    23.             $("#HRContent").hide();  
    24.             $("#ITContent").hide();  
    25.             $("#ContactContent").show();  
    26.             $("#QuestionsContent").hide();  
    27.         } else if (elmt == "divtab5") {  
    28.             $("#HomeContent").hide();  
    29.             $("#HRContent").hide();  
    30.             $("#ITContent").hide();  
    31.             $("#ContactContent").hide();  
    32.             $("#QuestionsContent").show();  
    33.         }  
    34.     }  
    35. </script>  
    The script is very easy. You need to change the div contents and its data according to your requirement.

  5. Build and deploy the project.

  6. Create one Web part page and in Web part given above, you will see the tab structure, as shown below.