|
Menu One
Menu Teal
Menu White
Menu Green
Menu 4 Columns
USA States 5 Columns
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. Shown here are some
modifications to the basic Anylink CSS Menu
Mouse over this this is text to see a tooltip
And this is the Tooltip's text
CSS Tooltip Code
This tooltip is very simple and easy to implement. Just add the CSS styles to your page and use the code snippet below anytime you need a tooltip.
The CSS code:
|
<style type="text/css">
.ToolText{position:relative; }
.ToolTextHover{position:relative;}
.ToolText span{display: none;}
.ToolTextHover span{
display:block;
position:absolute;
border:1px solid black;
top:1.3em;
left:5px;
background-color:gray; color:white;
text-align: center;
}
</style>
The tooltip snippet:
<p class="ToolText" onMouseOver="javascript:this.className='ToolTextHover'" onMouseOut="javascript:this.className='ToolText'">
This is the text that will cause the tooltip
<span> And this is the Tooltip's text </span></p>
Just copy the snippet and replace the text (or content) with
your own
|
.
|
