![]() |
|
|||||||
| JavaScript Programming Discuss javascript coding. |
| Have A Look At Some Of Our Webmaster Related Sponsors! | |||||
![]() Script Directory |
![]() Shopping Cart |
![]() Market Leverage |
![]() Free Templates |
![]() 3D Guide-characters |
![]() Advertise Here |
![]() |
|
|
LinkBack | Thread Tools | Display Modes |
|
|
#1 (permalink) |
|
New Hunter
|
Well im new in webdesign and i encountered some difficulties!
I wanna to create a menu with dropdown tabs! i tried using this script but it just shows one subtab while i want 3 subtabs to be shown! here is the script im using! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #Layer1 { position:absolute; left:0; top:2; width:25%; height:25%; z-index:1; background-color: #000000; } .style1 {color: #FFFFFF} #Layer2 { position:absolute; left:25%; top:2; width:25%; height:25%; z-index:2; background-color: #000000; } #Layer3 { position:absolute; left:2px; top:23px; width:189px; height:21px; z-index:3; background-color: #FF0000; } #Layer4 { position:absolute; left:2px; top:45px; width:189px; height:23px; z-index:4; background-color: #FF0000; } #Layer5 { position:absolute; left:2px; top:69px; width:189px; height:20px; z-index:5; background-color: #FF0000; } #Layer6 { position:absolute; left:193px; top:23px; width:195px; height:20px; z-index:6; background-color: #0000FF; } #Layer7 { position:absolute; left:193px; top:44px; width:195px; height:15px; z-index:7; background-color: #0000FF; } #Layer8 { position:absolute; left:192px; top:62px; width:195px; height:25px; z-index:8; background-color: #0000FF; } --> </style> <script type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_showHideLayers() { //v6.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> </head> <body > <div class="style1" id="Layer1"> <a href="" onmouseover="MM_showHideLayers('Layer3','','show', 'Layer4','','show','Layer5','','show')" onmousemove="MM_showHideLayers('Layer3','','show', 'Layer4','','show','Layer5','','show')" onmouseout="MM_showHideLayers('Layer3','','hide',' Layer4','','hide','Layer5','','hide')"><div align="center">Home</div></a> </div> <div id="Layer2"> <div align="center" class="style1">About Us</div> </div> <div id="Layer3" onmousemove="MM_showHideLayers('Layer3','','show') " onmouseout="MM_showHideLayers('Layer3','','hide')" > <div align="center" onmouseover="MM_showHideLayers('Layer3','','show') ">had </div> <div align="center" onmouseover="MM_showHideLayers('Layer3','','show') ">asd</div> <div align="center" onmouseover="MM_showHideLayers('Layer3','','show') ">asda</div> </div> <div id="Layer6"> <div align="center">gdgsa</div> </div> <div id="Layer7"> <div align="center">asdasdsa</div> </div> <div id="Layer8"> <div align="center">asdasd</div> </div> </body> </html> dont consider the other part of the layers(about)... thank you
__________________
Anthony.Riachy
Last edited by deatle; 03-10-2008 at 11:16 AM. |
|
|
|
|
|
#2 (permalink) |
|
New Hunter
Join Date: Dec 2007
Location: United Kingdom - Dorset - Bournemouth
Posts: 86
iTrader: 0 / 0%
Hunter Bux: 5.00
![]() ![]() |
I had a look at it and it looks wierd. None of it works.
Did you make it yourself or like download it?
__________________
<!-- I can type the entire Alphabet in 2.19 seconds --> /* (X/D)Html, Css, Javascript, Ajax, Xml (DTD), PHP, MySQL, E4X */ /* Learning C++ and German */ |
|
|
|
|
|
#4 (permalink) |
|
New Hunter
Join Date: Dec 2007
Location: United Kingdom - Dorset - Bournemouth
Posts: 86
iTrader: 0 / 0%
Hunter Bux: 5.00
![]() ![]() |
I could give you an idea of what to do.
First, do all the CSS, but set the visibility of the hidden menus which show on mouse over. The JS is simple, just put together some document.getElementById('layer1').style.visibility = "visible" etc. I'll write a script later.
__________________
<!-- I can type the entire Alphabet in 2.19 seconds --> /* (X/D)Html, Css, Javascript, Ajax, Xml (DTD), PHP, MySQL, E4X */ /* Learning C++ and German */ |
|
|
|
|
|
#5 (permalink) |
|
Senior Moderator
|
For practice, look at other websites and look at how they did it. That can be a good learner.
__________________
+-(X)HTML, CSS, JavaScript, SEO, PHP, Flash-+ Code:
<style type="text/css"> u { text-decoration: none; } </style>
|
|
|
|
|
|
#7 (permalink) |
|
Senior Moderator
|
Also you shouldn't be using divs to align things. Let CSS do that for you.
__________________
+-(X)HTML, CSS, JavaScript, SEO, PHP, Flash-+ Code:
<style type="text/css"> u { text-decoration: none; } </style>
|
|
|
|
![]() |
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|