Back To Coranto Examples

Creating  a floating menu with headlines using Coranto and JavaScript.

Creating  a floating menu with headlines using Coranto and JavaScript.

First off I'd like to say that this is all my own work, but it isn't!  The actual javascript menu was based on a script by "MaXimuS" which was downloaded from the DHTML script collection at SimplytheBest.Net however the base script wasn't particularly friendly to sites with Cascading Style Sheets.  This modified version works a bit better with CSS but isn't 100% perfect.  But then... you're getting it for free, so don't complain! :)

 

I guess you want to see this working first... Take a look at this demo page from RailRoadTycoon.Info.  Note that if you use the menu to navigate off the page it won't appear on subsequent pages as it's not really part of the intended site design!

 

Yet again we'll make use of a template profile, in this case we're just going to use a VERY simple template and news style to populate the bottom half of the menu with the last 10 headlines.

 

Menu Template - menu.tmpl

Let's start with the template.  In this case our template will be used to generate JavaScript and not an .html page.  At the end of the day, they are all just text files anyway.

 

You can download this template if you right click on This Link and save it to file but I'll include it here for anyone really masochistic enough to want to read through it!

 

 

There's two sections of this template that we're interested in, the bit that controls the menu layout and the bit that controls the menu content.  You'll need to edit these a bit before you use the menu.

 

Near the top you'll find the "Default Settings", these control the colours and the position on the page and you should modify them to suit your sites style.

 

///// DEFAULT SETTINGS /////
YOffset=20; // no quotes!!
staticYOffset=20; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=1000; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.

menuBGColor="black";
menuIsStatic="yes";
menuWidth=140; // Must be a multiple of 10! no quotes!!

hdrFontFamily="arial, sans serif";
hdrFontSize="2";
hdrFontColor="#ffffff";
hdrBGColor="#8B8B49";

hdrAlign="left";
hdrVAlign="middle"; // Top/Middle/Bottom
hdrHeight="20";

linkFontFamily="Verdana";
linkFontSize="1";
linkBGColor="#fffff0";
linkOverBGColor="#DFE0C0";
linkTarget="_top";
linkAlign="Left";

barBGColor="#8B8B49";
barFontFamily="arial, sans serif";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="middle"; // Top/Middle/Bottom
barWidth=35; // no quotes!!

 

Near the bottom of the template is the actual menu, in this example it's in two parts, the "Fixed" navigation and the headlines.

 

startMenu("Menu", "M E N U")
addItem("Home", "http://www.railroadtycoon.info", "");
addItem("Maps", "http://www.railroadtycoon.info/maps.htm", "");
addItem("Scenarios", "http://www.railroadtycoon.info/scenarios.htm", "");
addItem("Gallery", "http://www.railroadtycoon.info/gallery.htm", "");
addItem("Forum", "http://www.railroadtycoon.info/forum", "");
addItem("Contest", "http://www.railroadtycoon.info/contest.htm", "");
addItem("Store", "http://www.cafepress.com/railroadtycoon", "_blank");
addItem("News", "http://www.railroadtycoon.info/news.htm", "");
addItem("Links", "http://www.railroadtycoon.info/links.htm", "");
addItem("Upload", "http://www.railroadtycoon.info/update", "");
addItem("Users", "http://www.railroadtycoon.info/users/index.htm", "");
addItem("Test Maps", "http://www.railroadtycoon.info/beta", "");
addHdr("Headlines");
<Field: Content>
endMenu()

 

First line starts and names the menu, the first parameter is the name for the "Top" of the menu and the second is the name for the vertical "Tab" for the menu.

 

Next lines are items for the static navigation, these are the item name, the URL and the target frame or window.  Note that there is also a default target in linkTarget in the settings.

 

The addHdr generates the next header in the menu, in this case it'll show as "Headlines", change this as needed, or even remove it altogether.

 

<Field: Content> is the good old Coranto template place-holder where we'll stick the headline menu options.

 

So once you've edited your menu.tmpl file upload it to your coranto folder.

 

Phew... that was a lot to do, but don't worry, you should only need to set up the template once, depending on how often you change colours.

News Style - java_menu

We need a news style that will create the addItem("Text","URL","Target"); lines, this is pretty simple and self explanatory in terms of the fields used.  We create a style called "java_menu":

 

addItem("<Field: Subject>", "http://www.railroadtycoon.info/news.htm<ItemAnchor>", "");

 

See, nothing complicated here, and even fewer tags than normal. Although you could spice it up and put things like the author etc. in the first set of ""'s along with the subject.

 

So now we've got the menu.tmpl template, the java_menu news style, what do we need to bring them all together?  Yes, it's Profile time!

Profile - java_menu

Create a standard profile called java_menu and edit it as follows:

 

Main Profile Settings

Display Name:

java_menu

Just leave this as is, unless you're going to be making multiple menus

File Name:

java_menu.txt

This isn't really used as the actual template will get the data

File Path:

/home/railroadtycoon/public_html/

 I'm going to store this in the root of the website, you could put it in a folder if you want, just make sure you know the relative path for when we get to actually using the menu on a page.  If it's stored in the root directory then we know it'll be /java_menu.html

Filter By Number

10

Filter By Time / Number / Skip Days / Skip Items:

Set these as you would normally.  In this case we have Filter By Number set to 10

Categories:

News

 We only want the news items.

Again, set this as you desire!

News Style:

java_menu

 Our style for building the menu items that we created earlier.

Display Coranto Link:

No Link

 We don't want it as it will cause problems with our script, your should have your Coranto link on your news page anyway right?

Headlines

Enable headlines

No (Off)

 We don't need them for this menu.

Advanced Profile Settings

HTML Template:

menu.tmpl

 Our base script read to rock and roll!

HTML File Title:

 Not needed

Sort Order:

Default (Reverse Chronological)

Newest news item at the top of the list, change it if you want!

Anchor Tags?

No (Off)

Important to have these OFF as they will screw up the java script if they are left in!

 

And that's it.... Save and enable this profile and Build News and you should find two files created in the folder you specified in File Path:  In this case our files are java_menu.html and java_menu.txt

 

Getting it working with a web page.

Add the following to the web pages where you want the menu to appear. It's best if you add it between <HEAD></HEAD> as this makes the menu execute faster. 

 

<STYLE><!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>
<SCRIPT SRC="/java_menu.html" language="JavaScript1.2"></SCRIPT>

 

The inline <style></style> statements are to prevent the links in the menu from changing colour etc. when they are activated/visited.  you could leave this out if you want.

 

The important line is the last line.  The SRC should be set to the URL of the java_menu.html file, in this case because we put it in the root directory we just use /java_menu.html if we'd put it in a menu folder then we would use /menu/java_menu.html.

 

Ok, it looks strange having the SRC as java_menu.html when we'd normally expect it to end in .js but don't worry, the browser doesn't really care about extensions and will load and run the .html as JavaScript anyway.

 

Go Test It!

And... We're finished.  Go fire up your page and see if the navigation works.

 [Home] [Services] [Clients] [Coranto]