[Solved]2 Menus - Different Styles

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

[Solved]2 Menus - Different Styles

Poster: mickley0007
Dated: Thursday October 26 2006 - 2:24:17 BST

Hi,
I am currently designing a site that has a horizontal menu going across the top of the page, and I would like to put a vertical menu on the left of the page. Both menus I would like to have in a table, but if I could figure out how to position the vertical one appropriately I wouldn't need to put that in a table. Nonetheless, I was able to put the horizontal menu across the top in a table and everything works fine after I consulted the table menu help site. Now, the question is how do I add a second menu to the page that is a different style (ie. vertical)? Is it possible? I looked at the multiple menu site, but that site is only for menus of the same type. Any help would be greatly appreciated! Thanks!

Poster: John
Dated: Thursday October 26 2006 - 15:02:37 BST

Yes, it's possible - and easy. Most folks simply create a second _data file (different filename, of course) containing the code for the other menu. The main menu code calls need to be on the page only once. Don't forget to add the call for the second _data file.

An example is at http://tiggrsuccess.com/.

Further discussion can be found by using the forum Search function.

Poster: mickley0007
Dated: Friday October 27 2006 - 12:12:33 BST

I checked the forum, and I found some useful links. Now I'm just to stupid on how to implement it. I can get the new vertical menu to show, but then the horizontal menu doesn't show...I am going to post the index1.html page and the two menu files. Any help would be greatly appreciated.

Horizontal Menu Code (Empty besides style because of setting horizontal in a table) menu_data1.js

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#0066ff";
offcolor="#ffffff";
onbgcolor="#003399";
oncolor="#ffffff";
outfilter="Blinds( Bands=1,direction=down, duration=0.3)";
overfilter="Blinds( Bands=1, direction=down, duration=0.3;Alpha(opacity=87);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

drawMenus();

menudata.js(Vertical Menu Code)

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;



with(menuStyle=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
image="images/whitedots.gif";
imagepadding=6;
offbgcolor="#003399";
offcolor="#ffffff";
onbgcolor="#0066ff";
oncolor="#ffffff";
outfilter="Blinds( Bands=1,direction=down, duration=0.3)";
ooverfilter="Blinds( Bands=1,direction=down, duration=0.3); Alpha(opacity=95)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
subimage="images/arrow.gif";
subimagepadding=2;
}

with(submenuStyle=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#0066ff";
offcolor="#ffffff";
onbgcolor="#333399";
oncolor="#ffffff";
outfilter="Blinds( Bands=1,direction=up, duration=0.4)";
overfilter="Blinds( Bands=1,direction=down, duration=0.55); Alpha(opacity=86)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
subimage="images/arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Aboutus")){
margin=7;
style=submenuStyle;
aI("text=District Information;");
aI("text=School Information;");
aI("text=Safety & Security;");
aI("text=School Closings;");
}

with(milonic=new menuname("Athletics")){
margin=7;
style=submenuStyle;
aI("showmenu=Fall;text=Fall Sports;");
aI("showmenu=Winter;text=Winter Sports;");
aI("showmenu=Spring;text=Spring Sports;");
aI("text=Hall of Fame;");
aI("text=Highschoolsports.net;url=http://highschoolsports.net/;");
}

with(milonic=new menuname("Fall")){
margin=7;
style=submenuStyle;
aI("text=Cheerleading");
aI("text=Cross Country;");
aI("text=Football;");
aI("text=Golf;");
aI("text=Boy's Soccer;");
aI("text=Girl's Soccer;");
aI("text=Girl's Tennis;");
aI("text=Volleyball;");
}

with(milonic=new menuname("Winter")){
margin=7;
style=submenuStyle;
aI("text=Girl's Basketball");
aI("text=Boy's Basketball;");
aI("text=Swimming;");
aI("text=Wrestling;");
}

with(milonic=new menuname("Spring")){
margin=7;
style=submenuStyle;
aI("text=Baseball;");
aI("text=Softball;");
aI("text=Boy's Tennis;");
aI("text=Track;");
}

with(milonic=new menuname("LHS Clubs")){
margin=7;
style=submenuStyle;
aI("text=Academic Challenge;");
aI("showmenu=Arts;text=The Arts;");
aI("text=CHAMPS;");
aI("text=FEA;");
aI("showmenu=ForeignLanguage;text=Foreign Language;");
aI("text=Game Club;");
aI("text=History Club;");
aI("text=Jo's Girls;");
aI("text=Key Club;");
aI("text=L.E.P.S.;");
aI("text=Newspaper");
aI("text=Science Club;");
aI("text=Student Council;");
aI("text=Teen Institute;");
aI("text=Web Team;");
aI("text=Yearbook;");
}

with(milonic=new menuname("Arts")){
margin=7;
style=submenuStyle;
aI("text=Art Club;");
aI("text=Band;");
aI("text=Choir;");
aI("text=Drama Club;");
aI("text=Speech & Debate;");
}

with(milonic=new menuname("ForeignLanguage")){
margin=7;
style=submenuStyle;
aI("text=French Club;");
aI("text=German Club;");
aI("text=Spanish Club;");
}

with(milonic=new menuname("Resources")){
margin=7;
style=submenuStyle;
aI("text=Staff;url=http://staff.louisville.sparcc.org");
aI("text=Announcements;");
aI("text=Lunch Menu;");
aI("text=Job Postings;url=http://www.leopard.sparcc.org/blog/jobs");
aI("showmenu=policy;text=Acceptable Use Policy;");
}

with(milonic=new menuname("policy")){
margin=7;
style=submenuStyle;
aI("text=Agreement;");
aI("text=PDF Version;");
aI("text=Web Version;");
}

with(milonic=new menuname("ReportCards")){
margin=7;
style=submenuStyle;
aI("text=District;");
aI("text=High School;");
aI("text=Middle School;");
aI("text=Fairhope;");
aI("text=North Nimishillen;");
aI("text=Fairhope;");
aI("text=Pleasant Grove;");
aI("text=Louisville Elementary;");
}

drawMenus();

index1.html homepage..both menus are attempting to be in a table the horizontal menu worked great before adding the vertical menu

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta name="generator" content="Adobe GoLive" />
      <title>Louisville High School</title>
      <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
      <script type="text/javascript" src="Javascript/milonic_src.js"></script>
      <noscript><a href="http://www.milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript>
<script type="text/javascript">
<!-- 
if(ns4)_d.write("<script language=JavaScript src=javascript/mmenuns4.js><\/script>"); 
else _d.write("<script language=JavaScript src=Javascript/mmenudom.js><\/script>"); 
-->
</script>
</style>
      <script type="text/javascript" src="javascript/menu_data.js"></script>
      <script type="text/javascript" src="javascript/menu_data1.js"></script>
   </head>

   <body link="#003399" vlink="#003399" alink="#003399">
      <div align="center">
         <div style="position:relative;width:685px;height:69px;-adbe-g:p;">
            <div style="position:absolute;top:0px;left:0px;width:384px;height:68px;-adbe-c:c">
               <font size="+7" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">L</font><font size="+3" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">ouisville </font><font size="+7" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">H</font><font size="+3" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">igh </font><font size="+7" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">S</font><font size="+3" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">chool</font></div>
            <div style="position:absolute;top:25px;left:400px;width:284px;height:43px;-adbe-c:c">
               <font size="-1" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">1201 S. Nickelplate Louisville, Ohio 44641<br />
                  (330) 875-1438<br />
               </font></div>
         </div>
         <div style="position:relative;width:689px;height:182px;-adbe-g:p;">
            <div style="position:absolute;top:0px;left:0px;width:224px;height:181px;">
               <img src="images/1.jpg" alt="" height="181" width="224" border="0" /></div>
            <div style="position:absolute;top:0px;left:224px;width:228px;height:181px;">
               <img src="images/2.jpg" alt="" height="181" width="228" border="0" /></div>
            <div style="position:absolute;top:0px;left:452px;width:236px;height:181px;">
               <img src="images/3.gif" alt="" height="181" width="236" border="0" /></div>
         </div>
         <table width="359" border="0" cellspacing="2" cellpadding="0">
            <tr>
               <td>
                  <script type="text/javascript" src="Javascript/milonic_src.js"></script>
                  <script type="text/javascript" src="Javascript/mmenudom.js"></script>
                  <script type="text/javascript" src="Javascript/menu_data.js"></script>
                  <script type="text/javascript">with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
top=10;
aI("text=Home;url=http://www.leps.sparcc.org/;");
aI("showmenu=Aboutus;text=About LHS;");
aI("showmenu=Athletics;text=Athletics;");
aI("showmenu=LHS Clubs;text=LHS Clubs;");
aI("showmenu=Resources;text=Parent Resources;");
aI("showmenu=ReportCards;text=State Report Cards;");
}
drawMenus();
</script>
               </td>
            </tr>
         </table>
         <div style="position:relative;width:673px;height:281px;-adbe-g:p;">
            <div style="position:absolute;top:32px;left:256px;width:416px;height:176px;-adbe-c:c">
               <font size="4" color="#003399" face="Verdana, Arial, Helvetica, sans-serif">The Louisville High School Web Site is currently undergoing disaster recovery. We are sorry for any inconvenience. We hope to have all pages up and running as soon as possible. For your convenience, the links currently updated are posted on the left.</font></div>
         </div>
      </div>
      <p>
            </font></a></p>
      <table width="159" border="1" cellspacing="2" cellpadding="0">
         <tr>
            <td>
               <script type="text/javascript" src="Javascript/milonic_src.js"></script>
               <script type="text/javascript" src="Javascript/mmenudom.js"></script>
               <script type="text/javascript" src="Javascript/menu_data1.js"></script>
               <script type="text/javascript">with(milonic=new menuname("MainVert")){
alwaysvisible=1;
position="relative";
left=10;
overflow="scroll";
style=menuStyle;
top=10;
aI("text=Superintendent;url=http://www.apache.org/;");
aI("text=Treasurer;url=http://ww.mysql.com/;");
aI("text=Curriculum;url=http://www.php.net/;");
aI("text=Special Programs;url=http://www.phpbb.net/;");
aI("text=Gifted Education;url=http://www.apache.org/;");
aI("text=Technology;url=http://ww.mysql.com/;");
aI("text=Food Service;url=http://www.php.net/;");
aI("text=Buildings & Grounds;url=http://www.phpbb.net/;");
aI("text=Transportation;");
}
drawMenus();
</script>
            </td>
         </tr>
      </table>
      <p><a href="http://www.milonic.com">DTML Menu courtesy of Milonic.com</font></a></p>
   </body>

</html>

Solved

Poster: mickley0007
Dated: Saturday October 28 2006 - 14:53:22 BST

Nevermind...I finally figured out what I was doing wrong after numerous attempts...Thanks again, and soon I will be a licensed member as I have convinced my school to by the license for their site...I only have one more problem which is how to change the color of the menu button when you are at the site it is linked to..(ie home button is light blue instead of dark blue when on the homepage) but I think there is an easy code for that...Thanks again for the great product!

Poster: Ruth
Dated: Sunday October 29 2006 - 0:42:35 BST

Hi,

Check for pagebgcolor and pagecolor settings. Those are to let the user know where in the menu they are. So, if you are on the Home page and the link for it is your domain url and the page is at that url then those page settings in the menu will show. You can either block them using // in front of them in the menu_data file or you can change them to be what you want. Many block the pagebgcolor and just put in a pagecolor so that the text changes color to show where the user is in the menu.

Hope that made sense

Ruth

Industrial Strength JavaScript and DHTML Menus

[Solved]2 Menus - Different Styles

Solved