Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery.
Download Script 
Live DemoDatabase
Sample database categories table contains four columns cat_id, name, paren and media.
CREATE TABLE `categories`
(
`cat_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(150) ,
`parent` int(11) ,
`media` varchar(100),
PRIMARY KEY (`cat_id`)
);
(
`cat_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(150) ,
`parent` int(11) ,
`media` varchar(100),
PRIMARY KEY (`cat_id`)
);
Category and Subcategory data stores like this format.
categories.php
Contains PHP code generating JSON data out from categories table.
<?php
include('db.php');
$sql = mysqli_query($db,"select cat_id,name,media from categories where parent=0");
// parent categories node
$categories = array("Categories" => array());
while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC))
{
$cat_id = $row['cat_id'];
$ssql = mysqli_query($db,"select cat_id,name,media from categories where parent='$cat_id'");
// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["name"] = $row["name"];
$category["media"] = $row["media"];
$category["sub_categories"] = array(); // subcategories again an array
while ($srow = mysqli_fetch_array($ssql,MYSQLI_ASSOC))
{
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["name"] = $srow['name'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}
// pushing sinlge category into parent
array_push($categories["Categories"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
?>
include('db.php');
$sql = mysqli_query($db,"select cat_id,name,media from categories where parent=0");
// parent categories node
$categories = array("Categories" => array());
while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC))
{
$cat_id = $row['cat_id'];
$ssql = mysqli_query($db,"select cat_id,name,media from categories where parent='$cat_id'");
// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["name"] = $row["name"];
$category["media"] = $row["media"];
$category["sub_categories"] = array(); // subcategories again an array
while ($srow = mysqli_fetch_array($ssql,MYSQLI_ASSOC))
{
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["name"] = $srow['name'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}
// pushing sinlge category into parent
array_push($categories["Categories"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
?>
JSON Output
JavaScript & HTML
Now the most important part, reading the above JSON data using $.getJSON method and appending category data into UL #menu_ul. Subcategory data storing into hidden UL class hideul
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categories, function(i, category)
{
var subjsondata='';
$.each(category.sub_categories, function(i, sub_categories)
{
subjsondata += "<li>"+sub_categories.name+"</li>";
});
var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul>
</li>";
$(jsondata).appendTo("#menu_ul");
});
}
);
//MouseOver on Categories
$(".category").live('mouseover',function(event)
{
$("#menu_slider").show();
var D=$(this).html();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
var M=$("#hide"+id).attr("media");
$("#submenu_ul").html(V);
$("#menu_slider h3").html(D);
//Background Image Check
if(M!='null')
{
$("#menu_slider").css({"width": "450px"});
}
else
{
$("#menu_slider").css({"width": "250px"});
}
$("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');
});
//Document Click
$(document).mouseup(function()
{
$("#menu_slider").hide();
});
//Mouse click on sub menu
$("#menu_slider").mouseup(function(){ return false });
//Mouse click on my account link
$("#menu_box").mouseup(function(){ return false });
});
</script>
$(".category").live('mouseover',function(event){}- category is the class name of category li tag. Using element.attr("id") calling category li value, based on the ID moving class .hideul subcategory values into $("#submenu_ul").html(V) ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categories, function(i, category)
{
var subjsondata='';
$.each(category.sub_categories, function(i, sub_categories)
{
subjsondata += "<li>"+sub_categories.name+"</li>";
});
var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul>
</li>";
$(jsondata).appendTo("#menu_ul");
});
}
);
//MouseOver on Categories
$(".category").live('mouseover',function(event)
{
$("#menu_slider").show();
var D=$(this).html();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
var M=$("#hide"+id).attr("media");
$("#submenu_ul").html(V);
$("#menu_slider h3").html(D);
//Background Image Check
if(M!='null')
{
$("#menu_slider").css({"width": "450px"});
}
else
{
$("#menu_slider").css({"width": "250px"});
}
$("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');
});
//Document Click
$(document).mouseup(function()
{
$("#menu_slider").hide();
});
//Mouse click on sub menu
$("#menu_slider").mouseup(function(){ return false });
//Mouse click on my account link
$("#menu_box").mouseup(function(){ return false });
});
</script>
HTML Code
//HTML Code
<div id='menu_box' class='shadow'>
<ul id='menu_ul'></ul>
</div>
<div id='menu_slider'>
<h3></h3>
<ul id='submenu_ul'></ul>
</div>
<div id='menu_box' class='shadow'>
<ul id='menu_ul'></ul>
</div>
<div id='menu_slider'>
<h3></h3>
<ul id='submenu_ul'></ul>
</div>
db.php
Database configuration file, modify username, password and database values.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
CSS
#menu_box
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:400px;width:200px;
background-color:#fff;
margin-left:20px;
float:left;
position:relative;
z-index:300
}
#menu_slider
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:370px;background-color:#fff;margin-left:220px;
position:absolute;
width:250px;
position:relative;
z-index:200;
display:none;
padding:15px
}
.hideul{display:none}
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:400px;width:200px;
background-color:#fff;
margin-left:20px;
float:left;
position:relative;
z-index:300
}
#menu_slider
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:370px;background-color:#fff;margin-left:220px;
position:absolute;
width:250px;
position:relative;
z-index:200;
display:none;
padding:15px
}
.hideul{display:none}
how to include breadcrumbs for this jsonmenu..
ReplyDeletehi..im chethan,intermediate in php.i want achive creating thumbnails from video uploading in php.plz can u tel me how to achive this..i asked you so many times..i didnt get any reply.. i checked in google,but i didnt found exact soloution.can plz tel me
ReplyDelete@ Chethan Kumar said...
ReplyDeletehttp://stackoverflow.com/questions/2264840/thumbnail-of-video-in-php-while-uploading
http://drupal.org/node/358221
tank you very much!!
ReplyDeleteHi chethan kumar
ReplyDeletecheck this link to create thumbnails.
Its my blog :)
http://hacksandtrickz.blogspot.in/2011/09/script-for-image-resizing-image.html
@chetan: you can use ffmpeg to create auto thumbnails when upload video
ReplyDelete@srivinas: nice tutz like usually :)
nice
ReplyDeleteAwesome. Good Work.I seen similar menus in many shopping sites
ReplyDeletegood example for ecommerce..can you tell me is it applicable to OsCommerce.
ReplyDeleteNice brow! Thanks!
ReplyDeleteThanks for this interesting tutorial...
ReplyDeletehoooooooooooooooooooohaaa.. really nice example dude
ReplyDeletegreat work... ;) thank you
ReplyDeletewhat is JSON file
ReplyDeleteHi Chethan,
ReplyDeleteYou have to use ffmpeg to achieve this.
@chetan you can do it by using ffmpeg tool.
ReplyDeleteYou can get complete info about the video and you can limit the video duration in the output and also you can embeed a watermark of ur website using that tool.
thanks, is great !
ReplyDeleteSuper.!! Thanks man, +10 points :)
ReplyDeletethanks lot for this
ReplyDeleteAwesome,can we add loading part so we dont see the image as it loads?
ReplyDeleteHow return string with breakline in JSON???
ReplyDeletevery nice post..... like the way you explain everything...
ReplyDeleteWow, very good tutorial, I like!
ReplyDeleteNice tutorial, but why do you use an ajax call to fill your menu ? Is'nt it better to fill menu with PHP than JS?
ReplyDeleteI think this is very bad for accessibility.
ReplyDeleteDisable JavaScript in your browser and go see the demo again and see the horrible result.
This is also very bad for SEO.
@Srinivas Tamada I think you should do the same tutorial with a menu in the database with CSS and HTML but not Javascript and Ajax
It's not enough that you have a track record of success in ecommerce. This role requires that you know quite a bit about online and off-line retail strategy and strategic planning. You can't just wing it: An Amazon search for books on “strategic
ReplyDeleteCool post. Would you mind elaborating a little on each step?
ReplyDeleteExcellent post, thanks for all your efforts.
ReplyDeleteIs there any way to make the menu close when not in use other than having to click outside the menu
ReplyDeletepostingan yang bagus tentang"ECommerce Menu Design with JSON Data"
ReplyDeleteNicely rendered menu srinivas, looking for more posts like this. Keep up good work.
ReplyDeleteReally interesting post, thanks for sharing.......:-)
ReplyDeletePlease... editor
ReplyDeletedesmotivaciones.es ....
PLEASE , watermark! please please please!
develope it!
thanks a lot.....it works
ReplyDeleteThanks for that article, please look forward to publish more of such useful posts.
ReplyDeleteCovering popular techniques with articles like that is always appreciated :-)
very nice...please can u help me with the search php script. i mean when u select from category and enter the product name in the search form the corresponding products should be visible from mysql database
ReplyDelete[email protected]
can you help me in creating top drop down menu using the same code
ReplyDeleteVerry good ! thank so much !
ReplyDeleteCan you please tell me how to add link?
ReplyDeleteThank You
Hello,
ReplyDeleteGood tutorial,
Please can you tell me how to add link.
Thanks
Is it possible to add this on Cs-Cart 3?
ReplyDeleteThanks shrinivas
ReplyDeleteI Have Requested Many Times For This Tutorial Thank You So Much
Hi Shrinivas, thanks a lot for this tutorial bcoz i've been searching for something like this from a very long time!!!!
ReplyDeleteI also have one question, can this menu be created using ASP.NET instead of PHP and how should i go forward with it????
Anyhelp would be appreciated!!!
NIce ...
ReplyDeleteCan u pls give the method for jsp json mysql...
Very Nice and Good example.I want solutions to display data from json files with out using db . What are the methods we are having to display on HTML page .
ReplyDeleteI will be really thankful to have your answer for this! :)
Please add the program event on
ReplyDelete//Mouse click on sub menu
$("#menu_slider").mouseup(function() {
return false
});
//Mouse click on my account link
$("#menu_box").mouseup(function() {
return false
});
how to display subcategory inside subcategory that subcategory..
ReplyDeleteLike
AAA
-BBB
--CCC
DDD