JavaScript & Php-Mysql accordion menu overlap

thugsr · January 23, 2013

Hi everyone,

I have problem with my accordion menu. Instead of sliding down, content from menu overlap each other...Cut me a little slack because i am new to javascript.

This is code for menu.

<?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>

javascript part:

$(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();
 });
});

This is image of what is happening

Sign In

JavaScript & Php-Mysql accordion menu overlap

Recommended Posts

thugsr

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information