HTML下拉列表菜单_html下拉列表资源-CSDN文库

共10个文件

png：8个

html：1个

css：1个

4星 · 超过85%的资源需积分: 10 199 浏览量 2009-01-17 23:39:43 上传评论收藏 260KB RAR 举报

HTML下拉列表菜单是网页设计中常用的一种交互元素，它允许用户从一组预定义的选项中选择一个。在xHTML中，下拉列表通常通过`<select>`标签创建，配合`<option>`标签来定义各个可选项目。在这个案例中，我们结合了JavaScript和CSS，以增强下拉菜单的用户体验和视觉效果，尤其是在Internet Explorer（IE）浏览器上。让我们了解HTML部分。`<select>`标签用于创建下拉列表，而`<option>`标签则定义了列表中的每一项。例如： ```html <select id="myDropdown"> <option value="option1">选项一</option> <option value="option2">选项二</option> <option value="option3">选项三</option> </select> ``` 接下来是CSS，用于美化下拉菜单的外观。可以设置`<select>`的样式，如宽度、颜色、边框等。例如： ```css #myDropdown { width: 150px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } ``` JavaScript（JS）在此处的作用可能是为了实现一些动态效果，比如响应式行为或者自定义的事件处理。例如，我们可能想要在用户选择一个选项后显示一条消息： ```javascript document.getElementById('myDropdown').addEventListener('change', function() { var selectedOption = this.options[this.selectedIndex].text; alert('您选择了：' + selectedOption); }); ``` 在`upmenu.html`文件中，很可能包含了上述所有元素的组合，构建了一个完整的下拉菜单示例。同时，`img`目录可能包含了一些用于增强界面视觉效果的图片资源，如箭头图标等。值得注意的是，由于xHTML对HTML代码的规范性要求更高，所以所有的标签必须正确关闭，属性值必须用引号括起来，确保文档结构的严谨性。在与JavaScript和CSS结合使用时，要确保兼容性，特别是对于较旧版本的IE浏览器，可能需要额外的代码适配或引入polyfill库来解决不兼容问题。总而言之，这个项目涉及了HTML基础、CSS样式设计以及JavaScript交互的实践，是网页开发中基础但重要的技能组合。通过这样的练习，开发者可以学习到如何创建具有更好用户体验的下拉菜单，并理解不同技术之间的协同工作方式。

展开

资源推荐

资源详情

资源评论

收起资源包目录

.rar （10个子文件）

upmenu.html 3KB

img

blue_menu_B_02.png 47KB

menu_master2.css 2KB

blue_menu_A_01.png 47KB

blue_menu_C_01.png 46KB

blue_menu_B_01.png 48KB

blue_menu_C_02.png 45KB

blue_menu_C_00.png 47KB

blue_menu_A_02.png 47KB

blue_menu_A.png 47KB

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>{sys:title}</title>
<link href="img/menu_master2.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
function myUp(name1, name2){
	var o1 = document.getElementById(name1);
	var o2 = document.getElementById(name2);
	var o2className = o2.getAttribute("className");
    if(document.all){
		var trees = document.getElementsByTagName("div");
		for(var i=0; i<trees.length; i++){
			if(trees[i].getAttribute("className") == "treeMenuList")	trees[i].setAttribute("className","treeMenuListB");
			if(trees[i].getAttribute("className") == "treeMenuA")		trees[i].setAttribute("className","treeMenuB");

		}				
	}
	if(o2className == "treeMenuList"){
		o1.setAttribute("className", "treeMenuB");
		o2.setAttribute("className", "treeMenuListB");
	}else{
		o1.setAttribute("className", "treeMenuA");
		o2.setAttribute("className", "treeMenuList");
	}
}



</script>


</head>

<body>
<div class="treeMenu" id="treeMenuA" >
	<div class="treeMenuA" id="treeMenuA01">
		<a href="#" onclick="myUp('treeMenuA01', 'treeMenuList01');"><span>系统设置</span></a>
    </div>
    
	<div class="treeMenuList" id="treeMenuList01">
    	<ul>
        	<li><a href="#">基本信息设置</a></li>        
        	<li><a href="#">高级设置</a></li>        
            <li class="end"></li>
        </ul>   
    </div> 
	


	<div class="treeMenuB" id="treeMenuA02">
		<a href="#" onclick="myUp('treeMenuA02', 'treeMenuList02');"><span>栏目设置</span></a>
    </div>
    
	<div class="treeMenuListB" id="treeMenuList02">
    	<ul>
        	<li><a href="#">新栏目</a></li>        
        	<li><a href="#">栏目设置</a></li>        
            <li class="end"></li>
        </ul>   
    </div> 


	<div class="treeMenuB" id="treeMenuA03">
		<a href="#" onclick="myUp('treeMenuA03', 'treeMenuList03');"><span>会员管理</span></a>
    </div>

	<div class="treeMenuListB" id="treeMenuList03">
    	<ul>
        	<li><a href="#">新会员</a></li>        
        	<li><a href="#">会员管理</a></li>        
            <li class="end"></li>
        </ul>   
    </div> 


	<div class="treeMenuB" id="treeMenuA04">
		<a href="#" onclick="myUp('treeMenuA04', 'treeMenuList04');"><span>文章管理</span></a>
    </div>

	<div class="treeMenuListB" id="treeMenuList04">
    	<ul>
        	<li><a href="#">新文章</a></li>        
        	<li><a href="#">文章管理</a></li>
        	<li><a href="#">文章采集</a></li>
            <li class="end"></li>
        </ul>   
    </div> 

	





</div>




</body>
</html>