The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
HTML Hover Menu..
I can't seem to get these to work. They are from: http://www.dynamicdrive.com/dynamici...seovertabs.htm.
I want them as the exact same. Right now, I have my... sup.html: (the page it's on) Code:
<html> <head> <title>lol.</title> <link rel="stylesheet" type="text/css" href="mouseovertabs.css" /> <script src="mouseovertabs.js" type="text/javascript"></script> </head> <body> <div id="mytabsmenu" class="tabsmenuclass"> <ul> <li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">Homepage</a></li> <li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li> <li><a href="http://www.codingforums.com">No Sub Menu</a></li> </ul> </div> <div id="mysubmenuarea" class="tabsmenucontentclass"> <!--1st link within submenu container should point to the external submenu contents file--> <a href="submenucontents.htm">Sub Menu contents</a> </div> <script type="text/javascript"> //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout") mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true) </script> </body> </html> Code:
/* ######### CSS for top level tabs ######### */ .tabsmenuclass ul{ overflow: hidden; width: auto; margin: 0; padding: 0; list-style-type: none; } .tabsmenuclass li{ float: left; } .tabsmenuclass a{ display: block; padding: 5px 7px; background: #E8E8E8; color: black; margin-right: 1px; text-decoration: none; font: bold 13px Arial; } .tabsmenuclass a:hover, .tabsmenuclass a.selected{ background: black; color: white; } /* ######### CSS for sub menu container below ######### */ .tabsmenucontentclass{ clear: left; background: #E8E8E8; width: 90%; height: 24px; padding: 5px; border: 1px solid silver; } .tabsmenucontentclass ul{ margin: 0; padding: 0; list-style-type: none; } .tabsmenucontentclass li{ float: left; margin-right: 1em; } Code:
var mouseovertabsmenu={ disappeardelay: 250, //set delay in miliseconds before sub menu disappears onmouseout ajaxloadingmsg: 'Loading Sub Menu Contents...', //Message to show inside sub menu while fetching contents ///////No need to edit beyond here////////////////////// tabsmenutree:{}, initializetabs:function(tabsmenuid, submenuid, tabcontentsLength, disappearBool){ var tabmenu=document.getElementById(tabsmenuid) var tablinks=tabmenu.getElementsByTagName("a") var submenu=document.getElementById(submenuid) var selected=null, tablinks_count=0 for (var i=0; i<tablinks.length; i++){ tablinks[i]._parentid=tabsmenuid var relattr=tablinks[i].getAttribute("rel") if (/^gotsubmenu/i.test(relattr) && tablinks_count<tabcontentsLength){ //if "rel" attribute starts with="gotsubmenu" and a tab content exists for this tab based on its order tablinks[i]._pos=tablinks_count //remember position of this tab relative to its active peers if (relattr.indexOf("[selected]")!=-1){ selected=tablinks_count } this.addEvent(tablinks[i], function(){ var tabsmenutree=mouseovertabsmenu.tabsmenutree[this._parentid] mouseovertabsmenu.clearhidetimer(tabsmenutree.submenu.hidetimer) mouseovertabsmenu.showsubmenu(this) }, "mouseover") tablinks_count++ this.tabsmenutree[tabsmenuid].tabs.push(tablinks[i]) //add this tab to tab collection } else{ //else for regular tab links (with no "rel" attribute) this.addEvent(tablinks[i], function(){ mouseovertabsmenu.hidesubmenu(this._parentid) }, "mouseover") } } this.addEvent(submenu, function(e){ mouseovertabsmenu.clearhidetimer(this.hidetimer) }, "mouseover") if (disappearBool==true){ this.addEvent(submenu, function(e){ //hide submenu contents when mouse rolls out of submenu DIV if (!mouseovertabsmenu.isContained(this, e)){ var cursubmenuobj=this this.hidetimer=setTimeout(function(){mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)}, mouseovertabsmenu.disappeardelay) } }, "mouseout") } var urlselected=this.urlparamselect(tabsmenuid) //return position of selected tab (relative to its peers), or null return typeof urlselected=="number"? urlselected : document.getElementById(urlselected)? document.getElementById(urlselected)._pos : selected }, ajaxload:function(tabsmenuid, submenuid, disappearBool, url){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var tabsmenutree=this.tabsmenutree[tabsmenuid] tabsmenutree.submenu.innerHTML=this.ajaxloadingmsg var ajaxfriendlyurl=url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") page_request.onreadystatechange=function(){ mouseovertabsmenu.ajaxpopulate(page_request, tabsmenuid, submenuid, disappearBool, ajaxfriendlyurl) } var bustcache=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', ajaxfriendlyurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, tabsmenuid, submenuid, disappearBool, url){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ var tabsmenutree=this.tabsmenutree[tabsmenuid] tabsmenutree.submenu.innerHTML=page_request.responseText var innerdivs=tabsmenutree.submenu.getElementsByTagName("div") for (var i=0; i<innerdivs.length; i++){ if (/tabsmenucontent/i.test(innerdivs[i].className)){ tabsmenutree.submenu_divs.push(innerdivs[i]) } } var selected=this.initializetabs(tabsmenuid, submenuid, tabsmenutree.submenu_divs.length, disappearBool) if (selected!=null && selected<tabsmenutree.submenu_divs.length){ innerdivs[selected].style.display="block" this.css(tabsmenutree.tabs[selected], "selected", "add") tabsmenutree.submenu._prevselected=selected } } }, showsubmenu:function(linkobj){ var tabsmenutree=this.tabsmenutree[linkobj._parentid] this.hidesubmenu(linkobj._parentid) var selected=parseInt(linkobj._pos) tabsmenutree.submenu_divs[selected].style.display="block" this.css(tabsmenutree.tabs[selected], "selected", "add") tabsmenutree.submenu._prevselected=selected }, hidesubmenu:function(tabsmenuid){ var tabsmenutree=this.tabsmenutree[tabsmenuid] var prevselectedindex=tabsmenutree.submenu._prevselected if (typeof prevselectedindex!="undefined"){ tabsmenutree.submenu_divs[prevselectedindex].style.display="none" this.css(tabsmenutree.tabs[prevselectedindex], "selected", "remove") } }, clearhidetimer:function(timerid){ if (timerid) clearTimeout(timerid) }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add" && !needle.test(el.className)) el.className+=" "+targetclass }, 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 }, urlparamselect:function(tabsmenuid){ var result=window.location.search.match(new RegExp(tabsmenuid+"=(\\w+)", "i")) //check for "?tabsmenuid=id_or_pos_of_selected_tab" in URL var selectedtabstr=RegExp.$1 return /^\d+$/.test(selectedtabstr)? parseInt(selectedtabstr) : selectedtabstr //return position or ID of selected tab (or null if niether found) }, addEvent:function(target, functionref, tasktype){ if (target.addEventListener) target.addEventListener(tasktype, functionref, false); else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)}); }, init:function(tabsmenuid, submenuid, disappearBool){ this.tabsmenutree[tabsmenuid]={} this.tabsmenutree[tabsmenuid].tabs=[] //array referencing the active tab links in this menu (ones with a "rel=gotsubmenu" attr) this.tabsmenutree[tabsmenuid].submenu=null //reference submenu DIV for this menu this.tabsmenutree[tabsmenuid].submenu_divs=[] //array referencing the submenu contents (external DIVs with class="tabsmenucontent") var submenu=document.getElementById(submenuid) submenu._parentid=tabsmenuid this.tabsmenutree[tabsmenuid].submenu=submenu //remember this DIV as menu's submenu container var remoteurl=submenu.getElementsByTagName("a")[0].getAttribute("href") this.ajaxload(tabsmenuid, submenuid, disappearBool, remoteurl) } } document.write('<style type="text/css">\n.tabsmenucontent{display:none}\n</style>') |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|