Embedded menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:11

Embedded menu

Poster: marek
Dated: Monday September 6 2004 - 12:13:23 BST

Hi,
I've got a bit of a problem with embedding the menu. I'm afraid my skill and ability as a webmaster is more than limited but nevertheless I've been landed a job.
Now, the problem. I've embedded the menu in a table cell. Because of one reason or another a border was created around the menu. I don't think I've declared it. What is worse, the menu opens not on a name (item) but below, on the line. What did I do wrong?
I use the latest revision of the Menu. I'd like to attached files but don't know how. Can't just give an www. address since the page is still testing.
sample page looks like below

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>biurproj</title>
</head>

<body bgcolor="#002E6E">
<div align="center"><script type="text/javascript" src="milonic_src.js"></script>
<script
type="text/javascript">
      <!-- 
   if(ns4)_d.write("<script language=JavaScript src=mmenuns4.js><\/script>");      
     else _d.write("<script language=JavaScript src=mmenudom.js><\/script>"); 
    -->
   </script>
<script type="text/javascript" src="menu_data.js"></script>
<div
align="center"><center>

<table border="1" cellpadding="0" cellspacing="0" width="750" bgcolor="#002E6E"
bordercolor="#C0C0C0" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">
  <tr>
    <td width="750" height="100" background="../myweb3/tlo2.jpg" valign="top"
    style="border-bottom: medium none; padding-top: 30px"><blockquote>
      <p align="right"><img src="en.gif" width="30" height="21" alt="english" border="0"></p>
    </blockquote>
    </td>
  </tr>
  <tr>
    <td><div align="center"><center><table>
      <tr>
        <td><script type="text/javascript" src="embedded_main_menu.js"></script> </td>
      </tr>
    </table>
    </center></div></td>
  </tr>
  <tr>
    <td width="750" style="border-top: medium none"><p align="center"><font
    face="Arial Narrow" size="5" color="#FFFFFF"><strong>BIURO PROJEKTOWE</strong></font></p>
    <div align="center"><center><table border="0" cellpadding="2" width="600">
      <tr>
        <td><p style="text-align: justify"><font face="Arial Narrow" size="3" color="#FFFFFF">Z
        pominięciem kilku wyj±tków w pocz±tkowym okresie działalno¶ci Stoczni, wszystkie
        statki zbudowane w Stoczni Gdynia zostały zaprojektowane w jej Biurze Projektowym. W
        ci±gu przeszło 80 minionych lat Biuro Projektowe nie tylko rozbudowało się i zdobyło
        rozległe do¶wiadczenie, ale także stworzyło olbrzymi± bazę danych sprawdzonych
        projektów. Biuro wyszkoliło kadrę specjalistów o wysokich kwalifikacjach we wszystkich
        niezbędnych specjalno¶ciach i kadra ta jest systematycznie uzupełniana absolwentami
        Politechniki Gdańskiej. W chwili obecnej Biuro Projektowe Stoczni Gdynia S.A. zatrudnia
        przeszło 280 wysokiej klasy specjalistów. </font></p>
        <p style="text-align: justify"><font face="Arial Narrow" size="3" color="#FFFFFF">Biuro
        Projektowe oferuje swoim Klientom wykonanie kompletnych (od dokumentacji akwizycyjnej po
        warsztatow±), zidywidualiaowanych projektów prawie wszystkich typów jednostek
        pływaj±cych. </font></p>
        <p style="text-align: justify"><font face="Arial Narrow" size="3" color="#FFFFFF">Oferujemy
        również, niezbędn± podczas remontów, dokumentację jednostek zbudowanych w Stoczni w
        latach minionych. </font></p>
        <p style="text-align: justify"><font face="Arial Narrow" size="3" color="#FFFFFF">Wysoki
        poziom fachowo¶ci naszej kadry pozwala nam także na podejmowanie się nadzorów, z
        ramienia Armatorów, nad budowami prowadzonymi w stoczniach na całym ¶wiecie. </font></td>
      </tr>
    </table>
    </center></div></td>
  </tr>
</table>
</center></div></div>

<blockquote>
  <blockquote>
    <blockquote>
      <p align="right"><font face="Arial" color="#808080"><u><small><small><strong><a
      href="m.spychalski __at__ stocznia.gdynia.pl" style="color: rgb(192,192,192)">WEBMASTER</a>
      </strong></small></small></u></font></p>
    </blockquote>
  </blockquote>
</blockquote>

<p>&nbsp;</p>
</body>
</html>

[b]Here is the menu_data[/b]


_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=100           // The time delay before menus open on mouse over
_subOffsetTop=10              // Sub menu top offset
_subOffsetLeft=-1            // Sub menu left offset



with(menuStyle=new mm_style()){
onbgcolor="#003366";
oncolor="#ffebdc";
offbgcolor="#003366";
offcolor="#ffebdc";
bordercolor="#003366";
borderstyle="solid";
borderwidth=0;
separatorcolor="#003366";
separatorsize="2";
padding=5;
followscroll=1;
fontsize="90%";
fontstyle="bold";
fontweight="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="red";
pagebgcolor="#003366";
headercolor="#000000";
headerbgcolor="#ffffff";
position="center";
screenposition="center";
subimage="gom.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#003366', Direction=135, Strength=0)";
outfilter="randomdissolve(duration=0.1)";
}

with(milonic=new menuname("firma")){
style=menuStyle;
overflow="scroll";
aI("text=Strona Startowa;url=../index.htm;");
aI("text=Strona Główna;url=homepl.htm;");
aI("text=Struktura Spółki;url=struktura1.htm;");
aI("text=Podstawowe Informacje;url=infpodst.htm;");
aI("text=Historia;url=historia.htm;");
aI("text=Statystyki;url=statystyki.htm;");
}

with(milonic=new menuname("Stocznia")){
style=menuStyle;
overflow="scroll";
aI("text=Potencjał;url=potencjal.htm;");
aI("text=Polityka Jako¶ci;url=jakosc.htm;");
aI("text=Akcjonariat;url=akcjonariat.htm;");
aI("text=Plan Restrukturyzacji;url=restrukturyzacja.htm;");
}

with(milonic=new menuname("market")){
style=menuStyle;
aI("text=Informacje Ogólne;url=market-ogolne.htm;");
aI("text=Lista Referencyjna;url=listref.htm;");
aI("text=Targi i Wystawy;showmenu=targi");
aI("text=Projekty Zrealizowane;showmenu=statki;");
aI("text=Karty Katalogowe do pobrania;url=karty katalogowe.htm;");
aI("text=Biuro Projektowe;url=biurproj.htm;");
aI("text=Wyróżnione Projekty;url=significant.htm;");
}

with(milonic=new menuname("targi")){
style=menuStyle;
aI("text=Posidonia 2004;url=posidonia.htm;");
aI("text=Baltexpo 2004;url=baltexpo.htm;");
}

with(milonic=new menuname("statki")){
style=menuStyle;
aI("text=Kontenerowce;showmenu=kontenerowce;");
aI("text=Masowce;showmenu=masowce;");
aI("text=Gazowce i Tankowce;showmenu=gaz-tank;");
aI("text=Samochodowce;showmenu=samochodowce;");
aI("text=Statki Wielozadaniowe;showmenu=multipurp;");
}
with(milonic=new menuname("kontenerowce")){
style=menuStyle;
aI("text=8184;url=8184.htm;");
aI("text=8125;url=8125.htm;");
aI("text=8200;url=8200.htm;");
aI("text=8234;url=8234.htm;");
aI("text=8230;url=8230.htm;");
aI("text=8148;url=8148.htm;");
aI("text=8138;url=8138.htm;");
aI("text=8138L;url=8138L.htm;");
}

with(milonic=new menuname("masowce")){
style=menuStyle;
aI("text=8203;url=8203.htm;");
}
with(milonic=new menuname("gaz-tank")){
style=menuStyle;
aI("text=8185;url=8185.htm;");
aI("text=8189;url=8189.htm;");
aI("text=8222;url=8222.htm;");
}
with(milonic=new menuname("samochodowce")){
style=menuStyle;
aI("text=8168;url=8168.htm;");
aI("text=8213;url=8213.htm;");
}

with(milonic=new menuname("multipurp")){
style=menuStyle;
aI("text=8226;url=8226.htm;");
aI("text=8228;url=8228.htm;");
}

with(milonic=new menuname("praca")){
style=menuStyle;
aI("text=Oferta Zatrudnienia;url=ofprac.htm;");
aI("text=Oferta Szkoleniowa;url=ofszkol.htm;");
aI("text=Oferta Praktyk;url=ofprakt.htm;");
}

with(milonic=new menuname("prasa")){
style=menuStyle;
aI("text=Kodeks Ochrony Obiektu Portowego;url=kodeks.htm;");
aI("text=Chrzest Amber Arrow;url=prasa01.htm;");
aI("text=Chrzest Kota Perkasa;url=prasa02.htm;");
aI("text=Chrzest Ivory Arrow;url=prasa03.htm;");
}

with(milonic=new menuname("linki")){
style=menuStyle;
aI("text=Spółki Grupy Stoczni Gdynia;url=spolki.htm;");
aI("text=Inne Linki;url=linki.htm;");
}

with(milonic=new menuname("Galerie")){
style=menuStyle;
aI("text=Chrzest Amber Arrow;url=Galeria1/index.htm;");
aI("text=Stocznia i Gdynia;url=Galeria2/index.htm;");
aI("text=Statki;url=Galeria3/index.htm;");
}

with(milonic=new menuname("kontakty")){
style=menuStyle;
aI("text=Kontakty;url=kontakty.htm/;");
aI("text=O¶rodek Informacji Stoczni;url=oinf.htm;");
}

drawMenus();

[b]and embedded main menu[/b]

with(new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
position="center";
orientation="horizontal";
aI("text=O Firmie;showmenu=firma;");
aI("text=Stocznia;showmenu=stocznia;");
aI("text=Marketing;showmenu=market;");
aI("text=Praca;showmenu=praca;");
aI("text=Aktualno¶ci;showmenu=prasa;");
aI("text=Linki;showmenu=linki;");
aI("text=Galerie;showmenu=galerie;");
aI("text=Kontakty;showmenu=kontakty;");
}
drawMenus();

Code:

Poster: Andy
Dated: Monday September 6 2004 - 14:52:02 BST

Hi,

Have you looked at http://www.milonic.com/tablemenu.php

There's some good stuff in that file that will help advise on the best technique for getting table based menus to work properly.

-- Andy

Poster: marek
Dated: Monday September 6 2004 - 17:18:11 BST

Hi,
Well, I thought I did my embeddeing according to the instructions from the file you refer to. Everything works fine or almost fine. Except that the menu expands not when you hit an item but instead when you hit a line below the menu.
Marek

Poster: John
Dated: Monday September 6 2004 - 17:38:50 BST

We really need to see this thing in operation to be able to give you better help. Is there anyplace you can get it posted?

Poster: marek
Dated: Monday September 6 2004 - 18:39:35 BST

Hi there,
It's nice to get so much attention. Maybe I could attach relevant files to an e-mail message. Only that Milonic Support doesn't publish an e-mail address.
Marek

Poster: Ruth
Dated: Monday September 6 2004 - 20:05:59 BST

You have an error in the embedded_main_menu.js file. Eliminate the position="center"; That's not valid. You also have followscroll=1 in the global style you have defined, that's also not valid with the menu placed in a table, it won't follow scroll, the position is relative. I'm not sure why you have the call for the other menu files inside of the div tag after the body tag? I think they are supposed to be the first thing after the body tag and before any other html is there.

Ruth

Poster: marek
Dated: Monday September 6 2004 - 20:13:35 BST

Thanks, I'll try to correct according to your suggestions and see if it works.
Marek

Poster: marek
Dated: Monday September 6 2004 - 20:24:09 BST

This <div align="center" doesn't seem to matter one way or the other by getting rid of "position="center" and "followscroll" helped. The menu works just fine. I still don't know how did I arrive to have those two horizonatal lines, one just above and the other just under the menu items but I can live with them.
Thanks a lots
Marek

Poster: rudy
Dated: Monday September 6 2004 - 20:34:41 BST

Ruth,
I also notice that he is using the code overflow="scroll";. Is this needed?

Code:

with(milonic=new menuname("Stocznia")){ 
style=menuStyle; 
overflow="scroll"; 
aI("text=Potencjał;url=potencjal.htm;"); 
aI("text=Polityka Jako¶ci;url=jakosc.htm;"); 
aI("text=Akcjonariat;url=akcjonariat.htm;"); 
aI("text=Plan Restrukturyzacji;url=restrukturyzacja.htm;"); 
} 

Ruth wrote:

You have an error in the embedded_main_menu.js file.Eliminate the position="center"; That's not valid. You also have followscroll=1 in the global style you have defined, that's also not valid with the menu placed in a table, it won't follow scroll, the position is relative. I'm not sure why you have the call for the other menu files inside of the div tag after the body tag? I think they are supposed to be the first thing after the body tag and before any other html is there.

Ruth

Poster: Ruth
Dated: Monday September 6 2004 - 20:52:10 BST

rudy wrote:

I also notice that he is using the code overflow="scroll";. Is this needed?

You're right Rudy, good catch. It's not needed, unless the plans are to have a much longer submenu as time goes on, if not it's better to get rid of it.

marek wrote:

I still don't know how did I arrive to have those two horizonatal lines, one just above and the other just under the menu items but I can live with them.

The lines are the table border you have listed.

Code:

<table border="1" cellpadding="0" cellspacing="0" width="750" bgcolor="#002E6E" 
bordercolor="#C0C0C0" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0"> 

Sorry, I'm not really knowledgeable in all the css but I think there is probably a way to set it so the borders are not there for that particular table cell.

Poster: marek
Dated: Tuesday September 7 2004 - 7:33:22 BST

This particular table border declaration was present before I decided to put my menu in a table and I can't get rid of it not loosing the border around whole page.
Marek

Poster: Ruth
Dated: Tuesday September 7 2004 - 16:36:18 BST

Using css you can place and remove borders from different areas and keep them around the outside of the table. The following used in your main table declaration will keep the border around the outside and remove those two lines

Code:

<table cellpadding="0" cellspacing="0" width="750" bgcolor="#002E6E" 
bordercolor="#C0C0C0" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0" style="border-collapse: collapse; border: solid;"> 

Using the following you would remove only the top line above the menu and leave a regular border line below the menu as if there were a dividing line between the top content and menu and the bottom content.

Code:

<table cellpadding="0" cellspacing="0" width="750" bgcolor="#002E6E" 
bordercolor="#C0C0C0" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0" style="border-collapse: collapse; border: solid;"> 
  <tr> 
    <td width="750" height="100" background="tlo2.jpg" valign="top" 
    style="border-bottom: medium none; padding-top: 30px"><blockquote> 
      <p align="right"><img src="en.gif" width="30" height="21" alt="english" border="0"></p> 
    </blockquote> 
    </td> 
  </tr> 
  <tr> 
    <td style="border-bottom: solid">><div align="center"><center><table> 
      <tr> 
        <td><script type="text/javascript" src="embedded_main_menu.js"></script> </td> 
      </tr> 
    </table> 
    </center></div></td> 
  </tr> 

Information on using different css styles can be found This w3c CSS 2.1 section

Ruth

Poster: marek
Dated: Wednesday September 8 2004 - 12:02:36 BST

Thank you very much
Marek

Industrial Strength JavaScript and DHTML Menus

Embedded menu