CSS Pop Out Menu Test

Implementation for St. James' Website -- Version 2

The menu displayed to the left is under development for the St. James' church website and is shown only for testing and review/comment purposes. This is a stand-alone test page that is not integrated into the fabric of the website, so don't expect links on it to work to get to other parts of the site. To say that another way, since this page is intended only to show the shape/size, structure and appearance of the menu, none of the links in it are active, so clicking on a menu entry only re-displays the same page; i.e., the action has no effect.

For purposes of discussion and for possible comparison with other versions we might create in the future, we will call this Version 2. This version incorporates the comments received on version 1, which were:

• Elton, 4/25/10: - Change "Helping St. James'" to "Giving to St. James'"; - Have links to diocese and national church (these will be in the footer)
• Tracy Lively, 4/26: - Some of your questions about the appearance of the menu will be easier to answer after it is placed on real pages; - financial giving needs its own button
• John Miers, 4/26: - I'd like pastoral Care under Other Ministries
• Mary Miers, 4/27: - under "Ministries and Programs," I think the MDGs should follow M&O.

This menu will float down the page as you scroll down to read content that is longer than one screen, so the menu should always be visible.

Comments on this menu are welcome. I am interested to know what you think of the colors, the layout, and how well the menu works for you. Aspects I am particularly interested in are:

• Appearance:
  • colors, size of text
  • fit: how does the menu fit in your screen? (Do you have to scroll down to see the whole menu?)
  • fit: does the menu take up too much width? (It will be on the left side of the page content, just as it is on this demo page.)
• Structure and Grouping:
  • Are the menu items what we think they ought to be, given the content we have on the site now? (This is not an invitation for pie-in-the-sky future wishes!)
  • Are the items in the right order?
  • Are the subordinate items appropriately grouped?
• Performance of the popout feature:
  • does the menu work in your browser? (Do the popout lower levels appear when you mouse over an entry that has a little arrow in it? Are the lower levels formatted (color, size, font, etc.) the same way as the top level?)
  • does the menu appear immediately when the page loads, or is there a lag?
  • do the popouts appear quickly enough?
  • do the popouts appear when they should and disappear when they should?
  • do the popouts ever disappear when they'r not supposed to?
• Performance of the floating/sliding feature:
  • does the menu slide up and down in your browser?
  • is it still legible as it slides?
  • does the menu slide too far, so that it goes out of view?
  • the floating/sliding is accomplished with a Javascript script, which means you have to allow scripts to operate within your browser. Do you dislike having to do that?

Browsers vary on how they render the source code of a web page, no matter how the page is coded. For this reason, I test all new capabilities in several different browsers (including Chrome, Firefox, Safari and Internet Explorer) on different operating systems (Windows XP and Vista, Mac OSX, and Ubuntu UNIX). Nevertheless, something may slip by me. So please, if you have comments, let me know what browser you are using (and what version if it is Internet Explorer) and whether you are using it on a PC, a Mac, or a UNIX platform. (To see what version of the browser you are using, click on Help|About.)

Bill

The material below is really here for filler, to make the page longer in order to provide an opportunity to demonstrate the ability of the menu to slide down the page, but you might get a chuckle out of it. It was posted recently on Facebook by a long-time St. James' friend, Patti Teale. The content is in the public domain:

You might be an Episcopalian if . . .

• . . . you know the best way to quiet a room full of them is to say, "The Lord be with you!"
• . . . when you watch Star Wars and they say "May the force be with you," you automatically reply, "And also with you."
• . . . the only good reason to raise your hand during a hymn is to question the organist's re-harmonization.
• . . . when someone says, "Let us pray," you automatically hit your knees.
• . . . you have totally memorized Rite I, Rite II, and the first three episodes of The Vicar of Dibley.
• . . . you know the difference between a surplice and a cotta -- and the appropriate use of each.
• . . . hearing people pray in the language of "jesuswejus" makes you want to scream.
• . . . words like: "vouchsafe", "oblation", "supplications", "succor", "bewail", "wherefore", "dost" and "very" (in its archaic sense) are familiar to you even if you don't have a clue that they mean.
• . . . your groomsmen at your wedding whisper "with God's help" during your vows after you say "I will".
• . . . you can rattle off such tongue twisters like: ". . . who made there by his one oblation of himself once offered a full and perfect sacrifice, oblation and satisfaction for the sins of the world" and "Wherefore, O, Lord and Heavenly Father, we thy people, do celebrate and make here, with these gifts which we offer unto thee, the memorial thy Son hath commanded us to make . . ." without missing a beat.
• . . . you think that the Bible is a holy book because it quotes the Book of Common Prayer so well.
• . . . while looking for a can opener in the church kitchen, all you can find are four corkscrews.
• . . . your choir director suggests discussing something over a beer after choir rehearsal.
• . . . you catch yourself genuflecting or bowing as you enter a row of seats in a theater.
• . . . when you visit any Protestant church, you say, "Where are the kneelers?" or, "Where is the altar?!"
• . . . you can pronounce "innumerable benefits procured unto us by the same."
• . . . the word "Sewanee" puts a lump in your throat.
• . . . you ever find yourself saying, "Oh, but we've never done it that way before."
• . . . when visiting a Roman Catholic church, you are the only Ah-men in a sea of A-mens.
• . . . your covered dish for the potluck dinner is escargot in puff shells.
• . . . you know that a primate isn't just a monkey.
• . . . you know that a sursum corda is not a surgical procedure.
• . . . you know Agnus Dei is not a woman.
• . . . your picnic basket has sterling knives and forks (entree, fish, salad and cake).
• . . . you know how to finish the phrase "and I will raaaaise them up, and I will raaaaise them up..."
• . . . you know that the nave is not a playing card.
• . . . when your friend says "I'm truly sorry," you reply, "and you humbly repent?"
• . . . you consider a sticker on your car to be an outward and visible sign of an inward and spiritual grace.
• . . . you know that "humble access" has nothing to do with a security clearance.
• . . . while watching the movie "The Madness of King George" you're able to recite the Collect for Purity with the King.
• . . . you know that the Senior Warden and the Junior Warden are not positions in the local prison.
• . . . you think the most serious breach of propriety one can commit is failure to chill the salad forks.
• . . . you not only talk about God, but God is placed in the palm of your hand.

Lorem Ipsum

The following information about Lorem Ipsum comes from http://www.lipsum.com/:

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."

What is Lorem Ipsum?

Lorem Ipsum is simply dummy (but not random) text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)