joomla中css 下拉菜单的制作

首先，我们看一下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 ulli {line-height:24px;}

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

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

.joomlamenu ulli 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 ulli {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 ulli ul {display:none;}

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

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

首先，我们看一下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 ulli {line-height:24px;}

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

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

.joomlamenu ulli 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 ulli {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 ulli ul {display:none;}

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

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