本來這篇教程應該是寫在joomla模板開發之後的,但是模板開發教程還在整理,就先發個製作joomla二級下拉列表的教程解解饞
首先,我們看一下html**:
從html的結構中不難看出,我們這裡實現的是在選單1中包含了4個子選單。
接下來我們看下css**:
.joomlamenu ul
.joomlamenu ul li
.joomlamenu ul li ul //這是包含子選單的ul標籤樣式,在沒有任何動作前,我們使用css中的display:none將其隱藏。
.joomlamenu ul li:hover ul //這裡使用css中的偽類:hover,即當滑鼠移動到1級選單的li標籤時,將子選單ul顯示。
.joomlamenu ul li ul h3 //還可以在子選單ul中新增各種標籤。
很簡單,是吧?
嗯,現在乙個非常簡陋的二級下拉列表程式就做好了。
下面,我們來將這個二級下拉列表整合到joomla中去。
1、在製作模板時,我們定義乙個名為joomlamenu的位置(模板製作教程中將會講解)。
**如:
<?php if($this->countmodules(『joomlamenu』)) : ?>
<?php endif; ?>
2、然後我們建立一組名為joomlamenu的選單,並建立幾個用來測試的選單,並對其中乙個設定子選單。
3、找到joomlamenu模組,在右邊模組設定中always show sub-menu items項選擇yes,menu style為list。
4、儲存後你就可以看到二級的下拉列表了。
現在你應該可以看到我們原來的html**大概變成了這樣:
現在,我們再來對css**進行一下小修改:
.joomlamenu ul
.joomlamenu ul li
.joomlamenu ul li a //將一級選單的a標籤區塊化,並設定保背景色為#ccc
.joomlamenu ul li a:hover //當滑鼠移動到一級選單時,改變其背景顏色
.joomlamenu ul li.active a //進入當前選單後,我們使當前的選單顏色為#aaa,從而與其他選單區分開來。
.joomlamenu ul li ul
.joomlamenu ul li:hover ul
.joomlamenu ul li ul h3
最後,非常實用的
css2.0中文手
冊送給大家。:)
二級下拉列表
看似簡單的乙個選單,確需要不少的知識點。1.getbyclass getelementsbyclassname 已經有大部分現代瀏覽器支援了,只有ie6,ie7,ie8是不支援的。所以對ie6,7,8做特別的處理就行,而ie裡邊有個內建的屬性一直被我們所忽略,document.all,這個比一般的d...
js二級下拉列表
看似簡單的乙個選單,確需要不少的知識點 1.getbyclass getelementsbyclassname 已經有大部分現代 瀏覽器支援了,只有ie6,ie7,ie8是不支援的。所以對ie6,7,8做特別的處理就行,而ie裡邊有個內建的 屬性一直被我們所忽略,document.all,這個比一般...
二級下拉列表的實現
有 group 和 user 二個資料表,要求從這兩個表中讀出資料,並表現為二級下拉表,當選擇 group 列表中的選項時,user 列表中的選項相應改變。group 表對應的資料集為rsgroup,有如下字段 lngid group,strname group user 表對應的資料集為rsuse...