Forum Stats

  • 3,816,062 Users
  • 2,259,135 Discussions
  • 7,893,378 Comments

Discussions

Categories

Dynamic Menu in JSP

866972
866972 Member Posts: 21
edited Oct 4, 2011 6:08PM in JavaServer Pages (JSP) and JSTL
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
· Share on TwitterShare on Facebook

Answers

  • gimbal2
    gimbal2 Member Posts: 11,949 Gold Trophy
    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.
    · Share on TwitterShare on Facebook
  • 866972
    866972 Member Posts: 21
    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 ?
    · Share on TwitterShare on Facebook
  • DrClap
    DrClap Member Posts: 25,479
    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.
    · Share on TwitterShare on Facebook
This discussion has been closed.