Help with menu positioning

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

Help with menu positioning

Poster: doronca
Dated: Thursday November 9 2006 - 21:07:27 GMT

Hello !

I'm trying to get the menu positioned correctly but I've given up. Here it is:

This is how it should look like:
http://www.123domino.biz/trustware/index3.html
http://www.123domino.biz/trustware/homepage.jpg

And here it is positioned to the left:
http://www.123domino.biz/trustware/index_nav4.html

Besides the positioning problem it doesn't look exactly like my client wants but this is for the real helpers...

If anyone can tell me how to position it correctly... :?:

Thanks.

BTW:
The menu items are declared as unordered lists - I found it to be a lot easier to maintain and be SEO compliant.

Poster: Ruth
Dated: Saturday November 11 2006 - 22:59:37 GMT

Hi,

Try this. Note that I have all the images in one file on my desktop so you'll have to redo the links for your images. This is the page html, and below is the class you need to add to your css file.

Code:

<BODY><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
     else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
   </SCRIPT>

<SCRIPT src="listmenus.js" type=text/javascript></SCRIPT>
<TABLE cellSpacing=0 cellPadding=0 width=1024 align=center border=1 bordercolor="aqua">
  <TBODY>
  <TR>
    <TD>
      <TABLE cellSpacing=0 cellPadding=0 width=1024 border=0 bordercolor="red">
        <TBODY>
        <TR>
          <TD class=barnav vAlign=middle><!-- start menu HTML -->
        <TABLE
       BORDER=0 bordercolor="lime" CELLPADDING="0" cellspacing=0 width=1024 height=34>
         <TR>
      <TD width="30%"> </TD>
      <TD valign="middle"> <UL id=milonicmenu1>
              <LI><A 
              href="http://www.123domino.biz/trustware/index.html">Home</A> 
              <LI><A 
              href="http://www.123domino.biz/trustware/index_nav4.html#">Products 
              & Technology</A> 
              <UL class=subMenu>
                <LI><A href="http://www.milonic.com/cbuy.php">Product Purchasing 
                Page</A> 
                <LI><A href="http://www.milonic.com/contactus.php">Contact 
                Us</A> 
                <LI><A href="http://www.milonic.com/newsletter.php">Newsletter 
                Subscription</A> 
                <LI><A href="http://www.milonic.com/menufaq.php">FAQ</A> 
                <LI><A href="http://www.milonic.com/forum/">Discussion Forum</A> 

                <LI><A href="http://www.milonic.com/licenses.php">Software 
                License Agreement</A> 
                <LI><A href="http://www.milonic.com/privacy.php">Privacy 
                Policy</A> </LI></UL>
              <LI><A href="http://www.123domino.biz/trustware/index.html">Buy 
              Now</A> 
              <LI><A 
              href="http://www.123domino.biz/trustware/index_nav4.html#">Support</A> 

              <UL class=subMenu>
                <LI><A href="htpp://www.a-q.co.uk/?milonicmenu">(aq) Web 
                Hosting</A> 
                <LI><A href="htpp://www.softidiom.com/?milonicmenu">WebSmith</A> 

                <LI><A href="htpp://www.sms2email.com/?milonicmenu">SMS 2 
                Email</A> </LI></UL>
              <LI><A 
              href="http://www.123domino.biz/trustware/index.html">Library</A> 
              <LI><A href="http://www.123domino.biz/trustware/index.html">News 
              & Events</A> 
              <LI><A 
              href="http://www.123domino.biz/trustware/index_nav4.html#">Company</A> 

              <UL class=subMenu>
                <LI><A href="http://www.apache.org/">Apache Web Server</A> 
                <LI><A href="htpp://www.mysql.com/">MySQL Database Server</A> 
                <LI><A href="htpp://www.php.net/">PHP - Development</A> 
                <LI><A href="htpp://www.phpbb.com/">phpBB Web Forum System</A> 
                <LI><A 
                href="http://www.123domino.biz/trustware/index_nav4.html#">Anti 
                Spam Tools</A>
                <UL>
                  <LI><A href="htpp://www.spamcop.net/">Spam Cop</A> 
                  <LI><A href="htpp://www.mimedefang.org/">Mime Defang</A> 
                  <LI><A href="htpp://www.spamassasin.com/">Spam Assassin</A> 
                  </LI></UL></LI></UL></LI></UL><SCRIPT>
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
/*bordercolor="#999999";
borderstyle="solid";
borderwidth=1;*/
fontfamily="arial, helvetica, sans-serif";
fontsize="12px";
fontstyle="normal";
fontweight = "bold";
/*headerbgcolor="#ffffff";
headercolor="#ffffff";*/
offbgcolor="transparent";
offcolor="#575759";
onbgcolor="#808080";
oncolor="#000005";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
/*pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
/*subimage="../../arrow.gif";
subimagepadding=2;*/
image="bullet.jpg";
imagepadding="6";
subimage = "";
}

with(subMenu=new mm_style()){
fontfamily="arial, helvetica, sans-serif";
fontsize="12px";
fontstyle="normal";
fontweight = "bold";
offbgcolor="#fefefe";
onbgcolor="#ffffff";
offcolor="#000000";
oncolor#a84242";
separatorcolor="#ffffff";
separatorsize=0;
padding=4;
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
offclass="opaque";
onclass="opaque";
decoration="none";
ondecoration="none";
itemheight=20;
}

// syntax: buildListMenu("id of list", "menu style name", "main menu properties")
buildListMenu("milonicmenu1","menuStyle","alwaysvisible=true;orientation='horizontal';position='relative';")

</SCRIPT>
<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2005 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before 
    using it in any production environment. 
    
    The free use of this menu is only available for Non-Profit, Educational & Personal Web 
    Sites who have obtained a license to use. 
    
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
    
    All Copyright notices MUST remain in place at ALL times. 
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a 
    license waiver.
--><NOSCRIPT><A href="http://www.milonic.com/">JavaScript Menu Powered by 
Milonic</A></NOSCRIPT></TD>
         </TR>
       </TABLE>
           </TD></TR>
        <TR>
          <TD class=backwolf vAlign=top>
            <H1 class=pos_rel>  Security 
            through<BR>  Virtualization</H1>
            <H2 class=pos_rel>  Run alien files risk 
            free</H2> <IMG class=pos_rel height=37 
            src="free_download_big.jpg" width=174></BOTTON></TD></TR>
        <TR>
          <TD class=back vAlign=top>
            <TABLE cellSpacing=0 cellPadding=0 width=1024 align=center 
              border=0><TBODY>
              <TR>
                <TD width=654>
                  <TABLE cellSpacing=0 cellPadding=0 width=654 border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=top>
                        <H3>BufferZone revolutionary virtualization technology, 
                        enables you to<BR>transparently run alien files and 
                        programs while protecting your PC assets<BR>and privacy 
                        from any known - and even unknown - Spyware, Adware and 
                        Virus<BR>attacks with no need whatsoever for security 
                        updates.<BR></H3></TD></TR>
                    <TR>
                      <TD vAlign=top>
                        <TABLE cellSpacing=0 cellPadding=0 width=654 border=0>
                          <TBODY>
                          <TR>
                            <TD width=120 height=190> </TD>
                            <TD vAlign=top width=179>
                              <TABLE cellSpacing=0 cellPadding=0 width="100%" 
                              border=0>
                                <TBODY>
                                <TR>
                                <TD><IMG height=19 
                                src="buffer_zone.jpg" 
                                width=91></TD></TR>
                                <TR>
                                <TD class=h4>Basic</TD></TR>
                                <TR>
                                <TD>
                                <H5>P2P,Internet Browsers and IM Protection 
                                </H5></TD></TR>
                                <TR>
                                <TD class=more2>READ MORE >>></TD></TR>
                                <TR>
                                <TD><IMG height=21 
                                src="free_download_small.jpg" 
                                width=101></TD></TR></TBODY></TABLE></TD>
                            <TD class=border vAlign=top width=150>
                              <TABLE cellSpacing=0 cellPadding=0 width="100%" 
                              border=0>
                                <TBODY>
                                <TR>
                                <TD class=pad><IMG height=19 
                                src="buffer_zone.jpg" 
                                width=91></TD></TR>
                                <TR>
                                <TD class=h4><SPAN 
class=pad>Pro</SPAN></TD></TR>
                                <TR>
                                <TD class=pad vAlign=top>
                                <H5>Full PC Protection </H5></TD></TR>
                                <TR>
                                <TD class=more><SPAN class=pad>READ MORE 
                                >>></SPAN></TD></TR>
                                <TR>
                                <TD class=pad><IMG height=21 
                                src="button_30_days.jpg" 
                                width=101></TD></TR>
                                <TR>
                                <TD class=pad vAlign=bottom height=30><IMG 
                                height=21 
                                src="button_buy_now.jpg" 
                                width=101></TD></TR></TBODY></TABLE></TD>
                            <TD class=border vAlign=top width=205>
                              <TABLE cellSpacing=0 cellPadding=0 width="100%" 
                              border=0>
                                <TBODY>
                                <TR>
                                <TD class=pad><IMG height=19 
                                src="buffer_zone.jpg" 
                                width=91></TD></TR>
                                <TR>
                                <TD class=h4><SPAN 
                                class=pad>Enterprise</SPAN></TD></TR>
                                <TR>
                                <TD class=pad vAlign=top>
                                <H5>Enterprise Protection </H5></TD></TR>
                                <TR>
                                <TD class=more><SPAN class=pad>READ MORE 
                                >>></SPAN></TD></TR>
                                <TR>
                                <TD class=pad><IMG height=21 
                                src="free_download_small.jpg" 
                                width=101></TD></TR></TBODY></TABLE></TD></TR>
                          <TR>
                            <TD> </TD>
                            <TD> </TD>
                            <TD> </TD>
                            <TD> </TD></TR>
                          <TR>
                            <TD> </TD>
                            <TD class=copyright>© TRUSTWARE. All Rights 
                              Reserved  </TD>
                            <TD class=copyright><SPAN class="pad border">Site 
                              by IConception</SPAN></TD>
                            <TD> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
                <TD vAlign=top width=370>
                  <TABLE cellSpacing=0 cellPadding=6 width=370 border=0>
                    <TBODY>
                    <TR>
                      <TD class=pad vAlign=bottom height=58><IMG height=32 
                        src="spotlight2.gif" width=151></TD></TR>
                    <TR>
                      <TD class=pad vAlign=top height=43><SPAN 
                        class=text13>Title Title 1 /</SPAN><SPAN class=text10> 
                        8.21.2006</SPAN><BR><SPAN class=text12>Here will come 
                        the text of the text .... </SPAN></TD></TR>
                    <TR>
                      <TD class=pad vAlign=top height=56><SPAN 
                        class=text13>Title Title 1 /</SPAN><SPAN class=text10> 
                        8.21.2006</SPAN><BR><SPAN class=text12>Here will come 
                        the text of the text .... </SPAN></TD></TR>
                    <TR>
                      <TD class=pad height=93><IMG height=69 
                        src="already.gif" 
                  width=209></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
 </BODY></HTML>

This css class when called in the menu gives you that translucent look in IE and in FF, I haven't tested other browsers.

Code:

.opaque {  
opacity:.9; 
-moz-opacity: .9; 
filter:alpha(opacity=90);
}

If you need help on the design your client doesn't like let us know. We may not be able to do anything but then again, who knows?

Note: in FF the submenu will not offset and I can't figure out how to do it since you are using the listmenu. In a regular menu there is a var function that can be used and called in the submenus. Sorry.

Ruth

Thank you !!!

Poster: doronca
Dated: Sunday November 12 2006 - 11:50:47 GMT

Hi Ruth, thanks so much for jumping in to help - I was really desperate and almost decided to give up till I thought - I'll post it in the forum...

Well, here are the semi-final results:
http://dominol.secured.co.il/projects/t ... _nav8.html

For some odd reason, in IE the fonts look corrupt. When I remove the transparent definition and change it to a color it looks OK:
http://dominol.secured.co.il/projects/t ... _nav7.html

And a last one: How do I remove the bullet from the first link (Home)?
I tried placing it in a UL with a different class but it didn't work

Thanks. :lol:

Poster: Ruth
Dated: Sunday November 12 2006 - 18:26:12 GMT

Hi,

The problem is in IE6 as far as I can see and it has to do with the overfilter code for the shadow. Remove that and you don't have the problem. In my opinion [though I know nothing about making programs] that application of the shadow to the text is a bug in IE 6. I thought those filters were supposed to apply to the object, which in this case would be the menu not the text.

Just a personal opinion, I think the menu looks better without the offbgcolor since it then looks as if it's part of the header rather than a separate item sits on top of it. So I'd try to remove the shadow in the menuStyle which is what is applying to the main menu.

As to the other issue, as far as I know there's no way to do what you want because you are using list based menus. In a regular menu, you could set the image in the style, and then in whatever item you wanted to NOT have the image you'd code a transparent.gif in place of it. aI("image=transparent.gif;text= and so on. That's not possible with a list menu since there are no aI strings in which to apply changes. I dont' know if you could code the list-style-type [I think that refers to the squares, circles etc] in the style sheet, remove the image from the menuStyle and then in the home item change the list-style-type.

I stay as far away from css as I can given it's so convoluted and in many areas not ituitive, so it's a case of when I need to know something I go do a 10 hour search to get it, lol.

Ruth

Almost there

Poster: doronca
Dated: Monday November 13 2006 - 10:35:52 GMT

Hi Ruth,

I took your advice and removed the bgcolor as well the overfilter. Here it is:
http://dominol.secured.co.il/projects/t ... inal3.html

Regarding the bullet, I've placed it in a different <li> but it brought other problems:
1. I would like the bullet to not have the mouse over effect at all
2. The bullet does not appear in Firefox

And last one, in the submenu my client asked the text to be bold only in mouseover so it changes the box size when mouseovering the longest link in the submenu - how can I prevent this jump? How do I add maybe padding on the right side?

Thanks.

Poster: Ruth
Dated: Monday November 13 2006 - 13:57:54 GMT

Hi,

Unfortunately, since you are using the list menu there are a lot of things that can't be done, since many of them are done either in the menu definition or in each item.

There's no way to not have the mouseover effect of the image because you have it set as an LI so the program reads it as an item, i.e. aI string. And as to the changing of font from normal to bold, padding will not work, what you need in those vertical menus is an itemwidth. So, there are workarounds using the separator and using more styles for the different menus so you can set itemwidths for the menus. List menus are not a flexible as using a regular menu set up where you can use style properties in either the style section or in an item.

This will be the menu starting at the Menu starts here thingee down to the last script tag

Code:

 <UL id=milonicmenu1>
 <LI><A href="http://dominol.secured.co.il/projects/trustware/index.html">Home</A>                   
 <LI><A href="http://dominol.secured.co.il/projects/trustware/final3.html#">
 Products & Technology</A> 
 
     <UL class=subMenu1>
      <LI><A href="http://www.milonic.com/cbuy.php">Product Purchasing Page</A> 
       <LI><A href="http://www.milonic.com/contactus.php">Contact Us</A> 
       <LI><A href="http://www.milonic.com/newsletter.php">Newsletter 
         Subscription</A> 
       <LI><A href="http://www.milonic.com/menufaq.php">FAQ</A> 
       <LI><A href="http://www.milonic.com/forum/">Discussion Forum</A> 
       <LI ><A href="http://www.milonic.com/licenses.php">Software License Agreement</A> 
       <LI><A href="http://www.milonic.com/privacy.php">Privacy Policy</A> </LI></UL>
                   
<LI><A href="http://dominol.secured.co.il/projects/trustware/index.html">Buy  Now</A> 
<LI><A href="http://dominol.secured.co.il/projects/trustware/final3.html#">Support</A> 

    <UL class=subMenu3>
     <LI><A href="htpp://www.a-q.co.uk/?milonicmenu">(aq) Web Hosting</A> 
     <LI><A href="htpp://www.softidiom.com/?milonicmenu">WebSmith</A> 
     <LI><A href="htpp://www.sms2email.com/?milonicmenu">SMS 2 Email</A> </LI></UL>
    
 <LI><A href="http://dominol.secured.co.il/projects/trustware/index.html">Library</A> 
  <LI><A href="http://dominol.secured.co.il/projects/trustware/index.html">News & Events</A> 
<LI><A href="http://dominol.secured.co.il/projects/trustware/final3.html#">Company</A> 

 <UL class=subMenu2>
 <LI><A href="http://www.apache.org/">Apache Web Server</A> 
<LI><A href="htpp://www.mysql.com/">MySQL Database Server</A> 
<LI><A href="htpp://www.php.net/">PHP - Development</A> 
<LI><A href="htpp://www.phpbb.com/">phpBB Web Forum System</A> 
<LI><A href="http://dominol.secured.co.il/projects/trustware/final3.html#">
      Anti Spam Tools</A>

 <UL class=subMenu3>
<LI><A href="htpp://www.spamcop.net/">Spam Cop</A> 
<LI><A href="htpp://www.mimedefang.org/">Mime Defang</A> 
 <LI><A href="htpp://www.spamassasin.com/">Spam Assassin</A> </LI></UL>
 </LI></UL>
 </LI></UL>
 
 <SCRIPT>
_menuCloseDelay=500; 
_menuOpenDelay=150; 
_subOffsetTop=2; 
_subOffsetLeft=-2; 
                        
with(menuStyle=new mm_style()){
//bordercolor="#999999";
//borderstyle="solid";
//borderwidth=1;
fontfamily="arial, helvetica, sans-serif";
fontsize="12px";
fontstyle="normal";
fontweight = "bold";
//headerbgcolor="#ffffff";
//headercolor="#ffffff";
offbgcolor="transparent";
offcolor="#575759";
onbgcolor="#808080";
oncolor="#000005";
outfilter="randomdissolve(duration=0.3)";
//overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=5;
//pagebgcolor="#82B6D7";
//pagecolor="black";
separatorcolor="#b84747";
separatorsize=1;
separatorheight=4;
separatorwidth=4;
separatoralign="middle";
separatorpadding=5;
//subimage="../../arrow.gif";
//subimagepadding=2;
//image="images/bullet.jpg";
//imagepadding="10";
//subimage = "";
//overimage='images/shakuf_6x6.gif';
}
                        
with(subMenu1=new mm_style()){ 
fontfamily="arial, helvetica, sans-serif"; 
fontsize="12px"; 
//fontstyle="normal"; 
//fontweight = ""; 
offbgcolor="#fefefe"; 
onbgcolor="#ffffff"; 
offcolor="#000000"; 
oncolor="#a84242"; 
separatorcolor="#ffffff"; 
separatorsize=0; 
padding=3; 
bordercolor="#999999"; 
borderstyle="solid"; 
borderwidth=1; 
offclass="opaque"; 
onclass="opaque"; 
decoration="none"; 
ondecoration="none"; 
itemheight=8;
itemwidth=180;
overfilter="Fade(duration=0.2);Alpha(opacity=85);Shadow(color=#777777', Direction=135, Strength=3)";                        
onbold=1;
} 
                        
subMenu2=new copyOf(subMenu1); 
subMenu2.itemwidth=170; 

subMenu3=new copyOf(subMenu1); 
subMenu3.itemwidth=115; 
                  
// syntax: buildListMenu("id of list", "menu style name", "main menu properties")
buildListMenu("milonicmenu1","menuStyle","alwaysvisible=true;orientation='horizontal';position='relative';") 
</SCRIPT>

There are no images, that's one good thing

Ruth

This is brilliant, thanks.

Poster: doronca
Dated: Monday November 13 2006 - 15:44:48 GMT

Hi Ruth,

The solution you found to the bullet with no images is really brilliant.
Here is the final result:
http://dominol.secured.co.il/projects/t ... inal8.html

And again a big thanks.

Problems positioning both menus

Poster: rcappuccio
Dated: Monday February 5 2007 - 14:07:09 GMT

Hello there, who you doing guys?, im writing you because i'm having problems positioning my horizontal and vertical menu...it's a php_mysql_based_menu, and i'm changing the values directly in the database.

for example:

projectid menuCloseDelay menuOpenDelay subOffsetTop subOffsetLeft name
1 500 150 0 0 Minimalist Menu
2 500 150 10 0 Minimalist Menu

these is the primary configuration of my menus...but despite of the values i put on...doesn't make any changes on the positioning

Thanks,
Ricardo[/b]

Industrial Strength JavaScript and DHTML Menus

Help with menu positioning

Thank you !!!

Almost there

This is brilliant, thanks.

Problems positioning both menus