This discussion is archived
3 Replies Latest reply: Oct 4, 2011 3:08 PM by DrClap RSS

Dynamic Menu in JSP

866972 Newbie
Currently Being Moderated
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
  • 1. Re: Dynamic Menu in JSP
    gimbal2 Guru
    Currently Being Moderated
    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.
  • 2. Re: Dynamic Menu in JSP
    866972 Newbie
    Currently Being Moderated
    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 ?
  • 3. Re: Dynamic Menu in JSP
    DrClap Expert
    Currently Being Moderated
    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.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points