Discussions
Categories
- 196.7K All Categories
- 2.2K Data
- 235 Big Data Appliance
- 1.9K Data Science
- 449.8K Databases
- 221.6K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 549 MySQL Community Space
- 477 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 532 SQLcl
- 4K SQL Developer Data Modeler
- 186.9K SQL & PL/SQL
- 21.3K SQL Developer
- 295.4K Development
- 17 Developer Projects
- 138 Programming Languages
- 292.1K Development Tools
- 104 DevOps
- 3.1K QA/Testing
- 645.9K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 153 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 158 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 203 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 395 LiveLabs
- 37 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.6K Other Languages
- 2.3K Chinese
- 170 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 230 Portuguese
Dynamic Menu in JSP

866972
Member Posts: 21
Hi,
I have to make a menu just like www.staple.com in my JSP. The main product category and sub-category are read from the database. I have classes written which retrieve the product and sub categories but dont know hot to proceed with building of dynamic menu in my JSP. Please let me know how to move forward for this one.
Thanks
I have to make a menu just like www.staple.com in my JSP. The main product category and sub-category are read from the database. I have classes written which retrieve the product and sub categories but dont know hot to proceed with building of dynamic menu in my JSP. Please let me know how to move forward for this one.
Thanks
Answers
-
Start with HTML, not JSPs. Try to create something with plain old HTML and javascript that looks like what you need, then make it dynamic using JSP logic.
-
Hi,
I tried to do something like this :
*******CODE*******
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<ul id="nav">
<s:iterator value="productList" id="products">
<li> <s:url id="getProductCategoryCodesURL" action="listProductCategoryCodesByProductCd">
<s:param name="productCd" value="%{productCd}"></s:param>
</s:url>
<s:a href="%{getProductCategoryCodesURL}" ><s:property value="productNm" /></s:a>
<input type="hidden" id="prodCd" value="<s:property value="productCd" />"/>
</li>
</s:iterator>
</ul>
</body>
</html>
****END CODE******
So i was able to get the product categories in the menu but on mouse hover for a particular product category it should show sub-categories also. I can't think of a way to do that , can anyone please suggest ? -
Well, behind the horrible formatting it looks like you have some Javascript code. It's true that Javascript is the best way to do what you're asking about. However it's also true that there aren't any Javascript forums here. JSP and JSTL (which are the subjects of this forum) are server-side technologies whereas Javascript runs client-side (at least in your case).
Or perhaps your problem is that you didn't know that, and that you tried to write Javascript code which executed JSP and JSTL code in some way. That isn't going to work. If you want your Javascript to get data from the server (which is the most likely guess at what your post title means) then you'll need to use AJAX.
This discussion has been closed.