CODEWITHSUNDEEP
javascriptphpjquerymenu
Raghav Motwani
Raghav Motwani

Reputation: 169

Implementing menu bar using Javascript/Jquery/PHP

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.

Upvotes: 1

Views: 497

Answers (2)

Dimitar Stoyanov
Dimitar Stoyanov

Reputation: 349

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>

Upvotes: 2

vijayP
vijayP

Reputation: 11512

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.

Upvotes: 2

Related Questions