CodeIgniter：如何创建不刷新的菜单

Question

I am working on a website that has a sidebar1, that after clicking on an option in sidebar1 - it opens a sidebar2 right next to it, and after choosing an option from sidebar2 - it opens the relevant view in the rest of the space of the page. I am trying to make it a little bit animated too.

Something like this if you look at the menu: https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png

(the menu can be undisplayed too in my case "hide menu" and get a full page display)

Currenly, I have a header.php view which contains all the head content, and a dashboard.php with the menu and the content part that gets refreshed with all the page whenever clicking on an option.

Because when clicking on an option it runs in the controller the views I want to show:

public function index(){

    $this->load->view('header');
    $this->load->view('dashboard');
    $this->load->view('kas/kas_main');
    $this->load->view('footer');

}

and refreshes everything.

How do I create an interactive menu that doesn't get refreshed when clicking on an option?

I know that wordpress websites do refresh after clicking an option from a menu, is this even recommended?

dashboard.php:

<div class="sidebar">

    <div class="list">

        <ul class="menu">

            <li>
                <span>firs main option</span>
                <ul>

                    <li>
                        <a href="<?php echo base_url();?>kas"><span>option 1</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>exx"><span>option 1</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>weekly_reports"><span>option 1</span></a>
                    </li>


                </ul>
            </li>


            <li>
                <span>second main option</span>
                <ul>

                    <li>
                        <a href="<?php echo base_url();?>mailer-generator"><span> Mailer Generator</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>mailer-generator2"><span> Mailer Generator 2</span></a>
                    </li>

                </ul>
            </li>


        </ul>        


    </div> <!-- END List -->




    <div id="logout">
        <a href='<?php echo base_url()."dashboard/logout" ?>'> Logout </a>
    </div>    



</div> <!-- END sidebar -->

Answer 1

You have to use AJAX to achieve that.

This will prevent the reload of page.

http://www.w3schools.com/ajax/

HTML

<span class='option' data-option='1'>first main option</span>

JS

        $('span.option').click(function(){  
            var option = $(this).attr('data-option');  
            $.ajax({
              url: "main/options",
              type: "POST",
              data: {opt: option},
              dataType: "html",
              success:function(result){
                   $('#content').html(result);
              }
            });
        });

Controller (main/options)

public function option(){

    echo $this->load->view( $_POST['opt'], null, true);

}