Javascript  »  Navigationen  »  Blockmenu

zur Übersicht

Kategorie	Navigationen
Bezeichnung	Blockmenu
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	42011 Aufrufe davon 0x gestern
Wichtig: Dieses Script wird hier falsch dargestellt. Kopieren Sie das Script in Ihren HTML-Editor und die gelben Balken sitzen richtig über dem Text! Das Problem liegt an den table-tags um das Script. Der Quelltext aus der Option "Quelltext anzeigen" funktioniert. Fügen Sie ihn einfach in eine leere Seite ein.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <style> a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000099; text-decoration: none; } a:hover { color: #6666CC; } a.menu { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; text-decoration: none; } a.menu:hover { color: #FFFF00; } span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; text-decoration: none; } </style> <script language="JavaScript"><!-- var selecteditem=null; function layersetvisibility (idname, show) // show = visible || hidden { if (document.getElementById) // DOM1 document.getElementById(idname).style.visibility=show else if (document.all) // ie document.all[idname].style.visibility=show else if (document.layers) // ns document.layers[idname].visibility=show; } function layersettop (idname, toppx) { if (document.getElementById) // DOM1 document.getElementById(idname).style.top=toppx else if (document.all) // ie document.all[idname].style.top=toppx else if (document.layers) // ns document.layers[idname].top=toppx; } function imagegettop (idname) /* layername */ { if (document.all) // ie return (document.all.contentmenu.document.images[idname].offsetTop + document.all.contentmenu.document.images[idname].offsetParent.offsetTop + document.all.contentmenu.document.images[idname].offsetParent.offsetParent.offsetTop) else if (document.getElementById) // DOM1 return (document.getElementById(idname).offsetTop + document.getElementById(idname).offsetParent.offsetTop + document.getElementById(idname).offsetParent.offsetParent.offsetTop) // return document.images[idname].offsetTop else if (document.layers) // ns return document.layers.contentmenu.document.images[idname].y; } function searchidinlinks(idname) // ie only { for (var i in document.all.contentmenu.document.links) if (document.all.contentmenu.document.links[i].name==idname) return document.all.contentmenu.document.links[i]; } function linkgettext (idname) { if (document.all) // ie { var linkhandle=searchidinlinks(idname); return linkhandle.innerText; } else if (document.getElementById) // DOM1 return document.getElementById(idname).text else if (document.layers) // ns return document.layers.contentmenu.document.anchors[idname].text; } function linkgettop (idname) { if (document.getElementById) // DOM1 return (document.getElementById(idname).offsetTop + document.getElementById(idname).offsetParent.offsetTop + document.getElementById(idname).offsetParent.offsetParent.offsetTop) else if (document.all) // ie { var linkhandle=searchidinlinks(idname); return (linkhandle.offsetTop + linkhandle.offsetParent.offsetTop + linkhandle.offsetParent.offsetParent.offsetTop) } else if (document.layers) // ns return document.layers.contentmenu.document.anchors[idname].y; } function layerwritecontent (layername, exporttext) { if (document.getElementById) // DOM1 document.getElementById(layername).innerHTML=exporttext else if (document.all) // ie document.all[layername].innerHTML=exporttext else if (document.layers) // ns with(document.layers[layername].document) { open(); write(exporttext); close(); } } function selectoption(idname) { layersettop("selectedbar", imagegettop(idname)); var linktext=linkgettext(idname+"text"); layersettop("selectedtext", linkgettop(idname+"text")); layerwritecontent("selectedtext", "<SPAN>"+linktext+"</SPAN>"); } function init (idname) { selectoption(idname); layersetvisibility("selectedbar", "visible"); layersetvisibility("selectedtext", "visible"); } </script> <body bgcolor="#000000" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" ONLOAD="init('news');"> <div id="contentmenu" style="position:absolute; z-index:2;"> <table cellspacing="0" cellpadding="0" border="0" height="375" width="125"> <TR><TD COLSPAN="2" HEIGHT="30" ALIGN="LEFT" VALIGN="TOP"><IMG SRC="gfx/b.gif"></TD></tr> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="news" id="news"></td><td><a class="menu" href="#" name="newstext" id="newstext" ONCLICK="selectoption('news');">n e w s</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="general" id="general"></td><td><a class="menu" href="#" name="generaltext" id="generaltext" ONCLICK="selectoption('general');">g e n e r a l</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="compo's" id="compo's"></td><td><a class="menu" href="#" name="compo'stext" id="compo'stext" ONCLICK="selectoption('compo\'s');">c o m p o ' s</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="events" id="events"></td><td><a class="menu" href="#" name="eventstext" id="eventstext" ONCLICK="selectoption('events');">e v e n t s</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="network" id="network"></td><td><a class="menu" href="#" name="networktext" id="networktext" ONCLICK="selectoption('network');">n e t w o r k</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="attending" id="attending"></td><td><a class="menu" href="#" name="attendingtext" id="attendingtext" ONCLICK="selectoption('attending');">a t t e n d i n g</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="stuff" id="stuff"></td><td><a class="menu" href="#" name="stufftext" id="stufftext" ONCLICK="selectoption('stuff');">s t u f f</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="contact" id="contact"></td><td><a class="menu" href="#" name="contacttext" id="contacttext" ONCLICK="selectoption('contact');">c o n t a c t</a></td> <tr><td height="30" align="LEFT"><img src="gfxu/block.gif" border="0" height=10 width=47 name="forum" id="forum"></td><td><a class="menu" href="#" name="forumtext" id="forumtext" ONCLICK="selectoption('forum');">f o r u m</a></td> </table> </div> <div id="selectedbar" style="position:absolute; left:0px; top:63px; height:20px; width:400px; z-index:1; clip: rect(1, 500, 10, 0); background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;"> </div> <div id="selectedtext" style="position:absolute; left:47px; top:60px; height:12px; width:400px; z-index:3; border: 1px none #000000; visibility: hidden;"><span>n e w s</span></div> </body>

Kommentare zu Blockmenu

0 Kommentar(e) vorhanden / Anzeige der neuesten 5

Noch keine Kommentare zu diesem Javascript vorhanden.


Alle Kommentare anzeigen   -   Kommentar hinzufügen