纯CSS制作二级下拉菜单及在Joomla中的应用

本来这篇教程应该是写在Joomla模板开发之后的，但是模板开发教程还在整理，就先发个制作Joomla二级下拉菜单的教程解解馋

提示：本教程只是为了让大家了解二级菜单的制作原理以及如何运用到Joomla中，建议不要直接将教程中出现的代码照搬到你的网站中使用，而且这样也容易出问题。

首先，我们看一下HTML代码：

<div class=”joomlamenu”>

<ul>

<li><a href=”">菜单1</a>

<ul>

<h3>这里包含了下拉菜单</h3>

<li><a href=”">菜单1-1</a></li>

<li><a href=”">菜单1-2</a></li>

<li><a href=”">菜单1-3</a></li>

<li><a href=”">菜单1-4</a></li>

</ul>

</li>

</ul>

</div>

从HTML的结构中不难看出，我们这里实现的是在菜单1中包含了4个子菜单。

接下来我们看下CSS代码：

.joomlamenu ul {padding:0; margin:0; font-size:12px;}

.joomlamenu ul li {line-height:24px;}

.joomlamenu ul li ul {display:none;}   //这是包含子菜单的UL标签样式，在没有任何动作前，我们使用CSS中的display:none将其隐藏。

.joomlamenu ul li:hover ul {display:block;}  //这里使用CSS中的伪类:hover，即当鼠标移动到1级菜单的li标签时，将子菜单UL显示。

.joomlamenu ul li ul h3 {font-size:12px; color:red;}  //还可以在子菜单UL中添加各种标签。

很简单，是吧？

嗯，现在一个非常简陋的二级下拉菜单程序就做好了。

下面，我们来将这个二级下拉菜单整合到Joomla中去。

1、在制作模板时，我们定义一个名为joomlamenu的位置（模板制作教程中将会讲解）。

代码如：

<div class=”joomlamenu”>

<?php if($this->countModules(‘joomlamenu’)) : ?>

<jdoc:include type=”modules” name=”joomlamenu” />

<?php endif; ?>

</div>

2、然后我们创建一组名为joomlamenu的菜单，并创建几个用来测试的菜单，并对其中一个设置子菜单。

3、找到joomlamenu模块，在右边模块设置中Always show sub-menu Items项选择yes，Menu style为list。

4、保存后你就可以看到二级的下拉菜单了。

现在你应该可以看到我们原来的HTML代码大概变成了这样：

<div class=”joomlamenu”>

<ul>

<li id=”current” class=” parent active item2“><a href=”">菜单1</a> //当你点击进入这个菜单之后就会出现id=”current”和class=”active”这两个属性。

<ul>

<h3>这里包含了下拉菜单</h3>

<li><a href=”">菜单1-1</a></li>

<li><a href=”">菜单1-2</a></li>

<li><a href=”">菜单1-3</a></li>

<li><a href=”">菜单1-4</a></li>

</ul>

</li>

</ul>

</div>

现在，我们再来对CSS代码进行一下小修改：

.joomlamenu ul {padding:0; margin:0; font-size:12px;}

.joomlamenu ul li {line-height:24px;}

.joomlamenu ul li a {display:block; background:#CCC;}  //将一级菜单的A标签区块化，并设置保背景色为#CCC

.joomlamenu ul li a:hover {background:#AAA;} //当鼠标移动到一级菜单时，改变其背景颜色

.joomlamenu ul li.active a {background:#AAA;} //进入当前菜单后，我们使当前的菜单颜色为#AAA，从而与其他菜单区分开来。

.joomlamenu ul li ul {display:none;}

.joomlamenu ul li:hover ul {display:block;}

.joomlamenu ul li ul h3 {font-size:12px; color:red;}

到这里，本教程基本就完了，如果有不明白的地方欢迎提出讨论。还是那句话，我希望大家看懂原理，而不是看死代码。

最后，非常实用的 CSS2.0中文手册送给大家。:)