Javascript: Data e Hora no site



Javascript: Data e Hora no site

Dropdown Menu

FF1+ IE5+ Opr7+

AnyLink CSS Menu

Author: Dynamic Drive

Note: Updated August 15th 05': Now if menu doesn't have room to drop down nor down, it is positioned at top of visible window edge instead. Only "anylink.js" modified.

Description: AnyLink CSS Menu is a cool script that adds a drop down menu to any link on your page. Each menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and potentially much easier to deploy and customize than menus where the contents are stored inside the script. And to top things off, the drop down menu behaves intelligently in that if it's too close to the four corners of the browser window, it will reposition itself to avoid being obscured partly.

Be sure to also check out AnyLink Drop Down Menu, which differs from AnyLink CSS Menu mainly in that the menu contents are specified inside the script. If your site is dynamic, this may be an easier script to deploy across the entire site.

Demo:

[pic]

[pic]

Directions [pic]

Step 1: This script uses two external files. Download "anylink.css" and "anylink.js" (by right clicking each file, and selecting "Save As"). Be sure to upload them to your webpage directory.

Step 2: Add the below code to the HEAD section of your page:

Top of Form

Select All

[pic]

Bottom of Form

Step 3: Add the following sample HTML to the BODY of your page, which demonstrates how to set up both the Anchor link and drop down menu associated with it:

Top of Form

Select All

[pic]

Bottom of Form

Customizing

This script is very easy to customize and is flexible. The code of Step 3 shows the basic code for an Anchor link and associated menu:

Web Design

JavaScript Kit



Coding Forums

CSS Drive

The Anchor link in this case is "Web Design", and the drop down menu, the entire DIV that follows it. You can place the DIV anywhere on your page you see fit, and not necessarily directly below the anchor link.

Pay attention to the code in red, as they are mandatory for each Anchor Link plus Menu you're setting up. "anylinkmenu2" should be an arbitrary but unique ID you assign to each menu DIV on your page (), which this ID entered into the Anchor Link:

onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'uniqueID')"

This lets the Anchor Link know which menu to reveal. Apart from this, you can customize the look of your DIV very liberally, either by adding a style="" attribute inside the tag, or edit the css of "anylink.css."

Switch Menu

Author: Martial B | Homepage

Note: Modified Jan 21st, 04' by DD. Added "sitewide" and "local" cookie persistence feature.

Description: Switch Menu is a unique navigational script with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on while contracting the rest. This script is DOM based, so it works in IE5/NS6/Opera7+ while degrading well with older browsers such as IE4/NS4. For the later the menu will appear fully expanded from the start.

New: Switch Menu now supports persistence (so it remembers which menu item was last expanded) whenever you revisit the page. To sweeten the deal, you can choose between "sitewide" and "local" persistence, with the former remembering the menu state across your entire site. This is useful if you have the exact same Switch Menu script on multiple pages on your site (ie: as a navigational bar), and it makes sense for the persistence to last from page to page.

Demo: Click on below menu items.

Site Menu

- What's New

- What's hot

- Revised Scripts

- More Zone

FAQ/Help

- Usage Terms

- DHTML FAQs

- Scripts FAQs

Help Forum

- Coding Forums

Cool Links

- JavaScript Kit

- Freewarejava

- Cool Text

- [pic]

- Link to DD

- Recommend Us

- Email Us

[pic]

Directions [pic]

Step 1: Insert the below code to the of your page:

Top of Form

Select All

[pic]

Bottom of Form

Step 2: And herein lies the HTML code for the menu itself. Add the below where you want the menu to appear on your page:

Top of Form

Select All

[pic]

Bottom of Form

Customization

So you're now wondering how flexible the script is when it comes to customizing the menu to your liking. The good news is, quite.

Physical changes (adding/deleting items) to the menu are all done in the code of Step 2. Study it for a while, and you'll soon see the required structure. All menu items must be added within the "masterdiv' DIV. For each item, wrap the containing links in a SPAN tag with a unique incrementing ID starting with "sub1", (ie: "sub1", "sub2" etc), and use this ID within the onClick event handler to expand/contract it. As you can see in the demo, an image can be used for the menu item itself instead of plain text. 

To make cosmetic changes to the menu, it is recommended you do so via CSS, by editing the style sheet of Step 1.

Enjoy this fully DOMesticated script!

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download