943,097 Members | Top Members by Rank

Ad:
Feb 19th, 2010
0

unable to set transition to dropdown menu

Expand Post »
hi every one

i made a menu using javascript and css.....using mozila firefox browser.
menu working properly . but the way of opening submenu is not professional...... plz help me out
i used this function into my javascript file code ...
var transition=102; but not working.
is it right function or right place where i m doing it.. or anywhere else............


javascript Syntax (Toggle Plain Text)
  1. var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
  2. var csssubmenuoffset=-3 //Offset of submenus from main menu. Default is 0 pixels.
  3. var transOptions= "gradientSize=[0..1], wipestyle=0/1, motion=right";
  4. function createcssmenu2(){
  5. for (var i=0; i<cssmenuids.length; i++){
  6. var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
  7. for (var t=0; t<ultags.length; t++){
  8. ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
  9. var spanref=document.createElement("span")
  10. spanref.className="arrowdiv"
  11. spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
  12. ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
  13. ultags[t].parentNode.onmouseover=function(){
  14. this.style.zIndex=100
  15. this.getElementsByTagName("ul")[0].style.visibility="visible"
  16. this.getElementsByTagName("ul")[0].style.zIndex=0
  17. }
  18. ultags[t].parentNode.onmouseout=function(){
  19. this.style.zIndex=0
  20. this.getElementsByTagName("ul")[0].style.visibility="hidden"
  21. this.getElementsByTagName("ul")[0].style.zIndex=100
  22. }
  23. }
  24. }
  25. }
  26.  
  27. if (window.addEventListener)
  28. window.addEventListener("load", createcssmenu2, false)
  29. else if (window.attachEvent)
  30. window.attachEvent("onload", createcssmenu2)
css Syntax (Toggle Plain Text)
  1. .horizontalcssmenu ul{
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. }
  6. /*Top level list items*/
  7. .horizontalcssmenu ul li{
  8. position: relative;
  9. display: inline;
  10. float: left;
  11. animspeed: 200;
  12. }
  13. /*Top level menu link items style*/
  14. .horizontalcssmenu ul li a{
  15. display: block;
  16. width: 120px; /*Width of top level menu link items*/
  17. height:20px;
  18. padding: 2px 8px;
  19. border: 1px solid #202020;
  20. border-left-width: 0;
  21. text-decoration: none;
  22. background:#4682B4;
  23. color: White;
  24. font: bold 13px Tahoma;
  25. animspeed: slow;
  26. showhidedelay: [-150,-150];
  27. }
  28.  
  29. /*Sub level menu*/
  30. .horizontalcssmenu ul li ul{
  31. left:0px;
  32. top: 0px;
  33. border-top: 1px solid #202020;
  34. position: absolute;
  35. display: block;
  36. visibility: hidden;
  37. z-index: 100;
  38. float: right;
  39. animspeed: -15000;
  40.  
  41. showhidedelay: [-1500,-1500];
  42.  
  43. }
  44.  
  45. /*sub Sub level menu*/
  46. .horizontalcssmenu ul li ul ul{
  47. left:135px;
  48. top: -200px;
  49. border-top: 1px solid #202020;
  50. position: absolute;
  51. display: block;
  52. visibility: hidden;
  53. z-index: 100;
  54. float: right;
  55. animspeed:-15000;
  56. showhidedelay: [-1500, -1500];
  57. }
  58. /*Sub level menu list items*/
  59. .horizontalcssmenu ul li ul li{
  60. display: inline block;
  61. float: right;
  62. position:relative;
  63. left:0;
  64.  
  65. }
  66. /*sub sub level mmenu list items*/
  67. .horizontalcssmenu ul li ul ul{
  68. display:inline block;
  69. float:left;
  70. position:absolute;
  71. right:-100px;
  72. animspeed: -15000;
  73.  
  74. showhidedelay: [-1500,-1500];
  75.  
  76. }
  77.  
  78. /* Sub level menu links style */
  79. .horizontalcssmenu ul li ul li a{
  80. width: 125px; /*width of sub menu levels*/
  81. font-weight: bold;
  82. padding: 2px 5px;
  83. background: #BCD2EE;
  84. border-width: 0 1px 1px 1px;
  85.  
  86. }
  87.  
  88. .horizontalcssmenu ul li a:hover{
  89. background: #4682B4;
  90.  
  91. }
  92.  
  93. .horizontalcssmenu ul li ul li a:hover{
  94. background: #4682B4;
  95. }
  96.  
  97. .horizontalcssmenu .arrowdiv{
  98. position: absolute;
  99. right: 0;
  100.  
  101. }
  102.  
  103. * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
  104. padding-top: 1em;
  105. }
Reputation Points: 11
Solved Threads: 4
Junior Poster in Training
preetg is offline Offline
82 posts
since Jan 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Function syntax
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Urgent Help: onMouseOver Font size





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC