Results 1 to 2 of 2

Thread: Need some Javascript DHTML Help/Advice

  1. #1
    Join Date
    Dec 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need some Javascript DHTML Help/Advice

    Ok I have been boggling my mind over this stinkin menu for the past couple days and can't get it to seem to modify it just a bit to have a nested link.

    What I am looking for is when a user clicks on the main image and the sub links appear below and when they click on a sub link to have a nest link popup right underneath that and then when they click on a different link to expand that nest link out but collapse the previous one.

    Here is an example of the free source code I got that I like to use. Code is using CSS and Javascript. Is this possible from what I have asked above.

    This code is freeware and rights to the code have been posted below.

    JAVASCRIPT CODE FILE:
    /*
    * DO NOT REMOVE THIS NOTICE
    *
    * PROJECT: mygosuMenu
    * VERSION: 1.3.3
    * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
    * LINK: http://gosu.pl/dhtml/mygosumenu.html
    * LICENSE: BSD (revised)
    */

    function ClickShowHideMenu(id) {
    this.box1Hover = true;
    this.box2Hover = true;
    this.highlightActive = false;

    this.init = function() {
    if (!document.getElementById(this.id)) {
    alert("Element '"+this.id+"' does not exist in this document. ClickShowHideMenu cannot be initialized");
    return;
    }
    this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    this.load();
    if (window.attachEvent) {
    window.attachEvent("onunload", function(e) { self.save(); });
    } else if (window.addEventListener) {
    window.addEventListener("unload", function(e) { self.save(); }, false);
    }
    }

    this.parse = function(nodes, tree, id) {
    for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeType != 1) {
    continue;
    }
    if (nodes[i].className) {
    if ("box1" == nodes[i].className.substr(0, 4)) {
    nodes[i].id = id + "-" + tree.length;
    tree[tree.length] = new Array();
    eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }');
    eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }');
    eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }');
    }
    if ("section" == nodes[i].className) {
    id = id + "-" + (tree.length - 1);
    nodes[i].id = id + "-section";
    tree = tree[tree.length - 1];
    }
    if ("box2" == nodes[i].className.substr(0, 4)) {
    nodes[i].id = id + "-" + tree.length;
    tree[tree.length] = new Array();
    eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
    eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
    }
    }
    if (this.highlightActive && nodes[i].tagName && nodes[i].tagName == "A") {
    if (document.location.href == nodes[i].href) {
    nodes[i].className = (nodes[i].className ? ' active' : 'active')
    }
    }
    if (nodes[i].childNodes) {
    this.parse(nodes[i].childNodes, tree, id);
    }
    }
    }

    this.box1over = function(id) {
    if (!this.box1Hover) return;
    if (!document.getElementById(id)) return;
    document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover");
    }

    this.box1out = function(id) {
    if (!this.box1Hover) return;
    if (!document.getElementById(id)) return;
    document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1");
    }

    this.box1click = function(id) {
    if (!document.getElementById(id)) {
    return;
    }
    var id_openbox = this.id_openbox;
    if (this.id_openbox) {
    if (!document.getElementById(id + "-section")) {
    return;
    }
    this.hide();
    if (id_openbox == id) {
    if (this.box1hover) {
    document.getElementById(id_openbox).className = "box1-hover";
    } else {
    document.getElementById(id_openbox).className = "box1";
    }
    } else {
    document.getElementById(id_openbox).className = "box1";
    }
    }
    if (id_openbox != id) {
    this.show(id);
    var className = document.getElementById(id).className;
    if ("box1-hover" == className) {
    document.getElementById(id).className = "box1-open-hover";
    }
    if ("box1" == className) {
    document.getElementById(id).className = "box1-open";
    }
    }
    }

    this.box2over = function(id, className) {
    if (!this.box2Hover) return;
    if (!document.getElementById(id)) return;
    document.getElementById(id).className = className + "-hover";
    }

    this.box2out = function(id, className) {
    if (!this.box2Hover) return;
    if (!document.getElementById(id)) return;
    document.getElementById(id).className = className;
    }

    this.show = function(id) {
    if (document.getElementById(id + "-section")) {
    document.getElementById(id + "-section").style.display = "block";
    this.id_openbox = id;
    }
    }

    this.hide = function() {
    document.getElementById(this.id_openbox + "-section").style.display = "none";
    this.id_openbox = "";
    }

    this.save = function() {
    if (this.id_openbox) {
    this.cookie.set(this.id, this.id_openbox);
    } else {
    this.cookie.del(this.id);
    }
    }

    this.load = function() {
    var id_openbox = this.cookie.get(this.id);
    if (id_openbox) {
    this.show(id_openbox);
    document.getElementById(id_openbox).className = "box1-open";
    }
    }

    function Cookie() {
    this.get = function(name) {
    var cookies = document.cookie.split(";");
    for (var i = 0; i < cookies.length; i++) {
    var a = cookies[i].split("=");
    if (a.length == 2) {
    a[0] = a[0].trim();
    a[1] = a[1].trim();
    if (a[0] == name) {
    return unescape(a[1]);
    }
    }
    }
    return "";
    }
    this.set = function(name, value) {
    document.cookie = name + "=" + escape(value);
    }
    this.del = function(name) {
    document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
    }

    var self = this;
    this.id = id;
    this.tree = new Array();
    this.cookie = new Cookie();
    this.id_openbox = "";
    }

    if (typeof String.prototype.trim == "undefined") {
    String.prototype.trim = function() {
    var s = this.replace(/^\s*/, "");
    return s.replace(/\s*$/, "");
    }
    }





    CSS CODE FILE:

    .click-menu {
    width: 135px;
    }
    .click-menu .box1 {
    background-color: #202340;
    color: #99bb99;
    font-weight: bold;
    font-size: 12px;
    font-family: tahoma;
    padding: 4px 8px;
    border-width: 1px;
    border-color: #448882;
    border-style: solid solid solid solid;
    cursor: default;
    position: relative;
    }
    .click-menu .box1-hover {
    background-color: #113344;
    color: #CCEEEB;
    font-weight: bold;
    font-size: 12px;
    font-family: tahoma;
    padding: 4px 8px;
    border-width: 1px;
    border-color: #99CCAE;
    border-style: solid solid solid solid;
    cursor: default;
    position: relative;
    }
    .click-menu .box1-open {
    background-color: #202340;
    color: #99bb99;
    font-weight: bold;
    font-size: 12px;
    font-family: tahoma;
    padding: 4px 8px;
    border-width: 1px;
    border-color: #448882;
    border-style: solid solid none solid;
    cursor: default;
    position: relative;
    }
    .click-menu .box1-open-hover {
    background-color: #113344;
    color: #CCEEEB;
    font-weight: bold;
    font-size: 12px;
    font-family: tahoma;
    padding: 4px 8px;
    border-width: 1px;
    border-color: #99CCAE;
    border-style: solid solid none solid;
    cursor: default;
    position: relative;
    }
    .click-menu .box1 img, .click-menu .box1-hover img, .click-menu .box1-open img, .click-menu .box1-open-hover img {
    position: absolute;
    top: 6px;
    right: 6px;
    }
    .click-menu .section {
    background-color: #224441;
    font-family: arial;
    font-size: 12px;
    line-height: 15px;
    padding: 5px 5px 6px 5px;
    border-width: 1px;
    border-color: #448882;
    border-style: none solid solid solid;
    display: none;
    }
    .click-menu .section a {
    color: #8BAA88;
    text-decoration: none;
    white-space: nowrap;
    }
    .click-menu .section a:hover {
    color: #CCEEEB;
    text-decoration: none;
    white-space: nowrap;
    }
    .click-menu .box2 {
    }
    .click-menu .box2-hover {
    background: #000000;
    }
    .click-menu .section .active,
    .click-menu .section .active:hover {
    color: yellow;
    }
    Last edited by SPSPilot; 12-05-2005 at 09:56 PM.

  2. #2
    Join Date
    Dec 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is the HTML CODE for the page

    HTML CODE:

    <html>
    <head>
    <script type="text/javascript" src="ClickShowHideMenu.js"></script>
    <style type="text/css">
    body {
    background-color: #271D11;
    }
    .click-menu {
    }
    .click-menu .box1 {
    background: url("images/button1.gif") no-repeat;
    color: #f9f9f9;
    }
    .click-menu .box1-hover {
    background: url("images/button1.gif") no-repeat;
    color: #FFEBA9;
    }
    .click-menu .box1-open {
    background: url("images/button1-click.gif") no-repeat;
    color: #f9f9f9;
    }
    .click-menu .box1-open-hover {
    background: url("images/button1-click.gif") no-repeat;
    color: #FFEBA9;
    }
    .click-menu .box1,
    .click-menu .box1-hover,
    .click-menu .box1-open,
    .click-menu .box1-open-hover {
    text-indent: 12px;
    font-weight: bold;
    font-size: 14px;
    line-height: 31px;
    font-family: arial;
    cursor: pointer;
    width: 150px;
    }
    .click-menu .section {
    background-color: #46351F;
    font-family: arial;
    font-size: 13px;
    line-height: 15px;
    padding: 0 0 5px 10px;
    display: none;
    }
    .click-menu .section a {
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    }
    .click-menu .section a:hover {
    color: #FFFF99;
    text-decoration: none;
    white-space: nowrap;
    }
    .click-menu .box2 {
    border-color: #7B6139;
    border-width: 1px;
    border-style: none none solid solid;
    padding: 1px 0 2px 6px;
    }
    .click-menu .box2-hover {
    border-color: #7B6139;
    border-width: 1px;
    border-style: none none solid solid;
    padding: 1px 0 2px 6px;
    background: #5B4529;
    }
    </style>
    </head>
    <body>

    <script type="text/javascript">
    /* preload images, you can remove this code */
    var img = new Array();
    img[0] = new Image();
    img[0].src = "file:///R|/Docs/New Website/images/Subnav/product_subnav/product_subnav_r1_c1.gif";
    img[1] = new Image();
    img[1].src = "images/button1-click.gif";
    </script>

    <table><tr><td style="height: 500px; background-color: #46351F; vertical-align: top; padding: 10px;">

    <table cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu">
    <tr>
    <td>
    <div class="box1">Products</div>
    <div class="section">
    <div class="box2"><a href="example2.html">Product One</a></div>
    <div class="box2"><a href="example2.html">Product Two</a></div>

    <div class="box2"><a href="example2.html">Product Three</a></div>
    <div class="box2"><a href="example2.html">Product Four</a></div>
    <div class="box2"><a href="example2.html">Product Five</a></div>
    </div>
    </td>
    </tr>
    <tr><td height="8"></td></tr>

    <tr>
    <td>
    <div class="box1">Partners</div>
    <div class="section">
    <div class="box2"><a href="example2.html">Partner Benefits</a></div>
    <div class="box2"><a href="example2.html">Partner Application</a></div>
    <div class="box2"><a href="example2.html">Partner Listing</a></div>

    </div>
    </td>
    </tr>
    <tr><td height="8"></td></tr>
    <tr>
    <td>
    <div class="box1">Customers</div>
    <div class="section">

    <div class="box2"><a href="example2.html">Customer One</a></div>
    <div class="box2"><a href="example2.html">Customer Two</a></div>
    <div class="box2"><a href="example2.html">Customer Three</a></div>
    <div class="box2"><a href="example2.html">Customer Four</a></div>
    <div class="box2"><a href="example2.html">Customer Five</a></div>
    <div class="box2"><a href="example2.html">Customer Six</a></div>

    <div class="box2"><a href="example2.html">Customer Seven</a></div>
    </div>
    </td>
    </tr>
    <tr><td height="8"></td></tr>
    <tr>
    <td>
    <div class="box1">About Us</div>

    <div class="section">
    <div class="box2"><a href="example2.html">Executive Team</a></div>
    <div class="box2"><a href="example2.html">Investors</a></div>
    <div class="box2"><a href="example2.html">Career</a></div>
    <div class="box2"><a href="example2.html">Press Center</a></div>
    <div class="box2"><a href="example2.html">Success Stories</a></div>

    <div class="box2"><a href="example2.html">Contact Us</a></div>
    </div>
    </td>
    </tr>
    </table>

    </td></tr></table>

    <script type="text/javascript">
    var clickMenu2 = new ClickShowHideMenu('click-menu2');
    clickMenu2.init();
    </script>

    </body>
    </html>

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
  •