Dynamic Accordion Menu Using oracle java/j2ee and jquery

Dynamic Accordion Menu - oracle table
Dynamic Accordion Menu - oracle table

Sometimes we need ‘Accordion Menu ‘ in our project. I feel jquery is the best options for that. Very easily we can make Accordion Menu using jquery and HTML. Here I am going to show how to make Dynamic ‘Accordion Menu’ using oracle, java and jquery. Whenever we need a new Menu item or new menu with menu items just, l enters the details into database and it will show you dynamic menu in runtime.

 

Table for Menu

oracle table
Dynamic Accordion Menu – oracle table

Sample data

Accordion Menu
Accordion Menu data

Group 1

 

Java/J2ee              

  1. Core Java
  2. Jsp
  3. Servlets
  4. Struts

 

Group 2

Database

  1. Oracle
  2. PL/Sql
  3. Sql server

By seeing the database you can understand, we have two groups

1) Java/J2ee and

2) Database

 

Item_type ‘header’ is basically main group and Item_type  ‘item’ is menu item under the group . Item_group tells which item is under which group.

3.Dynamic Accordion Menu Using oracle java/j2ee and jquery
Dynamic Accordion Menu Using oracle java/j2ee and jquery

DynamicMenu.java

 

package com.codewale.example;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;

public class DynamicMenu {

public Map getMenuItems()
{

Map menuMap=null;
Connection connection=null;

menuMap=new HashMap();
try {
Class.forName(“oracle.jdbc.driver.OracleDriver”);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

try {
connection = DriverManager.getConnection(
“jdbc:oracle:thin:@localhost:1521:XE”, “CHRIST”,
“CHRIST”);
Statement st=connection.createStatement();

ResultSet rs= st.executeQuery(“select menu_item from dynamic_menu where item_type=’header’ order by item_order”);
while(rs.next())
{

Statement st1=connection.createStatement();
String group=rs.getString(“menu_item”);
ResultSet rs1= st1.executeQuery(“select menu_item,link_page,tool_tip,item_order from dynamic_menu where item_type=’item’ and item_group='”+group+”‘ order by item_order”);
List menuList=new ArrayList();
while(rs1.next())
{
Map columnMap= new HashMap();
columnMap.put(“menu_item”, rs1.getString(“menu_item”));
columnMap.put(“link_page”, rs1.getString(“link_page”));
columnMap.put(“tool_tip”, rs1.getString(“tool_tip”));
menuList.add((rs1.getInt(“item_order”)-1), columnMap);

}
menuMap.put(group, menuList);

}

} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return menuMap;

}

}

 

Index.jsp

 

<%@ page import=”com.codewale.example.DynamicMenu” %>
<%@ page import=”java.util.Map,java.util.Set,java.util.List;” %>
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Insert title here</title>

<script type=”text/javascript” src=”./js/jquery-1.2.6.min.js”></script>
<script language=”javascript”>
function initMenu() {
$(‘#menu ul’).hide();
$(‘#menu ul:first’).show();
$(‘#menu li a’).click(
function() {
var checkElement = $(this).next();
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#menu ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
<style type=”text/css”>
div.menu
{
background-color:#ffffff;
margin-bottom:5px;
border:1px solid #9EE3FF;
}
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;

}

ul#menu a {
display: block;
text-decoration: none;
}

ul#menu li {
margin-top: 1px;
border-top:1px dotted #D9F2FC;
}

ul#menu li a {
background: #D3EFFB;
color: #03597D;
padding: 0.5em;

}
ul#menu li a:hover {
background: #C8EBFA;
}

ul#menu li ul li a {
background: #FFFFFF;
color: #03597D;

}

ul#menu li ul li a:hover {
background: #F7FCFE;
border-left: 5px #03597D solid;

}
</style>
</head>
<body>
<table width=”20%”>
<tr><td>
<%
try{
DynamicMenu dm= new DynamicMenu();
Map menuMap=dm.getMenuItems();

Set<String> keys = menuMap.keySet();
out.print(“<ul id=\”menu\”>”);/////////////start of menu
for(String key: keys){

out.print(“<li>”);
out.print(“<a href=\”#\”>”+key+”</a>”);
out.print(“<ul>”);
List itemList=(List)menuMap.get(key);

for(int i=0;i<itemList.size();i++)
{
Map columnMap=(Map)itemList.get(i);
String menu_item=columnMap.get(“menu_item”).toString();
String link_page=columnMap.get(“link_page”).toString();
String tool_tip=columnMap.get(“tool_tip”).toString();
out.print(“<li><a href=\””+link_page+”\” title=\””+tool_tip+”\”>”+menu_item+”</a></li>”);
}
out.print(“</ul></li>”);
}
out.print(“</ul>”); ///////////end of menu
}
catch(Exception e)
{
out.print(e);
}

%>
</td></tr>
</table>
</body>
</html>

 

Output

dynamic menu
dynamic menu
Profile photo of Nirmal Dhara
About Nirmal Dhara 28 Articles
Java Developer

Be the first to comment

Leave a Reply

Your email address will not be published.


*