Supplies quality pre-owned Web Offset     printing  presses and related equipment    
 Inter-Continental Graphics
 Su Proveedor de Rotativas y equipos para la impresión de periódicos y trabajos comerciales     
 

     

 

 

Vince from Spain's Drop Down DHTML Menu

  • Features
  • Compatible with all major 4x browsers as well as Netscape 6 and Opera
  • Free choice of background and border colours
  • Unlimited number of links and drop-downs
  • Permits customisation of links with CSS
  • Easy set-up
  • Small file size
  • Only $16

    See it in action here

  • Instructions
  • There are four files included in the download
  • This HTML file which includes instructions on how to make design changes (menu.htm). There are two parts of the code that will need changing. The first defines the colour choices and menu headings and need to be placed in a cell of a table where you want the menu to appear. The second, which goes immediately before the closing body tag defines the links for the drop downs. There is an easy to follow explanation within the HTML code and some detailed instructions below.
  • A linked Sylesheet (menu.css) which should go in your root directory - this can be edited to change link colours and underlines.
  • The js file (virtualmenu.js) which also needs placing in the root directory.
  • A spacer gif (clearpixel.gif) - this doesn't need to be changed but will need to be put in a folder called "images".

 

  • Detailed Instructions
  • You'll need to go into HTML view in FrontPage to make the changes necessary to get the look you want
  • The lines that need changing are probably in a burgundy colour and begin with the word "mymenu2"
  • Before each of these lines there is a comment explaining what changes can be made - here are some examples:
  1. Locate mymenu2.maintableprops("#000000",1,1,0) - changing "#000000" to "#FFFFFF" will change the border around the top main headings from black to white. "1,1,0" needn't be changed.
  2. Locate mymenu2.maincellprops("left","#000000","#000000") - changing "#000000" to "#FFFFFF" will change the background colour of the main headings from black to white. "left" needn't be changed.
  3. Locate mymenu2.subcellprops("left","#000080","#000080") - this is where you can change the background colour of the drop down cells - here it's set to a dark blue.
  4. Locate
    mymenu2.addMenu("frontpage2"," FrontPage ")
    mymenu2.addMenu("dreamweaver2"," Dreamweaver ")
    mymenu2.addMenu("design2"," Design ")
    mymenu2.addMenu("resource2"," Resources ")
    mymenu2.addMenu("favourite2"," Favourites ")
    This is where you define the names that appear on the main menu for simplicity sake it's a good idea to use the same names ie. frontpage2 is the name of the group that drops down from the title FrontPage. We've put 5 headings but you can add more in the same format or less by deleting the lines
  5. That's the first bit done - you can play around with colours until you get the effect you want.
  6. The second part is pretty simple - scroll right down the page and locate
    mymenu2.addSubMenu("frontpage2", " OutFront ", "http://www.outfront.net/")
    There are three parts here - Group name that you defined above "frontpage2" - the wording you want to appear on the drop down - " OutFront " - and the link "http://www.outfront.net/" - you can also use relative paths here like ../test.htm to go to a page in another folder for example. Work through all the links you want to add and make sure you keep previewing in a browser to check that everything is going to plan.
  7. The only other change that can be made is to the stylesheet "menu.css"
    This is how it looks:
    A {
    color: #FFFFCC;
    text-decoration: none;
    }

    A:visited {
    color: #FFFFCC;
    text-decoration: none;
    }

    A:active {
    color: #FFFFCC;
    text-decoration: none;
    }

    A:hover {
    color: Aqua;
    text-decoration: none;
    }

    TD {
    font-family: Verdana,Arial;
    font-size: 13px;
    }

    There's no underline to keep things tidy - if you want to put a line, change the word "none" to "underline"
    The links are set to light yellow "#FFFFCC" - change this to "#000080" if you want them to be dark blue for example.
    The mouseover colour is set to light blue "Aqua" - if you want it to be white, change it to "#FFFFFF" for example (NB. This doesn't show in NN4 but is ignored so it's not a problem)
  8. That's about it - it's really not as daunting as it may seem. It's a good chance to get your hands dirty with some coding and CSS practice!

  • Custom Implementations
  • If you require a custom implementation of this menu, please get in touch with Andy Chapman at info@virtualred.net