CSS 实践：两种实现下拉菜单的方法
CSS 实践：两种实现下拉菜单的方法
CSS伪类的一个非常重要的应用就是下拉菜单。
最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visi bility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。
下拉菜单的HTML代码如下：
以下是代码片段：
html1/DTD/xhtml1-transitional.dtd">
在不添加CSS的情况下，下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。
两种实现下拉的方法的共同点在于：
1. 必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。
2. 如果主菜单需要横向，则需要把li元素设置为浮动元素，即float: left。
3. 使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。
4. 必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。
5. 下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。
6. 需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。
不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见;当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none，当需要可见的时候改为block。
上述状态的切换均通过伪类来完成而不调用JavaScript。
详细代码如下：
以下是代码片段：
nav1.css(通过切换visibility属性)
view plain.menu {
font-family: Arial, Helvetica, sans-serif;
width: 455px;
margin: 0 auto;
}
.menu ul {
padding: 0;
list-style-type: none;
}
.menu ul li {
float: left;
width: 90px;
text-align: center;
line-height: 30px;
background: #FC0;
border: #fff 1px solid;
border-width: 0 1px 0 0;
}
.menu ul li a:link, .menu ul li a:visited {
text-decoration: none;
color: #000;
}
.menu ul li:hover {
background: #F60;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li ul {
visibility: hidden;
position: absolute;
width: 90px;
}
.menu ul li:hover ul li {
visibility: visible;
background: #F96;
color: #000;
width: 90px;
}
.menu ul li ul li a:link, .menu ul li ul li a:visited { color: #000;
}
.menu ul li ul li:hover {
background: #39F;
}
nav2.css(通过切换display属性)
view plain.menu {
font-family: Georgia, "Times New Roman", Times, serif; margin: 0 auto;
width: 505px;
}
.menu ul {
padding: 0;
list-style-type: none;
}
.menu ul li {
float: left;
}
.menu ul li a:link, .menu ul li a:visited {
background: #3CF;
color: #000;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
}
.menu ul li:hover a {
background: #009;
color: #fff;
font-weight: bold;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover ul {
display: block;
width: 100px;
position: absolute;
}
.menu ul li ul li a:link, .menu ul li ul li a:visited {
background: #6FF;
color: #000;
}
.menu ul li ul li:hover a {
background: #60F;
color: #F60;
font-weight: bold;
}
二者在效果上并没有多大区别，个人感觉切换display属性的方法比较方便，而且将其扩展到三级下拉菜单也更简单。
Authorware下拉菜单与多级菜单的制作
Authorware下拉菜单与多级菜单的制作Authorware制作下拉菜单需要用到交互图标所提供的下拉菜单 首先是擦除原有菜单的“文件”二字 在用Authorware的菜单交互制作菜单时，Authorware总会在菜单栏上加一个“文件”菜单。这个“文件”菜单与我们的作品总是那么不协调。所以咱们先想办法去掉这个“文件”菜单。具体步骤如下： 1、在主流程线上拖一个交互图标，命名为“文件”。在其右侧放一个组图标（内容为空），在弹出的对话框中，选择“下拉菜单”。双击组图标上方的小方块，弹出属性对话框，选择“永久”及“退出交互”，其他选项就用默认的设置。 2、在交互图标的下方，放一个擦除图标，然后运行一下演示窗口，用鼠标单击演示窗口标题栏上的“文件”二字。仔细看，那个“文件”菜单会随之消失。运行一下看看是不是消除了。 下拉菜单制作 首先在流程线上拖入一交互图标，命名为“文件”，在其右侧放一个组图标，在弹出的对话框中，选择“下拉菜单”。将这个组图标命名为“新建”，范围选择“永久”。然后在其右侧继续放入五个这样的组图标，分别命名为：“打开”、“- ”（这个减号表示分界线）、“保存”、“另存为”、“- ”。最后再放上一个计算图标，命名为“退出”，打开它，输入" quit(0) " ，这样一个下拉菜单就做好了，运行下便能看到效果。
多级菜单制作 1、在流程线上放一个交互图标，命名为“图片欣赏”，在其右侧放一个组图标，选择交互类型“下拉菜单”。将这个组图标命名为“植物图片”。双击组图标上方的那个矩形色块，在弹出的属性对话框中，点击“响应”选项卡，选中其中的“永久”复选项，并将“分支”的值选为“返回”。您可以继续添加几个这样的组图标，分别命名为“动物图片”、“风景图片”等等，当然随便您啦。 2、按同样的方法，在主流程线上再放一个交互图标，其右侧也放几个组图标，分别命名为“梅花”、“兰花”、“菊花”等。各项设置同上面的步骤一样。惟一的不同，就是要把交互图标的命名删除，也就是说要让这个交互图标的名字为空。
竖型导航栏的制作
竖型导航栏的制作 1、新建html文件index.html，使用文本编辑器进行编辑。如下图： 2、在
内开始编写导航栏的html代码。使用ul标签建立一个无序列表 效果如下图： 此时的列表还不能点击进行导航，我们使用标签进行超链接:效果如下图： 3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在
标签里进 行引用。 4、新建CSS文件使用文本编辑器进行编辑 A.应为html页面默认有内、外边距。为方便我们进行样式设计，把所有标 签默认的内、外边距设为0px。 *{ margin:0px; padding:0px; } B.为了使导航栏在页面中间我们通过设置列表所在的在Form1上建立一个二级下拉菜单,第一级共两个菜单项,标题分别为“文件”“编辑”
基础题（1）【考点分析】本题考点有：菜单编辑器的使用（标题、名称和内缩符号）。 【解题思路】通过菜单编辑设置菜单的标题、名称和内缩符号。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.193。 步骤2：调试并运行程序，关闭程序后按题目要求存盘。 基础题（2）【考点分析】本题考点有：文本框的Name、PasswordChar属性和Change 事件。 【解题思路】首先通过属性窗口设置文本框的名称，并将Text1的PasswordChar属性设为*。在文本框的Change事件中，将文本框1显示的内容赋给文本框2。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.194。 步骤2：编写程序代码。 参考答案 Private Sub Text1_Change() Text2.Text = Text1.Text End Sub 步骤3：调试并运行程序，关闭程序后按题目要求存盘。 简答题（1）【考点分析】本题考点有：图片框的Name、Height、Width、Picture属性和命令按钮的Name、Caption属性。 【解题思路】通过图片框的Name、Height、Width、Picture属性分别设置其名称、高、宽和添加图片。在命令按钮的Click事件中，图片的交换用LoadPicture()方法来实现。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.195和表3.196。 表3.195
程序提供代码 Private Sub C1_Click() P1.Picture = LoadPicture("pic2.jpg") P2.Picture = LoadPicture("pic1.bmp") End Sub 程序结束 步骤3：调试并运行程序，关闭程序后按题目要求存盘。 简答题（2）【考点分析】本题考点有：复选框的Name、Caption、Value属性，文本框的Name、Text属性，命令按钮的Name、Caption属性，"+"连接符以及If判断语句。 【解题思路】首先在窗体上建立相应控件，并通过属性窗口设置其属性。通过If语句判断复选框的Value属性值是否为True，来判断文本框中应该显示的内容。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.197。 步骤2：分析并编写程序代码。 程序提供代码 Private Sub C1_Click() '需要考生编写的内容 End Sub Private Sub Form_Unload(Cancel As Integer) Open App.Path & "\out4.txt" For Output As #1 Print #1, Ch1.Value, Ch2.Value, Text1.Text
DIV+CSS实现二级下拉菜单
二级下拉菜单实现代码
下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性 body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等 接下来定义li的背景色为浅灰色及下边框和内边距 这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。 要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面。Excel表格制作二级下拉菜单全步骤
Excel表格制作二级下拉菜单全步骤 通过2级菜单，倒是可以比较深入熟悉INDIRECT, INDEX, OFFSET, 这三个函数，是你要想学excel函数，估计你肯定过的关。 不过二级菜单的第一级的做法，都是相同的，大家可以参考上面的文章创建一个一级菜单。 第一种做法：使用函数INDIRECT 看看例子 很明显，我们希望在一级选择机房故障，那么2级就出现他下面的列表。 要实现这个目标并不复杂。 1：建立“名称” 3个一级选项，我们需要建立3个“名称”：机房故障线路故障用户端故障。 这个时候，你就创建了3个名称
还需要建立一个名称，叫做“故障类型”这个名称包括“机房故障线路故障用户端故障”这3项。
这个时候，你就可以在“名称管理器”看到4个名称2：创建1级菜单 1级菜单的办法就简单了 这样就解决了一级的下拉菜单。 3：2级菜单
这个地方你需要注意，=INDIRECT($F2) 如果你写成=INDIRECT($F$2)， 如果是这样的话，你确定会出现一个报错这个时候，你就实现了2级菜单
第二种做法：使用函数INDEX 还是上面的例子，用另外一种方式来实现。这个例子里，你只需要建立2个名称。 1：建立名称 建立：故障类型名称，方法和上面一样。 建立：2级名称
创建上面两个名称。 2：创建下拉菜单 第一下拉菜单和上面一样，我就不重复了，现在是演示第二级下拉菜单 =INDEX(二级,0,match(I$2,故障类型,0)) 这样你就搞定2级菜单里。 第三种做法：使用函数OFFSET 学这个offset函数半天，才搞定。现在只是可以实现这个功能。不过还有需要改进的地方 还是上面的例子，
excel中创建多级联动菜单(含图解)
Excel2007中创建多级下拉菜单[图解] (2011-05-08 23:00:00) 转载▼ 分类：07.MSoffice 标签： 郑来轶 数据分析 excel2007 下拉菜单 多级 列表 indirect Excel2007中创建多级下拉菜单 有如下一份省市数据：省份以及省份所辖地市清单，需要实现多级联动下拉菜单操作，具体操作方式如下所示： 第一步：对各单元格区域进行名称定义 选中A1：A5单元格区域，然后公式——根据所选内容创建——如图设置 PS:分别对B、C、D、E列重复以上操作
第二步：设置省份列的选项 选中G1：G22单元格区域，然后数据——数据有效性 弹出数据有效性设置窗口，然后如图设置
其中来源“=省份”，这里的省份与之前自定义的单元格区域名称是相对应的 省份选项搞定 第三步：设置地市列的选项
选中H1：H22单元格区域，然后数据——数据有效性 在弹出的窗口，设置如下 其中来源=indirect($G1) PS:indirect函数，返回由文本字符串指定的引用。
地市选项也搞定了，N级操作以此类推 ------------------------------我是完美的分割线----------------------- 条件查找: =OFFSET(C1,MATCH(A9&B9,A2:A6&B2:B6,0),)
图片来源：王喆 点击放大图组索引 我们经常会遇到如图中的EXCEL表的情况，第一行是一级单位，下面都是二级单位的这种EXCEL形式的小型数据库，我们需要在表中先填写一级单位后再填写二级单位，但是为了防止填写EXCEL工作表的人乱填，需要严格限定单元格内容，同时由于有些数据量非常大，就需要减轻填表人的劳动强度，因此需要在数据有效性的基础上再进一步设置联动。 图片来源：王喆 点击放大图组索引
Excel简单制作一级、二级、三级及多级联动下拉菜单
Excel简单制作一级、二级、三级及多级联动下拉菜单 Excel2003巧用数据有效性和INDIRECT函数简单制作一级、二级、三级及多级联动下拉菜单 一、Excel一级下拉菜单制作 例如在A1:A10单元格制作一个下拉列表菜单,步骤如下: 选中A1:A10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中的每一项要用英文逗号隔开。 设置好以后,在A1:A10单元格就能进行下拉选择了,如图所示: 二、Excel二级下拉菜单制作 例如在A1:A10和B1:B10单元格制作二级联动下拉列表菜单,步骤如下: 1、在表中输入需联动下拉选择的信息,如图所示(其中省份是一级下拉选项,市名是二级下拉选项):
2、选中E1:F1单元格,选择“插入—名称—定义”,输入名称如“省份”,如图示: EXCEL 2007如下： 3、选中E1:F3单元格,选择“插入—名称—指定—首行”,如图所示:
EXCEL 2007如下： 4、选中A1:A10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中输入=省份 5、选中B1:B10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中输入=INDIRECT($A1)
设置好以后,在A1:A10和B1:B10单元格就能实现联动下拉选择了,如图所示: 三、Excel三级下拉菜单制作 例如在A1:A10和B1:B10和C1:C10单元格制作三级联动下拉列表菜单,步骤如下: 1、在表中输入需联动下拉选择的信息,如图所示(其中省份是一级下拉选项,市名是二级下拉选项,县名是三级下拉选项):
2、选中E1:F1单元格,选择“插入—名称—定义”,输入名称如“省份”,如图所示: EXCEL 2007如下： 3、选中E1:F3单元格,选择“插入—名称—指定—首行”,如图所示: EXCEL 2007如下：
DW8下拉菜单制作
方法一： 不知道你用的DW几，我是在DW8下操作的，其它的版本应该类似： 1、打开DW后（设计视图），在工具栏上点“常用”，在下拉表中选择“表单”，在右面的工 具里点表单图标，因为下拉菜单是表单项，须放在表单里面。 2、在右面的项目中接着找“列表/菜单”，点击即可插入一列表或菜单。 3、在设计窗口中双击插好的菜单，会自动打开属性，默认类型是“菜单”，这个可以不改， 在靠右边有个列表值，单击打开，点加号添加项目标签（也就是那一项在网页中显示出来的名字），在后面填值单击确定即可。