Navigation menu where content shows in container php

Question

1.40/5 (2 votes)

See more:

Hi there, this is going to sound really confusing going to try explain it as best as i can :)

I have a navigation menu with the following..

XML

<div class="content">
            <div class="sidebar">
                <div class="sidebar-dropdown"><a href="#">Navigation</a></div>
                <ul id="nav">
                    <li><a href="panel.php" class="open"><i class="icon-home"></i> Dashboard</a>

                    </li>
                    <li class="has_sub"><a href="#"><i class="icon-list-alt"></i> Database  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
                        <ul>
                            <li><a href="widgets1.html">Players</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#"><i class="icon-file-alt"></i> Ranks  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
                        <ul>
                            <li><a href="post.html">Post</a></li>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="register.html">Register</a></li>
                            <li><a href="support.html">Support</a></li>
                            <li><a href="invoice.html">Invoice</a></li>
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="gallery.html">Gallery</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#"><i class="icon-file-alt"></i> Pages #2  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
                        <ul>
                            <li><a href="media.html">Media</a></li>
                            <li><a href="statement.html">Statement</a></li>
                            <li><a href="error.html">Error</a></li>
                            <li><a href="error-log.html">Error Log</a></li>
                            <li><a href="calendar.html">Calendar</a></li>
                            <li><a href="grid.html">Grid</a></li>
                        </ul>
                    </li>
                    <li><a href="charts.html"><i class="icon-bar-chart"></i> Charts</a></li>
                    <li><a href="tables.html"><i class="icon-table"></i> Tables</a></li>
                    <li><a href="forms.html"><i class="icon-tasks"></i> Forms</a></li>
                    <li><a href="ui.html"><i class="icon-magic"></i> User Interface</a></li>
                    <li><a href="calendar.html"><i class="icon-calendar"></i> Calendar</a></li>
                </ul>
            </div>

And i would like to be able to click one link for example "Dashboard" and it must go to my includes file and get the dashboard.php and insert the content in here...

XML

<div class="matter">
                    <div class="container">

                    </div>
                </div>

In the container. but if i click on the other link it must clear container or something and put the include inside of it?

How do i do this?

Posted 17-Dec-13 3:49am

Nico_Travassos

Add a Solution

Comments

Er. Tushar Srivastava 17-Dec-13 9:51am

Are you willing to use jQuery AJAX 'cause then it is going to be only a few lines of Code...

Nico_Travassos 17-Dec-13 10:07am

Yes Sure, is there any problems using ajax and how would i do it?

Er. Tushar Srivastava 17-Dec-13 10:11am

No, Actually I meant that jQuery is going to be very easy for solving this problem... Let me post an answer Give me a little time :)

2 solutions

Solution 3

XML

<div class="mainbar">
                <div class="page-head">
                    <h2 class="pull-left"><i class="icon-home"></i><?php echo " $page" ?></h2>
                    <div class="bread-crumb pull-right">
                        <a href="panel.php"><i class="icon-home"></i> Home</a>
                        <span class="divider">/</span>
                        <a href="#" class="bread-current">Dashboard</a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="matter">
                    <div id="container" class="container">
                        <?php
                            $cnp = $_GET['page'];

                            switch($cnp){
                                case "Dashboard":
                                    include('Pages/dashboard.php');
                                break;


                                default :
                                    include('Pages/dashboard.php');
                                break;
                            }
                        ?>
                    </div>
                </div>
            </div>

Posted 19-Dec-13 0:32am

Nico_Travassos

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Er. Tushar Srivastava · Accepted Answer · 2013-12-17T04:26:00

Solution 1

Hi Friend,

Here's a simple solution using jQuery.

HTML

<!-- Inside the HEAD TAG : Youu have to change the jQuery path correctly -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   // When any link inside the ul#nav li is clicked, this event will be called and the callback function inside it is executed
   $("#nav li a").click(function(){
       // We will be using AJAX to get the data from includes/ folder (Since you have named all the links as their filename so it is
       // going to be easy
       var link = "includes/" + $(this).text().toLowerCase() + ".php";

       // Now we will load the content in div#container
       $("#container").load(link);
       // Very Important next step 
       return false;
    });
 });
</script>

The above code will surely solve the problem. Just in case, it may need debugging 'cause I didn't test it right now.

Hope that it helps :)

With Regards
Tushar Srivastava

Posted 17-Dec-13 4:26am

Er. Tushar Srivastava

Updated 17-Dec-13 4:27am

v2

Comments

Nico_Travassos 17-Dec-13 12:07pm

hey man can i place this in my <head> ? and leave my container blank will it pick it up and will it pick up if it is a php file?

Er. Tushar Srivastava 17-Dec-13 12:50pm

Absolutely Try it and tell me if it is not working as an expected :)

Nico_Travassos 17-Dec-13 15:03pm

it does not work it takes me to my dashboard page

Er. Tushar Srivastava 17-Dec-13 23:41pm

Have you added the return false; line? It will stop the main event from firing. Btw I will check it after about 3 hrs 'cause I have to leave at the moment.

Nico_Travassos 18-Dec-13 0:15am

i have added the return false

Nico_Travassos 18-Dec-13 0:16am

Can i maybe email you my code and you can add it and test on it?

Er. Tushar Srivastava 18-Dec-13 5:02am

Alright mail me.... Here's my email id razieldecarte<at>gmail<dot>com

Nico_Travassos 18-Dec-13 2:54am

Hey man quick question in the nav what must i put in the href if im using this jquery script

Er. Tushar Srivastava 18-Dec-13 5:04am

My code actually looks at what's in between the tags i.e. {ME} . So, it doesn't matter what you have put in href

Er. Tushar Srivastava 18-Dec-13 5:09am

Send me the code... I need to reformat a few things and then everything will work :)