Jump to content


Transmenu

Started by summean, Mar 02 2005 08:38 PM

  • You cannot reply to this topic
61 replies to this topic

#1 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 02 March 2005 - 08:38 PM

Hello folks! It has been a while since I've had time to do anything with Etomite, but things are finally settling down and I decided to convert this menu yesterday..

Snippet name: TransMenu
Author: summean
Version: 0.3 (Beta)
More info: View This Snippet
Description:
This is a nice javascript drop-down menu created by Aaron Boodman over at youngpup.net. I have simply created a couple of snippets that will allow this menu to work with Etomite.
Currently, it works with 3 "levels" of links. More may be added later though.

To install:

Download the zip file below.

Unzip. Notice the 2 text files. Open, then copy/paste each of them into a new snippet in your manager. (TransMenu.txt would be snippet: TransMenu)

There are 5 files in assets/images/transmenu/ and 3 files in assets/site/. Copy/Upload these files to your webserver where Etomite is installed, keeping the directory structure the same!

Open the template you would like to add this menu to.

In the <head> section, add [[TransMenu_Head?id=__]] where __ is the id of the folder containing the links you want to display. (You could just add [[TransMenu_Head]] and the snippet will default to 0, which is the Etomite root)

Change your <body> tag to <body onload="init()">

In the body section of your template, add [[TransMenu?id__]] where __ is the id of the folder containing the links to display. Make sure you use the same id as you did for TransMenu_Head!! (Again, you could also just add [[TransMenu]] and the snippet will default to 0, which is the Etomite root).

Style your menu by editing transmenu.css in assets/site/ ...

Updated: March 4, 2005
Download: TransMenu 0.6.3
Attached File  TransMenu_063.zip   37.76K   1323 downloads
Just the updated snippets:
Attached File  TransMenu_Head.txt   2.25K   631 downloads
Attached File  TransMenu.txt   2.53K   598 downloads
Just the updated CSS File:
Attached File  transmenu.css.txt   3.11K   584 downloads

Version History:
*0.6.1 - Initial release
*0.6.2 - XHTML 1.1 compliant, Friendly URL support
*0.6.2 - Removed {overflow: hidden;} from style sheet to fix a scrollbar bug.

The javascript is exactly how it was when I downloaded it from youngpup.net. You can edit the files if you want change menu speeds, change the path to the images, or whatever. Although the author of the script doesn't "support" it, he and others post problems & resolutions here so you may want to check that out before you ask a question here.

As you may notice, there are 2 javascript files (transmenu.js & transmenuC.js) .. transmenu.js contains all the code comments and is spaced in a way to make it more easily readable. transmenuC has no comments, and no extra lines to reduce the size of the script. By default, the snippets call transmenu.js, but you can easily change this in the snippets to call transmenuC.js ... it may improve you load time a little bit!

Edited by summean, 14 September 2005 - 04:02 AM.

#2 Stevio

    Etomite Forum Newbie

  • Member
  • 26 posts

Posted 03 March 2005 - 03:54 PM

Respect :) Very beautiful menu. Also work great in Firefox :)

#3 Guest_rthrash_*

  • Guests

Posted 03 March 2005 - 04:32 PM

Do you know if by chance the dropdowns on this menu will cross frames in a browser?

#4 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 03 March 2005 - 05:34 PM

rthrash, on Mar 3 2005, 11:32 AM, said:

Do you know if by chance the dropdowns on this menu will cross frames in a browser?
I *think* that it will. However, you'll probably have to modify some of the code to add targets to the links. If you'll look at the comments on the menu developers website here you'll see some of things (like frames) that other people have run into and what they did to fix it. Another big thing people seem to have is running this menu over a flash object. I think someone found a workaround though and posted it in the comments.

#5 amjelnes

    Etomite Forum Newbie

  • Member
  • 3 posts

Posted 04 March 2005 - 12:41 PM

Gotta say you are an angel.......... I'm already using TransMenu but haven't been able to transform it to Etomite.

It's working and I'm crying happy tears :D

#6 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 02:09 PM

It doesn't seem to be valid XHTML. Anyone a "valid" version?

ERRORS GIVEN:

Line 5, column 72: end tag for "link" omitted, but OMITTAG NO was specified

...="text/css" href="assets/site/transmenu.css">

You may have neglected to close a tag, or perhaps you meant to "self-close" a tag; that is, ending it with "/>" instead of ">".

✉

Line 5, column 0: start tag was here

<link rel="stylesheet" type="text/css" href="assets/site/transmenu.css">

Line 6, column 60: required attribute "type" not specified

<script language="javascript" src="assets/site/transmenu.js"></script>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

✉

Line 7, column 29: required attribute "type" not specified

<script language="javascript">

✉

Line 77, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="1" href="1">home</a>

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

✉

Line 78, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="13" href="13">courses</a>

✉

Line 79, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="17" href="17">research</a>

✉

Line 80, column 7: value of attribute "id" invalid: "4" cannot start a name

<a id="4" href="4">Search this site</a>

✉

Line 82, column 29: required attribute "type" not specified

<script language="javascript">

#7 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 04 March 2005 - 02:15 PM

amjelnes, on Mar 4 2005, 07:41 AM, said:

Gotta say you are an angel.......... I'm already using TransMenu but haven't been able to transform it to Etomite.

It's working and I'm crying happy tears  :D
Glad I could help!

#8 amit0910

    Etomite Forum Newbie

  • Member
  • 9 posts

Posted 04 March 2005 - 02:17 PM

Thanks for a very beautiful menu...
I really appreciate your efforts.

Cheers,
Amit

:D

#9 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 02:38 PM

Great job!

INSERTING the following in the two snippets where applicable (2 in Head snippet and 1 in other snippet)

type=\"text/javascript\"

Solves part of the validation errors. Remains the use of ID's rather than friendly URLS which remains giving:

Below are the results of attempting to parse this document with an SGML parser.

Line 77, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="1" href="1">home</a>

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

Line 78, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="13" href="13">courses</a>

Line 79, column 7: value of attribute "id" invalid: "1" cannot start a name

<a id="17" href="17">research</a>

Line 80, column 7: value of attribute "id" invalid: "4" cannot start a name

<a id="4" href="4">Search this site</a>

How can these snippets use FRIENDLY URLS?

#10 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 04 March 2005 - 04:18 PM

Okay.

I updated everything so that it will validate XHTML 1.1 Strict. I should've probably checked in the first place...my bad!

Basically, I had to change the script "language" calls to "type", then I updated how the snippet creates an ID for each link. The validator didn't like a numeric ID, so now IDs are created by pagetitle (replacing spaces with "_") + the pageid @ the end (in case you have multiple docs with the same pagetitle)

Also, the links now use Friendly URLs! (I know it said 'aliases' earlier.. I'm an idiot)

Enjoy!

(The new downloads are in the original post @ the top)

Edited by summean, 04 March 2005 - 04:47 PM.

#11 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,524 posts
  • Gender:Male

Posted 04 March 2005 - 04:43 PM

eko40, on Mar 4 2005, 10:38 AM, said:

How can these snippets use FRIENDLY URLS?

Unless the Javascript is interfering, and I don't think it can, it appears that the snippet code is already written to take advantage of Friendly URL's by using [~$id~] in the hyperlinks... :betterwink: But I haven't played with TransMenu yet, so I can say for certain that Friendly URL's will work... B)

#12 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 04 March 2005 - 04:43 PM

I have updated this snippet in the Snippet Library!

[This is an automatically created message]

#13 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 05:43 PM

rad14701, on Mar 4 2005, 05:43 PM, said:

Unless the Javascript is interfering, and I don't think it can, it appears that the snippet code is already written to take advantage of Friendly URL's by using [~$id~] in the hyperlinks... :betterwink:  But I haven't played with TransMenu yet, so I can say for certain that Friendly URL's will work... B)

Hi Rad14701, I tried it on my site and it didn't, hence my comment. It seems resoved now, so'll will install the improved scripts (THANKS Summean).

#14 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 05:47 PM

Nov valid XHTML, Great, but not valid CSS:

Line: 73 Context : .transMenu .item
Invalid number : cursor hand is not a cursor value : hand

Line: 82 Context : .transMenu .background
Parse Error - -moz-opacity:.8;

Line: 87
Parse Error - opacity=80); } .transMenu .shadowRight

Line: 91
Parse error - Unrecognized : -moz-opacity:.4;

Line: 96
Parse Error - opacity=40); } .transMenu .shadowBottom

Line: 100
Parse error - Unrecognized : -moz-opacity:.4;

Line: 105
Parse Error - opacity=40); } .transMenu .item.hover

#15 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 04 March 2005 - 07:05 PM

The .css file is like I got it from youngpup.net.. I doubt there is a way to have this menu fully functional with 100% valid CSS, although I think the javascript detects the browser and uses the appropriate classes... You'll just have to mess around with the classes to see what you can come up with.

#16 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 08:52 PM

Indeed a difficult one. I'm not to bothered about valid CSS although before I used this mod I managed to have it validate. Will see what can be done, but fear the worst.

#17 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 09:07 PM

The snippet causes the browser scrollbar to disappear. It seems to relate to TransMenu_Head and possibly the css file. See www.prwiki.org my test site. Click on Courses and then BA(Hons) Public Relations to see the old menu which has the scrollbars.

What to correct?

#18 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,524 posts
  • Gender:Male

Posted 04 March 2005 - 09:38 PM

See my post regarding this issue Here... B) This thread appears to be somewhat of a double-post thingy... :blink:

#19 summean

    Etomite Forum Fan

  • Member
  • Pip
  • 89 posts

Posted 04 March 2005 - 09:58 PM

As RAD stated in the other post, the culprit is:

body { height: 100%; overflow: hidden; }

Actually, its just the overflow: hidden; part. Remove it from transmenu.css, but make sure you leave height: 100% ... if you remove it, the submenus will look out of place in IE.


(I updated the zip download & added the style sheet to the original post)

#20 Guest_eko40_*

  • Guests

Posted 04 March 2005 - 10:10 PM

rad14701, on Mar 4 2005, 10:38 PM, said:

See my post regarding this issue Here... B)  This thread appears to be somewhat of a double-post thingy... :blink:

Indeed kind of double posting as it was the same issue covered in two threadsd, sorry! The solution is excellent, thanks!
Back to Completed Snippets


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users