Joomla 1.5 | Joomla 1.5教程的Suckrfish下拉菜单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Joomla 1.5 | Joomla 1.5教程的Suckrfish下拉菜单相关的知识,希望对你有一定的参考价值。

here's the suckerfish dropdown menu for Joomla 1.5 that written by tbianco. It's extremely easy and here's what you need to do:

1) Create the main menu module and add a suffix to it of '_topmenu'. I use the underscore to so that the class name in the css is now ".moduletable_topmenu" I want to make sure in my code there is a seperation from the typical ".moduletable" and ".moduletable_topmenu". Besides it's REALLY bad coding practice to run words together unless you are camelCasing them. I am just used to ruby so I have using the underscore for variable names.

2) While in the module for your main menu (under module manager) be sure to check YES for "Always show sub-menu Items". It's in the module param section.

3) It's time to place the CSS code onto the page: (I added the opacity ability just in case you wanted to make the sub menus transparent)
  1. /* =======================================
  2.   Top Menu aka Main Menu
  3.   ======================================= */
  4. .moduletable_topmenu{
  5. padding:0;
  6. color: #333;
  7. height: 30px;
  8. margin: 0;
  9. width: 500px;
  10. font-size: 90%
  11. }
  12.  
  13. .moduletable_topmenu h3 {
  14. background:#666;
  15. color:#fff;
  16. padding:0.25em 0;
  17. text-align:center;
  18. font-size:1.1em;
  19. margin:0;
  20. }
  21.  
  22. .moduletable_topmenu ul{
  23. list-style: none;
  24. margin: 0;
  25. padding: 0;
  26. }
  27.  
  28. .moduletable_topmenu li{
  29. margin: 0px 15px 0px 0px;
  30. float: left;
  31. }
  32. .moduletable_topmenu li ul {
  33. position: absolute;
  34. width: 135px;
  35. left: -999em;
  36. border: 1px solid #474748;
  37. border-bottom: none;
  38. top: 22px;
  39. }
  40. .moduletable_topmenu li:hover ul {
  41. left: auto;
  42. }
  43. .moduletable_topmenu li ul li {
  44. width: 135px;
  45. padding: 0;
  46. border-bottom: 1px solid #474748;
  47. }
  48.  
  49. .moduletable_topmenu li a{
  50. display: block;
  51. padding: 5px;
  52. background-color:#fff;
  53. color: #000;
  54. font-weight: bold;
  55. text-decoration: none;
  56. }
  57. html>body .moduletable_topmenu li a {
  58. width: auto;
  59. }
  60.  
  61. .moduletable_topmenu li ul li a {
  62. width: 125px;
  63. background-color: #221f20;
  64. color: #fff;
  65. /* ---
  66.   filter:alpha(opacity=80);
  67.   -moz-opacity: 0.8;
  68.   opacity: 0.8;*/
  69. }
  70.  
  71.  
  72. .moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
  73. color: #e22f00;
  74. text-decoration: none;
  75. /* ---
  76.   filter:alpha(opacity=100);
  77.   -moz-opacity: 1.0;
  78.   opacity: 1.0;*/
  79. }
  80.  
  81. .moduletable_topmenu li ul li a:hover {
  82. background-color: #e22f00;
  83. color: #fff;
  84. background: url(../images/top_link_bg2_on.png) repeat-y top left;
  85. }
  86.  
  87. .moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
  88. left: auto;
  89. }
  90.  
  91.  
  92. .moduletable_topmenu ul li.active a {
  93. color: #038fd9;
  94. text-decoration: none;
  95. }
  96. .moduletable_topmenu li.parent.active a {
  97. color: #038fd9;
  98. text-decoration: none;
  99. }
  100. .moduletable_topmenu li.parent.active a:hover {
  101. color: #e22f00;
  102. }
  103.  
  104. .moduletable_topmenu li.parent.active ul li a {
  105. color: #fff;
  106. text-decoration: none;
  107. }
  108. .moduletable_topmenu li.parent.active ul li a:hover {
  109. color: #fff;
  110. text-decoration: none;
  111. }
  112. 4) To make this really work there are several things that need to be done, follow along because it requires you editing the index.php file (your template file, now understand that I created my own template) and also adding some js into your template.
  113.  
  114. In your index.php file it's important to note the name of the div tag that holds your top module position . For example here in my index.php I have code that looks like this:
  115.  
  116. <div id="header">
  117. <div id="header_container">
  118. <div id="top_menu">
  119. <jdoc:include type="modules" name="top" style="xhtml" />
  120. </div>
  121. <div id="logo">
  122. <a href="http://patronsaintmedia.com" title="Patron Saint Media"><img src="templates/<?php echo $this->template; ?>/images/logo.png" width="107" height="103" /></a>
  123. </div>
  124. </div>
  125. </div>
  126.  
  127. Notice the div with the id of "top_menu".
  128.  
  129. <div id="top_menu">
  130. <jdoc:include type="modules" name="top" style="xhtml" />
  131. </div>
  132.  
  133. This is important because in order to get the suckerfish dropdown in IE to work we need to reference the id of the container for that menu. so instead of placing the id in the
  134.  
  135. like they do in the typical suckerfish article we will place it in the div tag for the module that will be used ONLY for the holding of the top menu. Yes this is a dirty trick but none the less it works.
  136.  
  137. Now create a js file, I call mine custom_lib.js and add the following code into it:
  138. sfHover = function()
  139. {
  140. var sfEls = document.getElementById("top_menu").getElementsByTagName("LI");
  141. for (var i=0; i<sfEls.length; i++)
  142. {
  143. sfEls[i].onmouseover=function()
  144. {
  145. this.className+=" sfhover";
  146. }
  147.  
  148. sfEls[i].onmouseout=function()
  149. {
  150. this.className=this.className.replace(new RegExp(" sfhover"), "");
  151. }
  152. }
  153. }
  154. if (window.attachEvent) window.attachEvent("onload", sfHover);
  155. Place that js file in a folder (within a chosen template you're using) and name that folder "js".
  156.  
  157. In your chosen template ad this to the head tag:
  158. <script type="text/javascript" src="templates/<?php echo $this->template; ?>/js/custom_lib.js"></script>
  159.  
  160. 5) You're good to go now just modify the styles within the css file and you should be good to go!

以上是关于Joomla 1.5 | Joomla 1.5教程的Suckrfish下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

joomla 1.5 搜索与自定义组件的集成?

joomla 组件 1.5 到 joomla 组件 1.6

在 Joomla 1.5 之外包含 Joomla 组件(Joomla FB Chat)

从 Joomla 1.5 到 Joomla 2.5 的组件

将 Joomla 1.5 组件更新为 Joomla 2.5 组件的步骤 [关闭]

Joomla 1.0.15 到 1.5 迁移器组件