How to make a simple navigator - content menu - php

Question

Attached is the code snippet of my navigator
<!-- Navigator -->
<div style="position:abolute;top:50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company</li>
<li><a style="color:black" href="#"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
<li><a style="color:black" href="#"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
<li><a style="color:black" href="#"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
<li><a style="color:black" href="#">Careers</a></li>
<li><a style="color:black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
</ul>
</div>
</div>
</div>
<!-- Content -->
I am actually trying to put a logic that whenever I click on a link , it should renderPartial the appropriate file and also highlight the menu below the navigator.. I tried doing the following <a href="<?php $this->renderPartial("company",false); ?>"
But I guess it is not the right way.. dunno how can I achieve it?

Answer 1

This will go into your view file
<!-- Navigator -->
<div style="position:abolute;top:50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company</li>
<li><a onclick="showData('user')" style="color:black" href="#"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
<li><a style="color:black" href="#"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
<li><a style="color:black" href="#"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
<li><a style="color:black" href="#">Careers</a></li>
<li><a style="color:black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="main-content">
<div id="company" class="renderContent">
<?php $this->renderPartial("company",false); ?>
</div>
<div id="user" class="renderContent">
<?php $this->renderPartial("user",false); ?>
</div>
<!--- for every menu item there should be a view rendered here--->
</div>
<!-- Content -->
this will go into your js
function showData(id) {
$('.renderContent').hide();
$('.nav li').removeClass('active');
$(this).addClass('active');
$('#'+id).show();
}
$('.renderContent').hide();