Search the Community
Showing results for tags 'accordion menu'.
Found 1 result
-
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
