189 8069 5689
既然是下拉式菜单嘛
在日土等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、网站设计 网站设计制作按需网站设计,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,外贸网站建设,日土网站建设费用合理。
肯定不会只有JS
语句嘛
起码要有一些HTML的标签哦
记住一点
JS
菜单是
动态的管理HTML和CSS的
HTML
静态显示
CSS
管理HTML的显示效果
javascript
在浏览器上动态的管理HTML和CSS以及一些操作
你也没有把全部代码写出来
估计也没什么好回答的
除非人家给你一个现成的代码
我给你说说下拉式菜单的实现原理吧
任何HTML的标签都有个style属性..这里可以设置CSS属性
就是控制这个标签的样式属性..里头有个属性叫display
当这个display的值是none的时候..这个标签在浏览器上就不会显示,但是浏览器会读取它的数据
只是不展示给用户而已
下拉式菜单,说白了就是你点一下菜单,弹出一个子菜单而已..有点编程的基础就知道该怎么做啦..
事先设置好你要显示的子菜单,并在它的HTML属性里加一个
style="display:none;"意思就是告诉浏览器这个标签的所有内容都不显示
然后javascript语句
获得那个标签之后呢.比如e就是JS代码中对这个标签的对象引用啦
设置e.style.display='';//空就表示是默认了,而默认是要显示的
那么这个标签就会显示了呀..这个JS
代码你可以作为一个事件处理程序中的一部分..放在onclick里
就形成了点一下按钮才弹出那个菜单了噻....
要是你点都不懂编程
肯定不明白我说的啥子
要做这个下拉菜单..起码要懂HTML
javascript
和CSS的一些最基本基础
近日碰到一个问题，就是需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，例如下面的HTML代码：
复制代码
代码如下:
select
onchange="isSelected(this.value);"
id="city"
option
value="1"北京/option
option
value="2"
上海/option
option
value="2"
广州/option
/select
也就是说当用户选择“上海”这一列时，需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码：
复制代码
代码如下:
function
isSelected(value)
{
var
cityName;
var
city
=
document.getElementById("city");
//获取选中的城市名称
for(i=0;icity.length;i++){
if(city[i].selected==true){
cityName
=
city[i].innerText;
//关键点
alert("cityName:"
+
cityName);
}
}
也可以这么做：
复制代码
代码如下:
function
isSelected(value)
{
var
city
=
document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
}
大致解释一下，首先在HTML页面上有一个下拉框，并为此下拉框定了一个“city”的id，并为其绑定了一个onchange事件，通过此事件调用javascript函数。
在javascript函数当中，通过domcument对象获取当前下拉框的节点元素，由于节点的值并非只有一个，所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中，如果选中则使用city[i].innerText
方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city[i].value.
至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city[i].innerText
改为
city[i].text即可。这种方法对IE及FIXEFOX都适用！
对于单选下拉列表，value属性可以直接获取其选中项的value值。
下面实例演示——单击按钮获取下拉列表选中项的value值：
1、HTML结构
select id="test"
option value="1"option-1/option
option value="2"option-2/option
option value="3"option-3/option
option value="4"option-4/option
/select br
input type='button' value='获取选中项' onClick="fun()"/
2、javascript代码
function fun(){
obj = document.getElementById("test");
alert(obj.value);
}
3、效果演示
javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下：
1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。
此时的显示效果如下，其中option中有三项。
2、JS的函数设计如下：
现有的options如下：
3、在页面上输入新的数据，点击添加。
此时的select效果显示如下，自由添加功能实现。
JavaScript中可以用for循环提取下拉框中的值，关键代码如下：
obj = document.getElementById("select_id"); // 获取select对象
str = "";
for(i=0;iobj.options.length;i++){ // obj.options.length表示下拉选项数目
str += obj.options[i].text; // obj.options[i].text表示第i+1个下拉项目的文本
}
下面进行实例演示：
1、Html结构
select id="test"
option value="1"刘备/option
option value="2"关羽/option
option value="3"张飞/option
/selectbr
input type='button' value='获取select所有选项' onclick="fun()"/
2、jquery代码
function fun(){
obj = document.getElementById("test");
str = "";
for(i=0;iobj.options.length;i++){
str += obj.options[i].text;
}
alert(str);
}
3、观察效果
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlenav/title
script language="javascript"
// JavaScript Document
startList = function() {
if (document.alldocument.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; inavRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
/script
style type="text/css"
!--
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
--
/style
/head
body
ul id="nav"
lia href="#"Home/a/li
lia href="#"About/a
ul
lia href="#"History/a/li
lia href="#"Team/a/li
lia href="#"Offices/a/li
/ul
/li
lia href="#"Services/a
ul
lia href="#"Web Design/a/li
lia href="#"Internet Marketing/a/li
lia href="#"Hosting/a/li
lia href="#"Domain Names/a/li
lia href="#"Broadband/a/li
/ul
/li
lia href="#"Contact Us/a
ul
lia href="#"United Kingdom/a/li
lia href="#"France/a/li
lia href="#"USA/a/li
lia href="#"Australia/a/li
/ul
/li
/ul
/body
/html