Nav bar (Menu) with includes

Question

I have this problem:

I want make one navigation menu with tabs, where when I click the element stays selected. But at the same time, I want to have one page called index.php per example, with the HEADER (Menu, logo, etc.), FOOTER and in the body a ID DIV that load the content from other pages (images.php, articles.php, about.php, etc.)

Well I had tried make it with jQuery and it works but the content show many errors because, these contents depends on a database ( MySQL ) and all the functions with its variables is in the index.php .

The menu:

<li><a href="index.php?pag=1&lang=<?php echo $lang;?>"><?php echo $ent;?></a></li>
<li><a href="index.php?pag=2&lang=<?php echo $lang;?>"><?php echo $lis;?></a></li>

The jQuery:

$(document).ready(function(){
    var elemento = $('#menu ul > li');
    var atributo = $(this).attr('class');
    $(elemento).click(function(){
        //$('#cuerpo').load('1.php');
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
        //alert("Ha salido bien");
    });

});

The PHP code:

<div id="cuerpo">
 <?php

 switch($_GET['pag']){
    case 1:
    echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
    include '1.php';

    break;

    case 2:
    echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
    include '2.php';
    break;

    default:
    include '1.php';
    break;
 }

 ?>

</div>

Anyway the CSS class "selected" its losing when i make click. Any idea? Thanks a lot!

Answer 1

From what I think you are asking you want to have a single page that has a content div that loads different content based on how which menu item you select. One, prepackaged way to do this is to use jquery ui tabs which you can find here .

A way to do it yourself will result in a similar page but will be with your own code. I will outline for it here and if you would like further details you can let me know.

1. First, you will make some kind of menu item that involves some kind of element. An example of this would be to use a list.

    <ul> <li id="one">Link 1</li> <li id="two">Link 2</li> <li id="three">Link 3</li> </ul> 

2. Next you will use jquery to bind click events to the list items. Here is an example.

    $('#li_id').click(function (e) { $('#contentDiv').empty(); //empty div in case content from other tabs exists //load your ajax content here $.ajax(); //remove selected class from other li that might have it. $('li.selected').removeClass('selected') $(this).attr("class", "selected"); //set li class to show selected styling } 

After this all you have to do is add a css entry for your selected class so that it is styled how you want.

If you have any further questions or need more elaboration please let me know.

Answer 2

Clicking an element and having it stay 'selected' can be done with CSS styling, using a 'selected' class. First remove the 'selected' class from all elements, to remove styling from any element that was previously selected:

 $('nav').children('.selected').attr('className','');

and then 'select' the item that was just clicked

 $(this).attr('className','selected');

Answer 3

Okay this has all sorts of different facets to consider/approach.

If you want to continue doing this through jQuery you need to use AJAX posts to call php pages that load your data from the database then send it back to your jQuery code through a JSON request (it does this for you) then you just make the results display where you want. You can find out how to do this easily by searching for AJAX Post on this site or even in google. There are lots of very easy tutorials for this method.

If you are loading your navigation from a database then making it selected won't be very hard. If you are not then you will need to use javascript/jQuery to add the css in afterwards.

Using just PHP and html: What I normally do to achieve a similar result to what I think you're asking about is to append variables to the URL and then use $_GET[variable_name] to use these variable to search for the data that I need to load from the database, like an article's ID or a date range.

For a very crude example:

<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>

when a user clicks on that link it reloads the page then in your php file you use:

$articleID = $_GET[articleID];
$navLlink = $_GET[navlinkclicked];
$query = "_write your query code to pull up the article with that $articleID_";

Then just echo out your results in your main content area of the page, instead of loading the original content that was there first.

Assuming you are pulling your navigation links from your database, when you are getting the nav links, check if the nav link has the same name as $navLlink taken from the top then add a class to that link while it's being echoed out during the while loop, using an if statement:

if($thisnavitem == $navLlink){
    echo "<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode' class='selectedNave'>"
} else {
    <a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
}

I hope this helps. This can be elaborated on so much more but this should be a good start