Menu Advice

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
johnpaul
Beginner
Beginner
Posts: 3
Joined: Fri Jun 08, 2007 12:24 pm

Menu Advice

Post by johnpaul »

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: Select all

	<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]
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
johnpaul
Beginner
Beginner
Posts: 3
Joined: Fri Jun 08, 2007 12:24 pm

Post by johnpaul »

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: Select all

   <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>
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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: Select all

<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: Select all

_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
johnpaul
Beginner
Beginner
Posts: 3
Joined: Fri Jun 08, 2007 12:24 pm

Post by johnpaul »

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/
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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: Select all

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
misty
Beginner
Beginner
Posts: 9
Joined: Fri Sep 28, 2007 2:34 am

Re: Menu Advice

Post by misty »

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/
misty
Beginner
Beginner
Posts: 9
Joined: Fri Sep 28, 2007 2:34 am

Re: Menu Advice

Post by misty »

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