This
tutorial shows you how to create a cool jQuery UI accordion menu with
the data from a MySQL table using PHP. Also you will find out some
classes to override the default style with custom css.
Creating MySQL Table
Create a simple table called
menu with 4 columns for this tutorial.
|
|
CREATE TABLE `menu` (
`id` INT(10) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR(40) ,
`link` VARCHAR(100) ,
`parent` INT(10) NULL,
PRIMARY KEY (`id`));
|
Insert some values to the table like in the sample below.
Rows with
NULL parent id are parent menus
Basic HTML structure
This is the HTML structure we are aiming to create with the data from MySQL table.
|
|
<div id="accordion">
<h3><a href="link">Parent Menu 1</a></h3>
<div>
<ul>
<li><a href="link">Sub Menu 1</a></li>
<li><a href="link">Sub Menu 2</a></li>
</ul>
</div>
</div>
|
Inserting basic jQuery UI accordion
First of all include jquery and jquery ui libraries and stylesheet. Then initialize accordion for the id
#accordion like below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Menu- void Tricks</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
//initializing the accordion
$('#accordion').accordion({
collapsible: true,
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="accordion">
//php code will be placed here
</div>
</body>
<html>
|
PHP code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div id="accordion">
<?php
//database connection
$con = mysqli_connect("hostname","user","pass","dbname") or die("Error " . mysqli_error($con));
$sql = "SELECT * FROM menu WHERE parent IS NULL";
$query = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($query)) {
$id = $row['id'];
$link = $row['link'];
$name = $row['name'];
echo '<h3><a href="'.$link.'">'.$name.'</a></h3>';
$sql2 = "SELECT * FROM menu WHERE parent = '$id'";
$query2 = mysqli_query($con, $sql2);
echo '<div><ul>';
while ($row2 = mysqli_fetch_array($query2)) {
$link2 = $row2['link'];
$name2 = $row2['name'];
echo '<li><a href="'.$link2.'">'.$name2.'</a></li>';
}
echo '</ul></div>';
}
?>
</div>
|
Basically we have two
while blocks. Outer block is for parent menu and the inner while block is for sub menus.
In outer while loop, we are fetching the ids of the rows with
NULL parent id. These are the parent menus.
In inner while loop, we are fetching the rows with the parent id corresponding to the value fetched from outer loop.
Custom CSS
Finally we can change the default jquery ui accordion menu to something cool and flat using custom css.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
#accordion{
width: 300px;
}
#accordion h3 {
background: #3A5261;
border: 1px solid #426377;
border-radius: 0;
margin: 0
}
#accordion h3.ui-accordion-header-active{
background: #548596;
border: 1px solid #486E7B;
}
#accordion h3.ui-accordion-header-active a{
color: #73D2AF;
}
#accordion h3.ui-state-hover,#accordion h3.ui-state-focus, #accordion h3.ui-state-active{
box-shadow: none;
}
#accordion h3 a{
color: #ffffff;
}
#accordion div {
padding: 0;
border: none;
border-radius: 0;
}
#accordion div ul{
list-style: none;
margin: 0;
padding:0;
}
#accordion div ul li{
padding: 10px 39px 10px;
background: #73D2AF;
border: 1px solid #67C3A1;
}
#accordion div ul li a{
text-decoration: none;
color: #424242;
}
|
Change the above styles according to your taste. And we’re done.
.png)
0 comments :