|
|
| Line 2: |
Line 2: |
| | | | |
| | <head> | | <head> |
| | + | </head> |
| | | | |
| - | <style type="text/css"> | + | <body> |
| | + | <STYLE type=text/css id="default" title="default" name="default"> |
| | | | |
| - | .anylinkcss{
| + | *::-moz-any-link br,*:-moz-any-link br { |
| - | position: absolute;
| + | /*a workarround for mozilla*/ |
| - | left: 0;
| + | display:none; |
| - | top: 0;
| + | |
| - | visibility: hidden;
| + | |
| - | border: 1px solid black;
| + | |
| - | border-bottom-width: 0;
| + | |
| - | font: normal 12px Verdana;
| + | |
| - | line-height: 18px;
| + | |
| - | z-index: 100; /* zIndex should be greater than that of shadow's below */
| + | |
| - | background: lightyellow;
| + | |
| - | width: 200px; /* default width for menu */
| + | |
| | } | | } |
| - | | + | div#menu * { |
| - | .anylinkcss ul{ | + | cursor: pointer; /*because IE displays the text cursor |
| - | margin: 0;
| + | if the link is inactive*/ |
| - | padding: 0;
| + | } |
| - | list-style-type: none;
| + | .disabled { |
| | + | color: red !important; |
| | + | background: none !important; |
| | + | } |
| | + | div#menu { |
| | + | background: #F5F5DC; |
| | + | font: 10px Verdana, sans-serif; |
| | + | height: 15px; |
| | + | white-space: nowrap; |
| | + | width: 100%; |
| | } | | } |
| | | | |
| - | .anylinkcss ul li a{ | + | div#menu .a { |
| - | width: 100%;
| + | background: #F5F5DC; |
| - | display: block;
| + | border: 1px solid #F5F5DC; |
| - | text-indent: 3px;
| + | color: #000000; |
| - | border-bottom: 1px solid black; | + | text-decoration: none; |
| - | padding: 1px 0;
| + | |
| - | text-decoration: none; | + | |
| - | font-weight: bold;
| + | |
| - | text-indent: 5px;
| + | |
| | } | | } |
| | | | |
| - | .anylinkcss a:hover{ /*hover background color*/ | + | div#menu .a table { |
| - | background: black;
| + | display: block; |
| - | color: white;
| + | font: 10px Verdana, sans-serif; |
| | + | white-space: nowrap; |
| | } | | } |
| | | | |
| - | /* ######### Alternate multi-column class for drop down menus ######### */
| + | div#menu table, div#menu table a { |
| - | | + | display: none; |
| - | | + | |
| - | .anylinkcsscols{
| + | |
| - | position: absolute;
| + | |
| - | left: 0;
| + | |
| - | top: 0;
| + | |
| - | visibility: hidden;
| + | |
| - | border: 1px solid black;
| + | |
| - | padding: 10px;
| + | |
| - | font: normal 12px Verdana;
| + | |
| - | z-index: 100; /*zIndex should be greater than that of shadow's below*/
| + | |
| - | background: #DEFFCA;
| + | |
| | } | | } |
| | | | |
| - | .anylinkcsscols .column{ | + | div#menu .a:hover, div#menu div.menuitem:hover { |
| - | width: 130px;
| + | background: #7DA6EE; |
| - | float: left;
| + | border: 1px solid #000080; |
| | + | color: #0000FF; |
| | + | margin-right:-1px; /*resolves a problem with Opera |
| | + | not displaying the right border*/ |
| | } | | } |
| | | | |
| - | .anylinkcsscols .column ul{ | + | div#menu .a:hover table, div#menu div.menuitem:hover table{ |
| - | margin: 0;
| + | background: #FFFFFF; |
| - | padding: 0;
| + | border: 1px solid #708090; |
| - | list-style-type: none;
| + | display: block; |
| | + | position: absolute; |
| | + | white-space: nowrap; |
| | } | | } |
| | | | |
| - | .anylinkcsscols li{ | + | div#menu .a:hover table a, div#menu div.menuitem:hover table a { |
| - | padding-bottom: 3px; | + | border-left: 10px solid #708090; |
| | + | border-right: 1px solid white; /*resolves a jump problem*/ |
| | + | color: #000000; |
| | + | display: block; |
| | + | padding: 1px 12px; |
| | + | text-decoration: none; |
| | + | white-space: nowrap; |
| | + | z-index: 1000; |
| | + | |
| | } | | } |
| | | | |
| - | /* ######### class for shadow DIV ######### */
| + | div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover { |
| - | | + | background: #7DA6EE; |
| - | | + | border: 1px solid #000000; |
| - | .anylinkshadow{ /*CSS for shadow. Keep this as is */ | + | border-left: 10px solid #000000; |
| - | position: absolute;
| + | color: #000000; |
| - | left: 0; | + | display: block; |
| - | top: 0;
| + | padding: 0px 12px; |
| - | z-index: 99; /*zIndex for shadow*/
| + | text-decoration: none; |
| - | background: black;
| + | z-index: 1000; |
| - | visibility: hidden;
| + | |
| | } | | } |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - |
| |
| - | var anylinkcssmenu={
| |
| - |
| |
| - | menusmap: {},
| |
| - | effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
| |
| - |
| |
| - | dimensions: {},
| |
| - |
| |
| - | getoffset:function(what, offsettype){
| |
| - | return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
| |
| - | },
| |
| - |
| |
| - | getoffsetof:function(el){
| |
| - | el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
| |
| - | },
| |
| - |
| |
| - | getdimensions:function(menu){
| |
| - | this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
| |
| - | docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
| |
| - | docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
| |
| - | docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
| |
| - | docscrolly:window.pageYOffset || this.standardbody.scrollTop
| |
| - | }
| |
| - | if (!this.dimensions.dropmenuw){
| |
| - | this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
| |
| - | this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | isContained:function(m, e){
| |
| - | var e=window.event || e
| |
| - | var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
| |
| - | while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
| |
| - | if (c==m)
| |
| - | return true
| |
| - | else
| |
| - | return false
| |
| - | },
| |
| - |
| |
| - | setopacity:function(el, value){
| |
| - | el.style.opacity=value
| |
| - | if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
| |
| - | el.style.MozOpacity=value
| |
| - | if (el.filters){
| |
| - | el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
| |
| - | }
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | showmenu:function(menuid){
| |
| - | var menu=anylinkcssmenu.menusmap[menuid]
| |
| - | clearTimeout(menu.hidetimer)
| |
| - | this.getoffsetof(menu.anchorobj)
| |
| - | this.getdimensions(menu)
| |
| - | var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
| |
| - | var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
| |
| - | if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
| |
| - | posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
| |
| - | }
| |
| - | if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){ //drop up instead?
| |
| - | posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
| |
| - | }
| |
| - | if (this.effects.fade.enabled){
| |
| - | this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
| |
| - | if (this.effects.shadow.enabled)
| |
| - | this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
| |
| - | }
| |
| - | menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
| |
| - | if (this.effects.shadow.enabled)
| |
| - | menu.shadow.setcss({left:posx+anylinkcssmenu.effects.shadow.depth[0]+'px', top:posy+anylinkcssmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
| |
| - | if (this.effects.fade.enabled){
| |
| - | clearInterval(menu.animatetimer)
| |
| - | menu.curanimatedegree=0
| |
| - | menu.starttime=new Date().getTime() //get time just before animation is run
| |
| - | menu.animatetimer=setInterval(function(){anylinkcssmenu.revealmenu(menuid)}, 20)
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | revealmenu:function(menuid){
| |
| - | var menu=anylinkcssmenu.menusmap[menuid]
| |
| - | var elapsed=new Date().getTime()-menu.starttime //get time animation has run
| |
| - | if (elapsed<this.effects.fade.duration){
| |
| - | this.setopacity(menu.dropmenu, menu.curanimatedegree)
| |
| - | if (this.effects.shadow.enabled)
| |
| - | this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
| |
| - | }
| |
| - | else{
| |
| - | clearInterval(menu.animatetimer)
| |
| - | this.setopacity(menu.dropmenu, 1)
| |
| - | menu.dropmenu.style.filter=""
| |
| - | }
| |
| - | menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
| |
| - | },
| |
| - |
| |
| - | setcss:function(param){
| |
| - | for (prop in param){
| |
| - | this.style[prop]=param[prop]
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | hidemenu:function(menuid){
| |
| - | var menu=anylinkcssmenu.menusmap[menuid]
| |
| - | clearInterval(menu.animatetimer)
| |
| - | menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
| |
| - | menu.shadow.setcss({visibility:'hidden', left:0, top:0})
| |
| - | },
| |
| - |
| |
| - | getElementsByClass:function(targetclass){
| |
| - | if (document.querySelectorAll)
| |
| - | return document.querySelectorAll("."+targetclass)
| |
| - | else{
| |
| - | var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
| |
| - | var pieces=[]
| |
| - | var alltags=document.all? document.all : document.getElementsByTagName("*")
| |
| - | for (var i=0; i<alltags.length; i++){
| |
| - | if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
| |
| - | pieces[pieces.length]=alltags[i]
| |
| - | }
| |
| - | return pieces
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | addEvent:function(targetarr, functionref, tasktype){
| |
| - | if (targetarr.length>0){
| |
| - | var target=targetarr.shift()
| |
| - | if (target.addEventListener)
| |
| - | target.addEventListener(tasktype, functionref, false)
| |
| - | else if (target.attachEvent)
| |
| - | target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
| |
| - | this.addEvent(targetarr, functionref, tasktype)
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | setupmenu:function(targetclass, anchorobj, pos){
| |
| - | this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
| |
| - | var relattr=anchorobj.getAttribute("rel")
| |
| - | var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
| |
| - | var menu=this.menusmap[targetclass+pos]={
| |
| - | id: targetclass+pos,
| |
| - | anchorobj: anchorobj,
| |
| - | dropmenu: document.getElementById(dropmenuid),
| |
| - | revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
| |
| - | orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
| |
| - | shadow: document.createElement("div")
| |
| - | }
| |
| - | menu.anchorobj._internalID=targetclass+pos
| |
| - | menu.anchorobj._isanchor=true
| |
| - | menu.dropmenu._internalID=targetclass+pos
| |
| - | menu.shadow._internalID=targetclass+pos
| |
| - | menu.shadow.className="anylinkshadow"
| |
| - | document.body.appendChild(menu.dropmenu) //move drop down div to end of page
| |
| - | document.body.appendChild(menu.shadow)
| |
| - | menu.dropmenu.setcss=this.setcss
| |
| - | menu.shadow.setcss=this.setcss
| |
| - | menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
| |
| - | this.setopacity(menu.shadow, this.effects.shadow.opacity)
| |
| - | this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
| |
| - | var menu=anylinkcssmenu.menusmap[this._internalID]
| |
| - | if (this._isanchor && menu.revealtype=="mouseover" && !anylinkcssmenu.isContained(this, e)){ //event for anchor
| |
| - | anylinkcssmenu.showmenu(menu.id)
| |
| - | }
| |
| - | else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
| |
| - | clearTimeout(menu.hidetimer)
| |
| - | }
| |
| - | }, "mouseover")
| |
| - | this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
| |
| - | if (!anylinkcssmenu.isContained(this, e)){
| |
| - | var menu=anylinkcssmenu.menusmap[this._internalID]
| |
| - | menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
| |
| - | }
| |
| - | }, "mouseout")
| |
| - | this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
| |
| - | var menu=anylinkcssmenu.menusmap[this._internalID]
| |
| - | if ( this._isanchor && menu.revealtype=="click"){
| |
| - | if (menu.dropmenu.style.visibility=="visible")
| |
| - | anylinkcssmenu.hidemenu(menu.id)
| |
| - | else
| |
| - | anylinkcssmenu.showmenu(menu.id)
| |
| - | if (e.preventDefault)
| |
| - | e.preventDefault()
| |
| - | return false
| |
| - | }
| |
| - | else
| |
| - | menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
| |
| - | }, "click")
| |
| - | },
| |
| | | | |
| - | init:function(targetclass){
| + | td { |
| - | var anchors=this.getElementsByClass(targetclass)
| + | border-width: 0px; |
| - | for (var i=0; i<anchors.length; i++){
| + | padding: 0px 0px 0px 0px; |
| - | this.setupmenu(targetclass, anchors[i], i)
| + | } |
| - | }
| + | .menuitem { |
| | + | float: left; |
| | + | margin: 1px 1px 1px 1px; |
| | + | padding: 1px 1px 1px 1px; |
| | } | | } |
| | | | |
| | + | .menuitem * { |
| | + | padding: 0px 0px 0px 0px; |
| | + | } |
| | + | #other { |
| | + | height: auto;visibility: visible; |
| | + | } |
| | + | #moz{ |
| | + | height: 1px;visibility: hidden; |
| | + | } |
| | + | #moz::-moz-cell-content{ |
| | + | height: auto; visibility: visible; |
| | + | } |
| | + | #other::-moz-cell-content{ |
| | + | height: 1px; visibility: hidden; |
| | + | } |
| | + | #holder { |
| | + | width: 100%; |
| | } | | } |
| - | </script>
| |
| - |
| |
| - |
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - |
| |
| - | <!--1st anchor link and menu -->
| |
| - |
| |
| - | <p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a></p>
| |
| - |
| |
| - |
| |
| - | <div id="submenu1" class="anylinkcss">
| |
| - | <ul>
| |
| - | <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
| |
| - | <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
| |
| - | <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
| |
| - | <li><a href="http://www.codingforums.com">Coding Forums</a></li>
| |
| - | <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--2nd anchor link and menu -->
| |
| - |
| |
| - | <p><a href="http://www.dynamicdrive.com" class="anchorclass someotherclass" rel="submenu2[click]" rev="lr">Right dropping menu</a> (click to reveal)</p>
| |
| - |
| |
| - | <div id="submenu2" class="anylinkcss" style="width: 150px; background-color:#E9FECB">
| |
| - | <ul>
| |
| - | <li><a href="http://www.cnn.com/">CNN</a></li>
| |
| - | <li><a href="http://www.msnbc.com">MSNBC</a></li>
| |
| - | <li><a href="http://www.google.com">Google</a></li>
| |
| - | <li><a href="http://news.bbc.co.uk">BBC News</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--3rd anchor link and menu -->
| |
| - |
| |
| - | <p style="text-align:center"><a href="http://www.dynamicdrive.com" class="anchorclass myownclass" rel="submenu3">Menu with multiple columns</a></p>
| |
| - |
| |
| - | <div id="submenu3" class="anylinkcsscols">
| |
| - |
| |
| - | <div class="column">
| |
| - | <b>Web Development</b>
| |
| - | <ul>
| |
| - | <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
| |
| - | <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
| |
| - | <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
| |
| - | <li><a href="http://www.codingforums.com">Coding Forums</a></li>
| |
| - | <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - | <div class="column">
| |
| - | <b>News Related</b>
| |
| - | <ul>
| |
| - | <li><a href="http://www.cnn.com/">CNN</a></li>
| |
| - | <li><a href="http://www.msnbc.com">MSNBC</a></li>
| |
| - | <li><a href="http://www.google.com">Google</a></li>
| |
| - | <li><a href="http://news.bbc.co.uk">BBC News</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - | <div class="column">
| |
| - | <b>Technology</b>
| |
| - | <ul>
| |
| - | <li><a href="http://www.news.com/">News.com</a></li>
| |
| - | <li><a href="http://www.slashdot.com">SlashDot</a></li>
| |
| - | <li><a href="http://www.digg.com">Digg</a></li>
| |
| - | <li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| | | | |
| | + | </STYLE> |
| | | | |
| - | <script type="text/javascript"> | + | <TABLE id=holder> |
| | + | <TR> |
| | + | <TD id="other"> |
| | + | <DIV id="menu"> |
| | + | <DIV class="menuitem"> |
| | + | <a class="a" href='#'>File<BR> |
| | + | <TABLE> |
| | + | <TR> |
| | + | <TD><a href=#2>Open ili op dulgo</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#3>Save</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#4>Close</A></TD> |
| | + | </TR> |
| | + | </TABLE> |
| | + | </DIV> |
| | + | <DIV class="menuitem"> |
| | + | <A class="a" href="#11">Help<BR> |
| | + | <TABLE> |
| | + | <TR> |
| | + | <TD><a class="disabled">..</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#13>Index</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href="#14">About</A></TD> |
| | + | </TR> |
| | + | </TABLE> |
| | + | </DIV> |
| | + | </DIV> |
| | + | </TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD id="moz"> Mozilla specific menu! |
| | + | <DIV id="menu"> |
| | + | <DIV class="menuitem"> |
| | + | <a class="a" href='#'>Filezilla</A> |
| | + | <TABLE> |
| | + | <TR> |
| | + | <TD><a href=#2>Open</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#3>Save</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#4>Close</A></TD> |
| | + | </TR> |
| | + | </TABLE> |
| | + | </a> |
| | + | </DIV> |
| | + | <DIV class="menuitem"> |
| | + | <A class="a" href="#11">Helpzilla</A> |
| | + | <TABLE> |
| | + | <TR> |
| | + | <TD><a class="disabled">..</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href=#13>Index</A></TD> |
| | + | </TR> |
| | + | <TR> |
| | + | <TD><a href="#14">About</A></TD> |
| | + | </TR> |
| | + | </TABLE> |
| | + | </A> |
| | + | </DIV> |
| | + | </DIV> |
| | + | </TD> |
| | + | </TR> |
| | + | </TABLE><BR> |
| | | | |
| - | //anylinkcssmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
| |
| - | anylinkcssmenu.init("anchorclass")
| |
| - | </script>
| |
| | </body> | | </body> |
| | </html> | | </html> |
"
