純CSS製作二級下拉列表及在Joomla中的應用

2021-05-23 08:57:33 字數 1278 閱讀 9463

本來這篇教程應該是寫在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...