Responsive ajax based drop down menu with Twitter bootstrap, Jquery, MySQL and PHP

Hi everybody, Now we are going to learn about implementation of ajax based responsive mega menu because  a lot of people’s struct to create ajax based mega menu with Twitter bootstrap. This type of menu quitly useful for e-commerce and news/magazines based websites to display contents very fast . Exp:  mahsable.com. So we are going to implement mahsable like responsive ajax based drop down menu.

Responsive mashable style ajax drop down menu

Responsive mashable style ajax drop down menu

For this tutorial i have used

  • Twitter Bootstrap 3
  • Jquery & Ajax
  • JSON Response
  • PHP
  • MySQL
  • For the mega menu i used yamm.

Ok. In this tutorial i have used two tables like  posts  and  categories

categories table structure:

category-table

I have created just simple categories table and it has two fields one is id (primary) and another one is name(category name)

 

posts table structure:

posts-table

posts table consist of 5 fields like id,  title(Post title), url(Post url), image(Post thumb url), category_id(Post category). category_id is used to sort the post based on user category selection.

I have followed this table structure and i have used some Jquery code to make ajax request whenever user hover or select the categories.

Ajax call to categories.php file to get the post lists based on category.

Jquery Code:

 index.html

CSS:

categories.php

In this php file we will get the post from posts table and sent it as JSON response to the request. Here i have added query to get post by category. I have used PDO to intract with MySQL database because it overcomes the SQL injection.

Also i have given live demo and download option. Don’t forgot to share and subscribe for my latest updates..

Thank you….
Demo and Download