Code:
<?php include("script/dblib.php");
connectToDB();
header("Content-Type: text/html; charset=UTF-8");
?>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<STYLE>
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 230px;
}
#accordion li{
height:45px;
line-height:45px;
display: block;
background-image:url('images/for_css/menu_bg.jpg');
background-repeat:repeat-x repeat-y;
font-weight: bold;
padding-left: 5px;
cursor: pointer;
list-style: circle;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion li:hover{
background-image:url('images/for_css/bgMenu.png');
}
#accordion ul li{
height:30px;
text-align: center;
font-size: 12px;
font-weight: normal;
cursor: auto;
background-image:url('images/for_css/bc_bg.gif');
line-height:30px;
padding: 0 0 0 7px;
}
#accordion ul li:hover {
background-image:url('images/for_css/bgMenu.png');
}
#accordion a {
text-decoration: none;
}
</STYLE>
</HEAD>
<BODY>
<?php
// Select all entries from the menu table
$result=mysql_query("SELECT * FROM parents ORDER BY id_roditelja");
// Create a multidimensional array to conatin a list of items and parents
$menu = array(
'items' => array(),
'parents' => array()
);
// Builds the array lists with data from the menu table
while ($items = mysql_fetch_assoc($result))
{
// Creates entry into items array with current menu item id ie. $menu['items'][1]
$menu['items'][$items['id_roditelja']] = $items;
// Creates entry into parents array. Parents array contains a list of all items with children
$menu['parents'][$items['parent_id']][] = $items['id_roditelja'];
}
// Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu)
{
$html = "";
if (isset($menu['parents'][$parent]))
{
$html .= "
<ul id='accordion'>\n";
foreach ($menu['parents'][$parent] as $itemId)
{
if(!isset($menu['parents'][$itemId]))
{
$html .= "<li>\n <a >".$menu['items'][$itemId]['naziv']."</a>\n</li> \n";
}
if(isset($menu['parents'][$itemId]))
{
$html .= "
<li>\n <a >".$menu['items'][$itemId]['naziv']."</a> \n";
$html .= buildMenu($itemId, $menu);
$html .= "</li> \n";
}
}
$html .= "</ul> \n";
}
return $html;
}
echo buildMenu(0, $menu);
?>
</BODY>
</HTML>
<?php include("script/dblib.php");
connectToDB();
header("Content-Type: text/html; charset=UTF-8");
?>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<STYLE>
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 230px;
}
#accordion li{
height:45px;
line-height:45px;
display: block;
background-image:url('images/for_css/menu_bg.jpg');
background-repeat:repeat-x repeat-y;
font-weight: bold;
padding-left: 5px;
cursor: pointer;
list-style: circle;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion li:hover{
background-image:url('images/for_css/bgMenu.png');
}
#accordion ul li{
height:30px;
text-align: center;
font-size: 12px;
font-weight: normal;
cursor: auto;
background-image:url('images/for_css/bc_bg.gif');
line-height:30px;
padding: 0 0 0 7px;
}
#accordion ul li:hover {
background-image:url('images/for_css/bgMenu.png');
}
#accordion a {
text-decoration: none;
}
</STYLE>
</HEAD>
<BODY>
<?php
// Select all entries from the menu table
$result=mysql_query("SELECT * FROM parents ORDER BY id_roditelja");
// Create a multidimensional array to conatin a list of items and parents
$menu = array(
'items' => array(),
'parents' => array()
);
// Builds the array lists with data from the menu table
while ($items = mysql_fetch_assoc($result))
{
// Creates entry into items array with current menu item id ie. $menu['items'][1]
$menu['items'][$items['id_roditelja']] = $items;
// Creates entry into parents array. Parents array contains a list of all items with children
$menu['parents'][$items['parent_id']][] = $items['id_roditelja'];
}
// Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu)
{
$html = "";
if (isset($menu['parents'][$parent]))
{
$html .= "
<ul id='accordion'>\n";
foreach ($menu['parents'][$parent] as $itemId)
{
if(!isset($menu['parents'][$itemId]))
{
$html .= "<li>\n <a >".$menu['items'][$itemId]['naziv']."</a>\n</li> \n";
}
if(isset($menu['parents'][$itemId]))
{
$html .= "
<li>\n <a >".$menu['items'][$itemId]['naziv']."</a> \n";
$html .= buildMenu($itemId, $menu);
$html .= "</li> \n";
}
}
$html .= "</ul> \n";
}
return $html;
}
echo buildMenu(0, $menu);
?>
</BODY>
</HTML>
I javascript deo
Code:
$(document).ready(function(){
$('#accordion > li ul')
.click(function(event){
event.stopPropagation();
})
.filter(':not(:first)')
.hide();
$('#accordion > li, #accordion > li > ul > li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
$(this)
.parent()
.find('> li ul:visible')
.slideToggle();
}
$(this)
.find('ul:first')
.stop(true, true)
.slideToggle();
});
});
$(document).ready(function(){
$('#accordion > li ul')
.click(function(event){
event.stopPropagation();
})
.filter(':not(:first)')
.hide();
$('#accordion > li, #accordion > li > ul > li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
$(this)
.parent()
.find('> li ul:visible')
.slideToggle();
}
$(this)
.find('ul:first')
.stop(true, true)
.slideToggle();
});
});