help with menu - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

help with menu

com123com123 Posts: 26Member
I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.

I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.

Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)

My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)

So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.

Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.

I hope this made sense.
And I really really appreciate any help anyone can give me. Thanks again.

Comments

  • CyGuyCyGuy Posts: 312Member
    : I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.
    :
    : I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.
    :
    : Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)
    :
    : My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
    : I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)
    :
    : So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.
    :
    : Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.
    :
    : I hope this made sense.
    : And I really really appreciate any help anyone can give me. Thanks again.
    :
    :
    Hi,

    As usual, there are a few ways to do it...

    #1 external file with .js extention

    #2 use PHP to piece the page into place

    #3 define an XML schema
  • com123com123 Posts: 26Member
    : : I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.
    : :
    : : I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.
    : :
    : : Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)
    : :
    : : My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
    : : I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)
    : :
    : : So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.
    : :
    : : Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.
    : :
    : : I hope this made sense.
    : : And I really really appreciate any help anyone can give me. Thanks again.
    : :
    : :
    : Hi,
    :
    : As usual, there are a few ways to do it...
    :
    : #1 external file with .js extention
    :
    : #2 use PHP to piece the page into place
    :
    : #3 define an XML schema
    :

    thanks, that was a lot of help.
  • mac_doggiemac_doggie Posts: 488Member
    : : : I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.
    : : :
    : : : I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.
    : : :
    : : : Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)
    : : :
    : : : My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
    : : : I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)
    : : :
    : : : So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.
    : : :
    : : : Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.
    : : :
    : : : I hope this made sense.
    : : : And I really really appreciate any help anyone can give me. Thanks again.
    : : :
    : : :
    : : Hi,
    : :
    : : As usual, there are a few ways to do it...
    : :
    : : #1 external file with .js extention
    : :
    : : #2 use PHP to piece the page into place
    : :
    : : #3 define an XML schema
    : :
    :
    : thanks, that was a lot of help.
    :

    I figure that was sarcastic... ?

    I think you might want an example...

    Normally I pasrse my data from a mysql database, using PHP, but you can also put your menu in a js file and just do this:
    [b][i]js/menu.js[/i][/b]
    [code]
    document.write('
      ');
      document.write('
    • option1
    • ');
      document.write('
    • option2
    • ');
      document.write('
    • option3
    • ');
      document.write('
        ');
        [/code]
        then in your html file on the location you want the menu put this:
        [code]

        [/code]

        a nicer way I think would be something like this:

        [b][i]js/menu.js[/i][/b]
        [code]
        function Menu(parent) {
        // Declare properties
        //
        this.parent = parent;
        this.parent_object = document.getElementById(parent);

        // Declare methods
        //
        this.Parse = mnu_Parse;

        // Implement methods
        //
        function mnu_Parse() {
        var ul = document.createElement('ul');
        for(var i=0;i<10;i++) {
        var li = document.createElement('li');
        if(i==0) {
        li.className = "firstitem";
        }
        var a = document.createElement('a');
        ul.appendChild(li);
        li.appendChild(a);
        switch(i) {
        case 0:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 1:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 2:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 3:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 4:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 5:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 6:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 7:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 8:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        case 9:
        a.href = "option"+i;
        a.innerHTML = "option"+i;
        break;
        }
        }
        this.parent_object.appendChild(ul);
        }
        }

        [/code]

        [b][i]css/menu.css[/i][/b]
        [code]
        * {
        padding : 2px;
        margin : 0px;
        }
        ul {
        list-style-type : none;
        }
        li {
        float : left;
        padding : 0px 5px;
        border-left : 1px solid #000000;
        }
        li.firstitem {
        border : 0px;
        }
        #con_Menu {
        position : absolute;
        height : 5px;
        width : 100%;
        top : 0px;
        left : 0px;
        background : #000063;
        overflow : hidden;
        }
        #con_Menu.unfold {
        height : 25px;
        }
        #mnu_MyMenu {
        position : relative;
        }
        #mnu_MyMenu a {
        color : yellow;
        font-weight : bold;
        text-decoration : none;
        }
        #mnu_MyMenu a:hover {
        text-decoration : underline;
        }
        [/code]

        and in each html file include both the stylesheet and the menu script:

        [b][i]each.html[/i][/b]
        [code]
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />


        website - page







        var menu;
        function loaded() {
        menu = new Menu("mnu_MyMenu");
        menu.Parse();
        }









        [/code]

        hope this is usefull for you...


        ;-)
        -mac-
        mailto:mac_doggie@hotmail.com
        the Netherlands...


  • com123com123 Posts: 26Member
    : : : : I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.
    : : : :
    : : : : I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.
    : : : :
    : : : : Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)
    : : : :
    : : : : My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
    : : : : I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)
    : : : :
    : : : : So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.
    : : : :
    : : : : Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.
    : : : :
    : : : : I hope this made sense.
    : : : : And I really really appreciate any help anyone can give me. Thanks again.
    : : : :
    : : : :
    : : : Hi,
    : : :
    : : : As usual, there are a few ways to do it...
    : : :
    : : : #1 external file with .js extention
    : : :
    : : : #2 use PHP to piece the page into place
    : : :
    : : : #3 define an XML schema
    : : :
    : :
    : : thanks, that was a lot of help.
    : :
    :
    : I figure that was sarcastic... ?
    :
    : I think you might want an example...
    :

    i'm so sorry if that sounded sarcastic but i wasn't
    i really meant it. it was a big help.
    i'm sorry CyGuy if you thought i was sarcastic too.
    at the time i really didn't know that you could creat an external
    javascript file. when i found out i just used the basic outline of the css to do it. with trial and error i got it.

    but thanks for the example mac_doggie it came in handy.


Sign In or Register to comment.