Implementing menu bar using Javascript/Jquery/PHP

Question

I am trying to build a website with some basic functioning. I have added a navigation bar on the top->

<nav>
        <ul>
            <a href="#"><li>Create Member</li></a>
            <a href="#"><li>Notifications</li></a>
            <a href="#"><li>Edit Records</li></a> 
            <link rel="stylesheet" href="index.css">
        </ul>

        <div class="handle">Menu</div>
    </nav>
    <section>
    </section>

Now in the main area , which should be initially empty, I wish it to display content according to menu selected from the navigation bar. For example for Create Member it should display a form; for notification it should display some message.

Can anyone guide me how should I do that.I have some understanding of Javascript and JQuery.

vijayP · Accepted Answer · 2015-11-01 11:18:44Z

You can go for jquery ajax for such scenarios. You can take an idea from below code.

The idea is to have a unique class in each menu link and will have a required URL in data-url attribute of it. Then on click of them we will call a javascript function which will look into data-url attr of clicked link and will make ajax call with that url to fill the main area as follows:

HTML Code:

<nav>
        <ul>
            <a href="#"><li class="menulink" data-url="/nav/createMember">Create Member</li></a>
            <a href="#"><li class="menulink" data-url="/nav/notifications">Notifications</li></a>
            <a href="#"><li class="menulink" data-url="/nav/editRecord">Edit Records</li></a> 
            <link rel="stylesheet" href="index.css">
        </ul>

        <div class="handle">Menu</div>
</nav>
<div class="mainsection">
</div>

JQuery Code:

$(document).ready(function(){
    $("li.menulink").click(function(){
        var url = $(this).data("url"); //fetch the URL from data-url attr

        //make the jquery ajax get call to load the newer contents
        $.get(url, function(data, status){
            $(".mainsection").empty().html(data);
        });
    });
});

Hope this will help you a bit.

Dimitar Stoyanov · Accepted Answer · 2015-11-01 11:24:16Z

2

A simple decision of this is to add hidden fields in the main section ..for example If you have }

 <a href="#" id="create-member">   
 <!-- Hide the span -->
 <style>
     #create-member-info {display: none;}
 </style>

 <section>
     <span id="create-member-info">Information here</span>
 </section>

<script>
     $(document).ready(function(){

          $('ul a').click(function(){

                var elementToDisplay = $(this).attr('id');
                $('#'+elementToDisplay+"-info").show();

          });

     });

</script>

This is some really basic example of implementing this functionality. If you want further assistance just write :)

Another option is to manually append/prepend the additional information elements in the jQuery code

 jQuery(document).ready(function(){

      $('section').append('<span>Additional Information here</span>');        

 });

You have to thing about hiding this fields for example on click of another element. You can add the same class to all elements..Example

  <span class="to-hide"></span>

  jQuery(document).ready(function(){

      $('.to-hide').hide();
      $('section').append('<span class="to-hide">Additional information here</span>');


  });

For ajax you can create a new file data.php where your db data is being get and returned. Then

<script>

     $(function(){
         $.get("data.php", function(data){

             $('section').append(data (html formed before that ::)));

         });
     });

</script>

edited Nov 1, 2015 at 11:24

answered Nov 1, 2015 at 11:10

Dimitar Stoyanov

3491 silver badge7 bronze badges

3 Comments

Raghav Motwani Over a year ago

what would be better to use? Above approach or AJAX, considering that I have to display data that I will retrieve from server.

Dimitar Stoyanov Over a year ago

Yes it is a good approach to use ajax functionality an as a callback function of this ajax a PHP Function where the DB data getting is done

Dimitar Stoyanov Over a year ago

Check this out for more clearance: w3schools.com/php/php_ajax_php.asp labs.jonsuh.com/jquery-ajax-php-json

Collectives™ on Stack Overflow

Implementing menu bar using Javascript/Jquery/PHP

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related