Results 1 to 4 of 4

Thread: Need help with expandable menu un template (Dreamweaver)

  1. #1
    Join Date
    Jan 2009
    Location
    San Jose, Costa Rica
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Need help with expandable menu un template (Dreamweaver)

    Hi, I'm trying to build a very simple page that includes a expandable menu (http://www.dynamicdrive.com/dynamicindex1/navigate1.htm) but I want to create a template, but when I save and use the template, the menu does not work. Does anybody has a clue? Thank you very much.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jan 2009
    Location
    San Jose, Costa Rica
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello:

    Thanks for your interest in helping me, I really appreciate it. The following code is the template I want to create, but as I told in my post, the expandable menu is not working when I try to use the template.

    Thanks again,

    Allan Barquero
    SGI - San Jose, Costa Rica

    ***************************************************************

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <script type="text/javascript" src="simpletreemenu.js">

    /***********************************************
    * Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    <link rel="stylesheet" type="text/css" href="simpletree.css" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    }

    .twoColElsLtHdr #container {
    width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .twoColElsLtHdr #header {
    background: #DDDDDD;
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    }
    .twoColElsLtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }

    .twoColElsLtHdr #sidebar1 {
    float: left;
    width: 12em; /* since this element is floated, a width must be given */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 0; /* top and bottom padding create visual space within this div */
    }
    .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
    margin-right: 10px;
    }

    .twoColElsLtHdr #mainContent {
    margin: 0 1.5em 0 13em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
    }
    .twoColElsLtHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
    }
    .twoColElsLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }

    /* Miscellaneous classes for reuse */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
    -->
    </style>
    <!--[if IE]>
    <style type="text/css">
    </style>
    <![endif]--></head>

    <body class="twoColElsLtHdr">

    <div id="container">
    <div id="header">
    <table width="722" height="78" border="0">
    <tr>
    <td width="102"><img src="../img/logo.jpg" width="96" height="112" alt="logo" /></td>
    <!-- TemplateBeginEditable name="encabezado" -->
    <td><p></p></td>
    <!-- TemplateEndEditable --> </tr>
    </table>
    <!-- end #header --></div>

    <div id="sidebar1">

    <ul id="treemenu1" class="treeview">
    <li>Inicio</li>
    <li><a href="sgi_int/sgi_int.html">SGI</a></li>
    <li>SGI CR
    <ul>
    <li><a href="sgi_cr/hist/hist.html">Historia</a></li>
    <li><a href="sgi_cr/activ/activ.html">Actividade</a>s</li>
    <li><a href="sgi_cr/publicns/public.html">Publicaciones</a></li>
    </ul>
    </li>
    <li>Daisaku Ikeda
    <ul>
    <li><a href="ikeda/perfil/perfil.html">Perfil</a></li>
    <li><a href="ikeda/trabajo/trabajo.html">Trabajo</a></li>
    </ul>
    </li>
    <li>Budismo
    <ul>
    <li><a href="budismo/orig/orig.html">Orígenes</a></li>
    <li><a href="budismo/pract/pract.html">Práctica</a></li>
    </ul>
    </li>
    </ul>

    <!-- end #sidebar1 --></div>
    <div id="mainContent">
    <h1></h1>
    <!-- TemplateBeginEditable name="cuerpo" -->
    <!-- TemplateEndEditable -->
    <p>&nbsp;</p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
    <table width="725" border="0">
    <!-- TemplateBeginEditable name="pie" -->
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <!-- TemplateEndEditable -->
    </table>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

  4. #4
    Join Date
    Jan 2009
    Location
    San Jose, Costa Rica
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am enclosing the .css and .js codes needed for the "expandable menu".


    **********************************
    simpletree.css
    ***********

    .treeview ul{ /*CSS for Simple Tree Menu*/
    margin: 0;
    padding: 0;
    }

    .treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
    background:url(templates/list.jpg) no-repeat left center;
    /*background: url(rcrs/menu/list.jpg) no-repeat left center;*/

    list-style-type: none;
    padding-left: 22px;
    <!--agregado por allan-->
    font: Arial, Helvetica, sans-serifArial;
    font-size:12px;
    margin-bottom: 3px;
    }

    .treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
    background: url(templates/closed.gif) no-repeat left 1px;
    cursor: hand !important;
    cursor: pointer !important;
    }


    .treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
    display: none; /*Hide them by default. Don't delete. */
    }

    .treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
    cursor: default;
    }

    ***************************************************************
    simpletreemenu.js
    *************
    var persisteduls=new Object()
    var ddtreemenu=new Object()

    ddtreemenu.closefolder="templates/closed.gif" //set image path to "closed" folder image
    ddtreemenu.openfolder="templates/open.gif" //set image path to "open" folder image

    //////////No need to edit beyond here///////////////////////////

    ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
    var ultags=document.getElementById(treeid).getElementsByTagName("ul")
    if (typeof persisteduls[treeid]=="undefined")
    persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
    for (var i=0; i<ultags.length; i++)
    ddtreemenu.buildSubTree(treeid, ultags[i], i)
    if (enablepersist==true){ //if enable persist feature
    var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
    ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
    }
    }

    ddtreemenu.buildSubTree=function(treeid, ulelement, index){
    ulelement.parentNode.className="submenu"
    if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
    if (ddtreemenu.searcharray(persisteduls[treeid], index)){
    ulelement.setAttribute("rel", "open")
    ulelement.style.display="block"
    ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
    }
    else
    ulelement.setAttribute("rel", "closed")
    } //end cookie persist code
    else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
    ulelement.setAttribute("rel", "closed")
    else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
    ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
    ulelement.parentNode.onclick=function(e){
    var submenu=this.getElementsByTagName("ul")[0]
    if (submenu.getAttribute("rel")=="closed"){
    submenu.style.display="block"
    submenu.setAttribute("rel", "open")
    ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
    }
    else if (submenu.getAttribute("rel")=="open"){
    submenu.style.display="none"
    submenu.setAttribute("rel", "closed")
    ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
    }
    ddtreemenu.preventpropagate(e)
    }
    ulelement.onclick=function(e){
    ddtreemenu.preventpropagate(e)
    }
    }

    ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
    var rootnode=document.getElementById(treeid)
    var currentnode=ulelement
    currentnode.style.display="block"
    currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
    while (currentnode!=rootnode){
    if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
    currentnode.style.display="block"
    currentnode.setAttribute("rel", "open") //indicate it's open
    currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
    }
    currentnode=currentnode.parentNode
    }
    }

    ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
    var ultags=document.getElementById(treeid).getElementsByTagName("ul")
    for (var i=0; i<ultags.length; i++){
    ultags[i].style.display=(action=="expand")? "block" : "none"
    var relvalue=(action=="expand")? "open" : "closed"
    ultags[i].setAttribute("rel", relvalue)
    ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
    }
    }

    ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
    var ultags=document.getElementById(treeid).getElementsByTagName("ul")
    var openuls=new Array()
    for (var i=0; i<ultags.length; i++){
    if (ultags[i].getAttribute("rel")=="open")
    openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
    }
    if (openuls.length==0) //if there are no opened ULs to save/persist
    openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
    ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
    }

    ////A few utility functions below//////////////////////

    ddtreemenu.getCookie=function(Name){ //get cookie value
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
    return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
    }

    ddtreemenu.setCookie=function(name, value, days){ //set cookei value
    var expireDate = new Date()
    //set "expstring" to either future or past date, to set or delete cookie, respectively
    var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
    document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
    }

    ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
    var isfound=false
    for (var i=0; i<thearray.length; i++){
    if (thearray[i]==value){
    isfound=true
    thearray.shift() //delete this element from array for efficiency sake
    break
    }
    }
    return isfound
    }

    ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
    if (typeof e!="undefined")
    e.stopPropagation()
    else
    event.cancelBubble=true
    }

    ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
    target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
    target.attachEvent(tasktype, functionref)
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •