Archive

Archive for the ‘Joomla’ Category

joomla 創建drop down menu

May 22nd, 2010 rockfu No comments

原本想用jQuery tools 來做menu，懶人法則，但是發現Joomla 已經用了mootools，因此用jQuery會有衝突，於是再尋找懶人法則，找到了個不錯的方法

首先上http://de.siteof.de/extended-menu.html 下載module，Extensions =>install & uninstall=> 選擇下載了的extended-menu，上載安裝

安裝成功後，入Extensions =>Module Manager，找到Extended Menu，進入設定，按下面設定

Menu Class Suffix： mainnav  （這個名字是因為在javascript 時會用到）

Menu Style: Tree List

Expand Menu: Yes
Menu name：topmenu (其實就是選擇你要顯示的menu)
記得要Enabled這個module
儲存好後，接著把下面的css 複製到你的主題(template)的css 文件裡


#twocols{ /*the columns that gets dropped down over yours might be different*/
  z-index:20;
}
#leftcol{  /*the columns that gets dropped down over yours might be different*/
  z-index:10;
}
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/
  position:absolute;
  top:187px;
  left:20px;
  z-index:100;
  font:0.9em Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul {
  float:left;
  list-style:none;
  line-height:1em;
  background:transparent;
  font-weight:700;
  margin:0;
  padding:0;
}
#mainlevelmainnav a {
  display:block;
  color:#f90;
  text-decoration:none;
  margin-right:15px;
  padding:0.3em;
}
#mainlevelmainnav li {
  float:left;
  padding:0;
}
#mainlevelmainnav li ul  {
  position:absolute;
  left:-999em;
  height:auto;
  width:11em;
  font-weight:400;
  background:#36f;
  border:#00C 1px solid;
  margin:0;
}
#mainlevelmainnav li li {
  width:11em;
}
#mainlevelmainnav li ul a {
  width:11em;
  color:#fff;
  font-size:0.9em;
  line-height:1em;
  font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
  left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
  ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
  left:auto;
  z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
  background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

css完成後，就可以加上下面的javascript放到 主題的index.php 的<head></head>裡面

&lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i&lt;sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--&gt;&lt;!]]&gt;&lt;/script&gt;

上面的getElementById裡面的mainlevelmainnav，就是剛才定的，前面mainlevel是系統的東西。

保存完畢後，就可以到主頁看看，css可以自己更改，這個很多網站都有提供配色，可以參考下。

Popularity: 3%

Categories: Joomla Tags: , ,

joomla 主題筆記

May 21st, 2010 rockfu No comments

在設計joomla 主題時，雖然已經開始熟悉，但是有些細微的東西總是容易忘記，不如記下來吧，方便自己做 內容code



<jdoc:include type="component" />

檢查是否首頁



<?php if(JRequest::getVar('view') == "frontpage" ) : ?>

增加多一個position 需要在templateDetails.xml中的<position> 中增加
joomla 模塊輸出的位置都是用

<jdoc:include type="modules" name="user2" style="xhtml" />

只要把名字改成你的position 名就可以了，十分簡單

Popularity: 2%

Categories: Joomla Tags: