javascript下拉菜单（js 下拉菜单）

E安全 • 2024年4月2日 03:09:43 • Java • 阅读 54

本篇文章给大家谈谈javascript下拉菜单，以及js 下拉菜单对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、怎么用JS写个下拉菜单2、JavaScript点击下拉菜单，会点击到下面的图层，怎么解决？3、js怎么验证下拉菜单4、谁内给我讲一将如下下拉菜单的js代码5、javascript 下拉菜单帮忙弄下感激不尽6、js函数怎么写：下拉菜单下拉菜单0_0

怎么用JS写个下拉菜单

其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none;当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；

JavaScript点击下拉菜单，会点击到下面的图层，怎么解决？

你的下拉菜单肯定是浮动或者绝对定位后隐藏到那个位置的，在js里show或者改变css样式。建议你试试这两种方法看看。

js怎么验证下拉菜单

用JS判断下拉框是否选中，下面例子中，如果下拉框的值是空的，那么会弹出一个提示框，如果选中了值，那么就执行代码了，参考如下：

titleJs判断下拉框/title

script

function ss(){

var slt=document.getElementById(“aa”);

if(slt.value==””){

alert(“请选择一个项目”);

return false;

}

return true;

}

/script

form method=post onsubmit=” return ss()”

select id=”aa”

option value=””请选择/option

option value=”1s”一/option

option value=”2u”二/option

/select

input type=submit value=”提交”

/form

谁内给我讲一将如下下拉菜单的js代码

第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。

第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样

第三触发这个函数时把子菜单的显示属性设置为显示如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性这里可以改成menu.style.display=””;

第四 document.onclick = hidmenu；是给网页单击事件指定处理函数

这是例子，如果是放到实际网页里就不能这么写了

最好是给每个a标签指定 onclick事件

像下边一样 a href=”javascript:showmenu()”下拉菜单/a

javascript 下拉菜单帮忙弄下感激不尽

%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”blog7_test.aspx.cs” Inherits=”blog7_test” %

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head runat=”server”

title无标题页/title

style type=”text/css”

.Defautl-Navigation {

FONT-SIZE: 12px; FLOAT: left; COLOR: #7ea9bf; LINE-HEIGHT: 23px; HEIGHT: 23px; TEXT-ALIGN: center

}

/*CSS*/

body {

margin: 0;

padding: 0;

line-height: 1.5em;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #dbc1a7;

background: #110915;

}

a:link, a:visited { color: #cfa3eb; text-decoration:none; }

a:active, a:hover { color: #CCFF00; }

h1 {

margin: 0px;

padding: 10px 0;

font-size: 26px;

color: #dbb4e0;

font-weight: normal;

}

h2 {

margin: 0 0 15px 0;

padding: 0 0 10px 0;

font-size: 20px;

color: #dbc1a7;

border-bottom: 1px dotted #663e17;

}

h3 {

margin: 0 0 12px 0;

padding: 0 0 10px 0;

font-size: 16px;

color: #dbb4e0;

border-bottom: 1px dotted #663e17;

}

p {

margin: 0px;

padding: 0 0 10px 0;

text-align: justify;

}

.cleaner {

clear: both;

width: 100%;

height: 1px;

}

/* —– Form —– */

form {

margin: 0px;

padding: 0px;

width: 100%;

/*text-align: right;*/

}

.inputfield {

background: #ffffff;

border: 1px solid #c9f5f6;

color: #000;

font-size: 13px;

font-variant: normal;

height: 14px;

line-height: normal;

padding: 4px;

margin-bottom: 5px;

width: 240px;

}

#searchfield {

background: none;

border: 1px solid #874d76;

color: #ffffff;

font-size: 13px;

font-variant: normal;

height: 15px;

line-height: normal;

padding: 4px;

width: 200px;

}

#searchbutton {

cursor: pointer;

font-size: 12px;

font-weight: bold;

height: 24px;

margin: 0 0 0 7px;

padding: 0 6px;

text-align: center;

vertical-align: bottom;

white-space: pre;

width: 60px;

}

.button {

width: 60px;

height: 25px;

}

/* end of form */

#templatemo_header_panel {

width:100%;

margin: 0 auto;

height: 145px;

}

#templatemo_header_panel #templatemo_header_section {

width: 960px;

height: 145px;

margin:0 auto;

background: url(../../images/blog3/templatemo_top_panel_bg.jpg) center top no-repeat;

}

#templatemo_header_section #templatemo_title_section {

float: left;

width: 400px;

padding: 90px 0 15px 30px;

font-size: 60px;

color: #d3c2f9;

}

#templatemo_header_section #templatemo_search_section {

float: right;

margin-right: 20px;

margin-top:-5px;

width: 330px;

padding: 70px 0 15px 0;

}

#templatemo_header_section #templatemo_search_section form {

text-align: left;

}

#templatemo_menu_panel {

width:100%;

height: 59px;

margin: 0 auto;

color: #ffffff;

}

#templatemo_menu_panel #templatemo_menu_section {

width: 930px;

height: 59px;

margin:0 auto;

padding: 0 0 0 30px;

color: #03a0a6;

background: url(../../images/blog3/templatemo_menu_panel_bg.jpg) no-repeat;

}

#templatemo_menu_section ul {

float: left;

width: 930px;

margin: 0;

padding: 15px 0 0 0;

list-style: none;

}

#templatemo_menu_section ul li {

display: inline;

}

#templatemo_menu_section ul li a {

float: left;

width: 110px;

padding: 5px 0;

margin-right: 5px;

font-size: 12px;

font-weight: bold;

text-align: center;

text-decoration: none;

color: #ffffff;

border-right: 1px solid #660e4c;

}

#templatemo_menu_section li a:hover, #templatemo_menu_section li .current {

color: #d3c2f9;

}

/* end of menu */

/* content panel */

#templatemo_content_container {

clear: both;

overflow: hidden;

width:100%;

margin: 0 auto;

}

#templatemo_content_container #templatemo_content {

overflow: hidden;

height: 100%;

width: 930px;

padding: 30px 0 0 15px;

margin:0 auto;

background: url(../../images/blog3/templatemo_content_top.jpg) top center no-repeat;

}

#templatemo_content_left {

float: left;

width: 600px;

margin-bottom: 15px;

}

#templatemo_content_right {

float: right;

width: 300px;

margin-bottom: 15px;

}

#templatemo_content_left .templatemo_post {

width: 600px;

padding: 0;

padding-bottom: 10px;

margin-bottom: 30px;

border: 1px solid #1e1125;

background: #180d1e;

}

* html #templatemo_content_left .templatemo_post {

margin-bottom: 15px;

}

.templatemo_post .post_title {

width: 570px;

height: 55px; /* padding 20px + */

margin: 0px;

padding: 20px 0px 5px 30px;

font-size: 26px;

font-weight: bold;

color: #ffffff;

background: url(../../images/blog3/templatemo_post_title_bg.jpg) no-repeat;

}

.templatemo_post .post_title .post_info {

width: 100%;

font-weight: normal;

font-size: 12px;

color: #dbc1a7;

margin-top: 6px;

}

.templatemo_post .post_body {

padding: 15px 30px;

}

.templatemo_post .post_body img {

margin-bottom: 15px;

}

.templatemo_post .post_comment {

padding: 5px 30px;

font-weight: bold;

}

#templatemo_content_right .templatemo_right_section {

clear: both;

display:inline-block;

width: 250px;

padding: 15px 15px 10px 15px;

margin-bottom: 30px;

color: #dbc1a7;

background: #180d1e url(../../images/blog3/templatemo_right_section_bg.jpg) top center no-repeat;

border-bottom: 1px solid #361d40;

}

#templatemo_content_right .templatemo_right_section ul {

clear: both;

margin: 0 0 0 15px;

padding: 0px;

}

#templatemo_content_right .templatemo_right_section ul li {

margin: 0 0 5px 0;

}

#templatemo_content_right .templatemo_right_section ul li a, a:hover {

font-weight: normal;

}

#templatemo_bottom_panel {

width:100%;

margin: 0 auto;

}

#templatemo_bottom_panel #templatemo_bottom_section {

overflow: hidden;

height: 100%;

width: 930px;

margin:0 auto;

padding: 40px 0 15px 30px;

background: url(../../images/blog3/templatemo_content_bottom.jpg) center bottom no-repeat;

border-top: 1px solid #3d234d;

}

#templatemo_bottom_section .templatemo_bottom_section_content {

display: inherit;

float: left;

width: 270px;

padding-right: 20px;

margin:0 0 15px 10px;

}

#templatemo_bottom_section .templatemo_bottom_section_content ul {

margin: 0 0 0 10px;

padding: 0 0 5px 10px;

}

#templatemo_bottom_section .templatemo_bottom_section_content li a {

color: #dbc1a7;

}

#templatemo_footer_panel {

width:100%;

margin: 0 auto;

background: #000000 url(../../images/blog3/templatemo_footer_bg_repeat.jpg) repeat-x;

color: #ffffff;

}

#templatemo_footer_panel #templatemo_footer_section {

width: 960px;

margin:0 auto;

padding: 20px 15px;

text-align: center;

background: url(../../images/blog3/templatemo_footer_bg.jpg) no-repeat;

}

/style

script type=”text/javascript” language=”javascript”

var f=0;

var y=0;

var div_obj

function over(obj){

div_obj=obj

_f=0;

y=0;

document.getElementById(obj).innerHTML=””;

document.getElementById(obj).style.width=”0px”;

document.getElementById(obj).style.height=”1px”;

document.getElementById(obj).style.display=””;

timerDIV();

}

function out(obj){

obj.style.display=”none”;

}

function Tout(){

document.getElementById(div_obj).style.display=”none”;

}

function Tover(){

document.getElementById(div_obj).style.display=””;

}

function timerDIV(){

if( _f = 140){/*宽度*/

objy();

return ;

}

else{

_f=_f+10;

document.getElementById(div_obj).style.width=_f+”px”;

window.setTimeout(timerDIV,1);

}

function objy(){

if(y = 150){/*高度*/

var str=”div style=\”width:auto;height:auto;float:left;margin:6px;line-height:20px\”a href=\”blog7czwa.aspx\”车之我爱/aa href=\”#\”写意人生/aa href=\”#\”梅♡倾听I/aa href=\”#\”梅♡倾听II/a\/div”;

document.getElementById(div_obj).innerHTML=str

return ;

}

else{

y+=6;

document.getElementById(div_obj).style.height=y+”px”;

window.setTimeout(objy,1);

}

/script

/head

body

form id=”form1″ runat=”server”

div id=”templatemo_menu_panel”

div id=”templatemo_menu_section”

%– ul

lia href=”blog7.aspx”首页/a/li

lia href=”blog7wz.aspx”博文/a/li

lia href=”blog7sp.aspx”视频/a/li

lia href=”blog7tp.aspx”图片/a/li

lia href=”blog7ly.aspx”留言/a/li

lia href=”blog7pl.aspx”评论/a/li

/ul–%

div class=”Defautl-Navigation” style=”width: 60px”

a href=”blog7.aspx”首页/a/div

/li

div class=”Defautl-Navigation” style=”width: 70px; cursor: pointer”

a onmouseover=”over(‘two’)” onmouseout=”out(two)” href=”#”博文 ∇/a

/div

/li

div class=”Defautl-Navigation” style=”width: 80px”

a href=”#”视频/a/div

/li

div class=”Defautl-Navigation” style=”width: 50px”

a href=”#”图片/a/div

/li

div class=”Defautl-Navigation” style=”width: 50px”

a href=”#”留言/a/div

/li

div class=”Defautl-Navigation” style=”width: 50px”

a href=”#”评论/a/div

/li

div id=”two” style=”overflow: hidden; border: #660e4c 1px solid; display: none;

filter: alpha(Opacity=70); left: 300px; float: left; width: 1px; position: relative;

top: 25px; left: -593px; height: 1px; background-color: #444; -moz-opacity: 0.7″

onmousemove=”Tover()” onmouseout=”Tout()”

/div

/li

/ul

/div

/form

/body

/html

以上是代码，能实现你要的效果，具体修改成什么样的效果还得靠你自己了。

补充：直接把代码复制到页面就可以运行了。

js函数怎么写：下拉菜单下拉菜单0_0

下拉菜单关键在于HTML的布局和CSS的样式写法。这有这两个写好了后，js操作起来才非常的简单。下面是简单例子，仅供参考：

html xmlns=”” lang=”zh-CN”

headmeta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

titlejs菜单演示_怎么使用js_js下拉菜单_简单js下拉菜单_怎么做js下拉菜单/title

style type=”text/css”

*{margin:0;padding:0;border:0;}

body {font-family: arial, 宋体, serif;font-size:12px;}

#nav {line-height: 24px; list-style-type: none; background:#666;}

#nav a {display: block; width: 80px; text-align:center;}

#nav a:link {color:#666; text-decoration:none;}

#nav a:visited {color:#666;text-decoration:none;}

#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}

#nav li {float: left; width: 80px; background:#CCC;}

#nav li a:hover{background:#999;}

#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}

#nav li ul li{float: left; width: 120px;background: #F6F6F6;}

#nav li ul a{display: block; width: 100px;text-align:left;padding-left:20px;}

#nav li ul a:link {color:#666; text-decoration:none;}

#nav li ul a:visited {color:#666;text-decoration:none;}

#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}

#nav li:hover ul {left: auto;}

#nav li.onhover ul {left: auto;}

#content {clear: left;}

/style

script type=”text/javascript”

function menu() {

var oLi = document.getElementById(“nav”).getElementsByTagName(“li”);

for (var i=0; ioLi.length; i++) {

oLi[i].onmouseover=function() {

this.className+=(this.className.length0? ” “: “”) + “onhover”;

};

oLi[i].onMouseDown=function() {

this.className+=(this.className.length0? ” “: “”) + “onhover”;

}

oLi[i].onMouseUp=function() {

this.className+=(this.className.length0? ” “: “”) + “onhover”;

};

oLi[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(“( ?|^)onhover\b”),”” );}}}

window.onload=menu;

/script/head

body

ul id=”nav”

lia href=”” target=”_blank” 动漫之家/a

a href=”” target=”_blank” 下拉一/a/li