Menu Advice

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

Menu Advice

Poster: johnpaul
Dated: Friday June 8 2007 - 12:30:45 BST

Hi I am currently using a Milonic menu on our existing college website

http://www.bsfc.ac.uk/index.html

I am starting a design for a new layout

http://www.bsfc.ac.uk/final/
and i would like to do a drop down menu system again, but try and get the layout to look like the example buttons i have already done , a (UL) inside a <div>

which would be the best menu to fit inside the following;

Code:

   <div id="menu">
      <ul>
         <li><a href="index.html">The College</a></li>
         <li><a href="index.html">Courses</a></li>
         <li><a href="index.html">Facilities</a></li>
         <li><a href="index.html">Student Services</a></li>
         <li><a href="news.html">News</a></li>
         <li><a href="index.html">Current Users</a></li>
         <li><a href="index.html">Jobs</a></li>
         <li><a href="index.html">Contact</a></li>         

      </ul>   
   </div>

I tried to import my existing one, nd quite simly it looked rather poor. didnt help ive setup an image border around the images via css.

http://www.bsfc.ac.uk/menuidea/

would i be abl to acomplish this with a milonic menu, or would i be better looking at an alternative (which i dont want to do).

Any advice greatfully apreciated.[/code]

Poster: Ruth
Dated: Friday June 8 2007 - 17:07:16 BST

Hi,

I'm not sure what it is you want. Do you want it as you have it in the final or do you want it as you have it in the 'menuidea'? They are totally different as to how the menu looks. You can get the Milonic to look either way.

Ruth

Poster: johnpaul
Dated: Monday June 11 2007 - 11:46:56 BST

the http://www.bsfc.ac.uk/final/

is the final mockup of our layout, so i would like a navigation menu to fit into that "div" box i have setup which currently has

Code:

   <div id="menu"> 
      <ul> 
         <li><a href="index.html">The College</a></li> 
         <li><a href="index.html">Courses</a></li> 
         <li><a href="index.html">Facilities</a></li> 
         <li><a href="index.html">Student Services</a></li> 
         <li><a href="news.html">News</a></li> 
         <li><a href="index.html">Current Users</a></li> 
         <li><a href="index.html">Jobs</a></li> 
         <li><a href="index.html">Contact</a></li>          

      </ul>    
   </div>

Poster: Ruth
Dated: Tuesday June 12 2007 - 10:15:03 BST

Hi,

Well, I set it up to look like what you have. It required a few changes. Using the div did not work because since the menu has divs and such in it I could not control the width no matter what I tried, it kept going beyond the right and left sides.

In place of the div I put this

Code:

<DIV class=headerphoto><img src="rotator.jpg" width="455" height="156" border="0"></DIV></DIV>
<div id=menu>
<table width=740 cellpadding=0 cellspacing=0 align="center">
<tr>
    <td><script type="text/javascript" src="milonic_src.js"></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 type="text/javascript" src="menu_data.js"></script></td>
</tr>
</table>
</div>
<!-- content-wrap starts here -->
<DIV id=content-wrap>

Then your menu data file is the following. There are some additions, you do not have to use what I have as to the offborder and onborder if you do not like it. I had to create a second style for the submenus and use a different onborder because the inset didn't really look good, I didn't think. Anyway, if you do not want to use the inset when you mouseover in the main menu, then just remove the offborder and onborder codes, and if you do that, then remove the subStyle section I have and rename the style=subStyle to style=style1 in all the submenus.

Note that the setup for the submenus style uses a method called copyOf, this method means that the submenus use everything in the style1 section except those things that were changed in the copyOf style.

I used the main setup you had on your final page, I just changed the names in the main menu, but that means those items open the submenu that was listed for the original item, so you may have to change the submenus if those new items are to use different submenus.

Menu data file

Code:

_menuCloseDelay=500;
_menuOpenDelay=150;
_scrollAmount=3;
_scrollDelay=20;
_followSpeed=5;
_followRate=40;
_subOffsetTop=4;
_subOffsetLeft=6;
buildAfterLoad=true;

with(style1=new mm_style()){
offcolor="#ffffff";
offbgcolor="#7ea8c6";
oncolor="#e8eff4";
onbgcolor="#006699";
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=0;
offborder="2px solid #7ea8c6";
onborder="2px inset #e8eff4";
fontsize=14;
fontstyle="normal";
fontweight="bold";
fontfamily="Trebuchet MS,sans-serif";
padding=4;
//subimage="arrow.gif";
headercolor="#ffffff";
headerbgcolor="#000099";
separatorcolor="#ffffff";
separatorsize=0;
menubgcolor="#7ea8c6";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color=#6294b9', Direction=180, Strength=5)";
valign="middle";
}

subStyle=new copyOf(style1)
subStyle.offborder="";
subStyle.onborder="1px dotted #e8eff4";

with(milonic=new menuname("mainmenu")){
position="relative";
style=style1;
alwaysvisible=1;
align="center";
menuwidth="100%";
menualign="center";
maxwidth=750;
itemwidth=90;
menuheight="30px";
margin="13px 0px 13px 0px";
orientation="horizontal";
aI("text=The College;showmenu=college;itemwidth=100;");
aI("text=Courses;showmenu=courses;");
aI("text=Facilities;showmenu=facilities;");
aI("text=Student Services;showmenu=student;itemwidth=120;");
aI("text=News;showmenu=news1;itemwidth=74;");
aI("text=Current Users;showmenu=current;itemwidth=110;");
aI("text=Jobs;showmenu=jobs;itemwidth=74;");
aI("text=Contact;showmenu=contact;itemwidth=79;");
}

with(milonic=new menuname("college")){
itemwidth=130;
style=subStyle;
align="left";
margin="5px";
aI("text=About The College;url=about_index.html;");
aI("text=College Corporation;url=about_corp.html;");
aI("text=College Policies;url=about_policy.html;");
aI("text=College Management;url=about_smt.html;");
aI("text=Message From The Principal;url=about_principal.html;");
aI("text=Our Mission;url=http://www.bsfc.ac.uk/exportdocs/BSFC_Mission_Statement.pdf;");
aI("text=Partner High Schools;url=about_partner.html;");
aI("text=Photo Gallery;url=gallery/index.php;");
}

with(milonic=new menuname("courses")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("showmenu=courses16_19;text=16-19;");
aI("showmenu=adult_ed;text=Adult / Evening Courses;");
}

with(milonic=new menuname("facilities")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=College Resources;url=facilities_index.html;");
aI("text=ICT Facilities;url=facilities_ict.html;");
aI("text=Student Council;url=facilities_student.html;");
aI("text=The Learning Curve;url=facilities_lrc.html;");
}

with(milonic=new menuname("student")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Ask Our Students;url=students_index.html;");
aI("text=Careers & H.E.;url=students_careers.html;");
aI("text=Financial Support;url=students_financial.html;");
aI("text=Learning Support;url=students_support.html;");
aI("text=Personal Tutor;url=students_personal.html;");
aI("text=Student Charter & Complaints;url=students_charter.html;");
}

with(milonic=new menuname("degree_course")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Programe Overview;url=exportdocs/Foundation_to_Health_Studies.pdf;");
aI("text=Important Dates;url=year0_dates.html;");
aI("text=Enquiry Form;url=year0_contact.html;");
}

with(milonic=new menuname("news1")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Examination Results;url=news_exam.html;");
aI("text=Important Dates;url=news_dates.html;");
aI("text=Latest News;url=news_news.html;");
}

with(milonic=new menuname("jobs")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Current Vacancies;url=vacancies_index.html;");
aI("text=Application Form;url=vacancies_application.html;");
aI("text=Staff Development Statement;url=http://www.bsfc.ac.uk/exportdocs/BSFC_Staff_Development_Policy.pdf;");
}

with(milonic=new menuname("current")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Staff E-Mail;url=http://compserv.bsfc.ac.uk/horde/;target=new;");
aI("text=Student E-Mail;url=http://student.bsfc.ac.uk/horde/;target=new;");
aI("text=Moodle VLE;url=http://vle.bsfc.ac.uk/moodle/;target=new;");
}

with(milonic=new menuname("contact")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Contact The College;url=contact_index.html;");
aI("text=How To Find Us;url=contact_findus.html;");
aI("text=Feedback/Problems;url=contact_feedback.html;");
aI("text=Request A Prospectus;url=contact_prospectus.html;");
aI("text=Website Credits;url=contact_credits.html;");
aI("text=Computer Services;url=http://compserv.bsfc.ac.uk;target=_NEW;");
}

with(milonic=new menuname("courses16_19")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Introduction & Entry Requirements;url=courses_index.html;");
aI("text=Enrichment Programme;url=courses_enrich.html;");
aI("text=Full Time Courses;url=courses_full.html;");
aI("text=Short Course Programme;url=courses_scp.html;");
}

with(milonic=new menuname("adult_ed")){
itemwidth=120;
style=subStyle;
align="left";
margin=2;
aI("text=Daytime (Outreach);url=courses_outreach.html;");
aI("text=Evening (ACE);url=courses_acl.html;");
}

drawMenus();

This looks like your page, but you'll have to test in your browsers. Hope this helps

Ruth

Poster: johnpaul
Dated: Friday June 15 2007 - 13:37:23 BST

Ruth

Thanks a million for your help and advice

did yours turn out something like this?

http://www.bsfc.ac.uk/final/menu.html

it partly works but the main menu items text is not hte same / layout as the http://www.bsfc.ac.uk/final/

Poster: Ruth
Dated: Friday June 15 2007 - 15:38:06 BST

Hi,

.If you're talking about the Student Services wrapping, put a non breaking line space in it. Actually, put a non breaking line space between words in all the items that have more than one word. So that would be The College, Student Services and Current users. The board won't let us post non-breaking line spaces even using the code button, but that is this [without the spaces between the letters] & n b s p;

If what you mean is you want the word Contact to wrap, you can do that also, but I do not recommend it. If you do and a user wants to get to Contact if they accidently move the mouse up a bit while mousing over Contact then the submenu for The College will open and contact will be unavailable until they move out of the College submenu. It could get frustrating. But, if you want to do it, then add 6 blank items after Contact

Code:

aI("text=;type=header;");

and add divides=2; in the menu area up where you have position="relative"; margin etc. Again, I do not recommend that you do that.

Ruth

Re: Menu Advice

Poster: misty
Dated: Friday September 28 2007 - 2:59:25 BST

Although the reference web sites are no longer available, I think that I may have the same issue as John used to have. Any advice is greatly appreciated.

In additional to the existing Blog theme menu items such as Home, Page1 and Page2(see green-bug-10 blog theme below by click on Test Run). I want to make a new menu item Page3, which has 3-level popup menus(i.e. Vertical Plain Text Menu. ). The question is how do I customize Page3 onto the existing green-bug-10 theme menu bar?
Thanks.

The green-bug-10 defines its own style ul and li in Style.css.

<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Page1</a></li>
<li><a href="index.html">Page2</a></li>
<li><a href="index.html">Page3</a></li>
</ul>
</div>

http://themes.wordpress.net/columns/2-c ... en-bug-10/

Re: Menu Advice

Poster: misty
Dated: Saturday September 29 2007 - 17:19:16 BST

I've soloved the menu integration issues. See the following URL for detail. thanks.
viewtopic.php?f=10&t=9232&p=44016#p44016

Industrial Strength JavaScript and DHTML Menus

Menu Advice

Re: Menu Advice

Re: Menu Advice