js下拉菜单特效_用js做网页下拉菜单缓慢向下的特效代码

❶ 利用js实现新浪下拉菜单

❷ 关于下拉菜单的JS代码

<styletype="巧灶text/css">

mainMenu{

background-color:FFF;/*Backgroundcolorofmainmenu*/

font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontsofmainmenuitems*/

font-size:1.2em;/*Fontsizeofmainmenuitems*/

border-bottom:1pxsolid000000;/*Bottomborderofmainmenu*/

height:30px;/*Heightofmainmenu*/

position:relative;/*Don&#*/

visibility:hidden;

}

mainMenua{

padding-left:20px;/**/

padding-right:20px;/**/

font-weight:bold;

/*Don'tchangethesetwooptions*/

position:absolute;

bottom:-1px;

}

submenu{

font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontofsubmenuitems*/

background-color:E2EBED;/*Backgroundcolorofsubmenuitems*/

visibility:hidden;

width:778px;/*Don'tchangethisoption*/

}

html>bodyclearmenu{/**/

margin-bottom:2px;

}

submenudiv{

white-space:nowrap;/*Don'tchangethisoption*/

}

mainMenu.activeMenuItem{

/*Borderoptions*/

border-left:1pxsolid000000;

border-top:1pxsolid000000;

border-right:1pxsolid000000;

background-color:E2EBED;/*Backgroundcolor*/

cursor:pointer;/**/

}

mainMenu.inactiveMenuItem{

color:000;/*Textcolor*/

cursor:pointer;/**/

}

submenua{

text-decoration:none;/*Nounderlineonsubmenuitems-usetext-decoration:underline;*/

padding-left:5px;/**/

padding-right:5px;/**/

color:000;/*Textcolor*/

}

submenua:hover{

color:FF0000;/**/

}

</style>孝腊扮

<scripttype="text/javascript">局乎

//morejavascriptfrom/support/analyzer/manual/html/General/CookiesJavaScript.htm

functionGet_Cookie(name){

varstart=document.cookie.indexOf(name+"=");

varlen=start+name.length+1;

if((!start)&&(name!=document.cookie.substring(0,name.length)))returnnull;

if(start==-1)returnnull;

varend=document.cookie.indexOf(";",len);

if(end==-1)end=document.cookie.length;

returnunescape(document.cookie.substring(len,end));

}

functionSet_Cookie(name,value,expires,path,domain,secure){

expires=expires*60*60*24*1000;

vartoday=newDate();

varexpires_date=newDate(today.getTime()+(expires));

varcookieString=name+"="+escape(value)+

((expires)?";expires="+expires_date.toGMTString():"")+

((path)?";path="+path:"")+

((domain)?";domain="+domain:"")+

((secure)?";secure":"");

document.cookie=cookieString;

}

functionshowHide()

{

if(activeMenuItem){

activeMenuItem.className='inactiveMenuItem'

vartheId=activeMenuItem.id.replace(/[^d]/g,'');

document.getElementById('submenu_'+theId).style.display='none'

}

activeMenuItem=this;

this.className='activeMenuItem'

vartheId=this.id.replace(/[^d]/g,'');

document.getElementById('submenu_'+theId).style.display='block'

if(rememberActiveTabByCookie){

Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index:'+(theId-1),100);

}

functioninitMenu()

{

varmainMenuObj=document.getElementById('mainMenu');

varsubMenuObj=document.getElementById('submenu');//DDaddedline

mainMenuObj.style.visibility=subMenuObj.style.visibility="visible"//DDaddedline

varmenuItems=mainMenuObj.getElementsByTagName('A');

if(document.all){

mainMenuObj.style.visibility='hidden'

document.getElementById('submenu').style.visibility='hidden'

}

if(rememberActiveTabByCookie){

varcookieValue=Get_Cookie('dhtmlgoodies_tab_menu_tabIndex')+''

cookieValue=cookieValue.replace(/[^d]/g,'');

if(cookieValue.length>0&&cookieValue<menuItems.length){

activeTabIndex=cookieValue/1;

}

varcurrentLeftPos=15;

for(varno=0;no<menuItems.length;no++){

if(activateSubOnClick)menuItems[no].onclick=showHide;elsemenuItems[no].onmouseover=showHide;

menuItems[no].id='mainMenuItem'+(no+1);

menuItems[no].style.left=currentLeftPos+'px'

currentLeftPos=currentLeftPos+menuItems[no].offsetWidth+topMenuSpacer;

if(no==activeTabIndex){

menuItems[no].className='activeMenuItem'

activeMenuItem=menuItems[no];

}elsemenuItems[no].className='inactiveMenuItem'

if(!document.all)menuItems[no].style.bottom='-1px'

}

varmainMenuLinks=mainMenuObj.getElementsByTagName('A');

varsubCounter=1;

varparentWidth=mainMenuObj.offsetWidth;

while(document.getElementById('submenu_'+subCounter)){

varsubItem=document.getElementById('submenu_'+subCounter);

if(leftAlignSubItems){

//Noaction

}else{

varleftPos=mainMenuLinks[subCounter-1].offsetLeft;

document.getElementById('submenu_'+subCounter).style.paddingLeft=leftPos+'px'

subItem.style.position='absolute'

if(subItem.offsetWidth>parentWidth){

leftPos=leftPos-Math.max(0,subItem.offsetWidth-parentWidth);

}

subItem.style.paddingLeft=leftPos+'px'

subItem.style.position='static'

}

if(subCounter==(activeTabIndex+1)){

subItem.style.display='block'

}else{

subItem.style.display='none'

}

subCounter++;

}

if(document.all){

mainMenuObj.style.visibility='visible'

document.getElementById('submenu').style.visibility='visible'

}

document.getElementById('submenu').style.display='block'

}

window.onload=initMenu;

</script>

<divid="mainMenu">

</div>

<divid="submenu">

<divid="submenu_1">

<ahref="javascript.asp?type=图形图像">图形图像</a>

<ahref="javascript.asp?type=鼠标事件">鼠标事件</a>

<ahref="javascript.asp?type=时间日期">时间日期</a>

<ahref="javascript.asp?type=导航菜单">导航菜单</a>

<ahref="javascript.asp?type=文字效果">文字效果</a>

<ahref="javascript.asp?type=窗体变化">窗体变化</a>

</div>

<divid="submenu_2">

<ahref="plug.asp?type=DreamWeaver插件">DreamWeaver插件</a>

<ahref="plug.asp?type=FireWork插件"FireWork插件</a>

<ahref="plug.asp?type=PhotoShop插件">PhotoShop插件</a>

<ahref="plug.asp?type=FLASH组件">FLASH组件</a>

</div>

<divid="submenu_3">

<ahref="study.asp?type=网页制作">网页制作</a>

<ahref="study.asp?type=网络编程">网络编程</a>

<ahref="study.asp?type=图形图像">图形图像</a>

<ahref="study.asp?type=多媒体制作">多媒体制作</a>

<ahref="study.asp?type=网站建设">网站建设</a>

<ahref="study.asp?type=操作系统">操作系统</a>

</div>

<divid="submenu_4">

<ahref="webmeng_show.asp?type=1">网页设计</a>

<ahref="webmeng_show.asp?type=2">艺术创作</a>

<ahref="webmeng_show.asp?type=3">电脑网络</a>

<ahref="webmeng_show.asp?type=4">生活休闲</a>

<ahref="webmeng_show.asp?type=5">个性展示</a>

<ahref="webmeng_show.asp?type=6">其它类型</a>

</div>

<brid="clearmenu"/>

❸ js如何实现模糊查询及带下拉菜单

现模糊查询及带下制拉菜单

</ul>

</ul>

</div>。

❹ 怎样用 CSS + JS 美化网页中的 select 下拉框

这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：

#selectStyle{
display:block;
margin:0auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353url("箭头图片地址")rightcenterno-repeat;
background-size:auto80%;
color:#fff;
line-height:2;
/*如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1*/
position:relative;
z-index:1;
}
/*代码1*/
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px5px05px;
border-color:#;
content:"";
}
/*代码1*/
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px5px05px;
border-color:#;
content:"";
}

以上就是自定义select样式的方法；

同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。

❺ 如何用原生js写出滑动下拉菜单

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<title></title>
<style>
#menu{
position:relative;
background:black;
width:150px;
height:30px;
margin:200pxauto;
overflow:hidden;
}

#sc{
position:absolute;
background-color:#80ffff;
width:150px;
height:120px;
top:0;
}
</style>
<script>
</script>
</head>

<body>
<divid="menu">
<divid="sc"></div>
</div>
<script>
varmenu=document.getElementById('menu');
varsc=document.getElementById('sc');
varinterval;

functionmenuscroll(){
vartop=parseFloat(sc.style.top)||sc.scrollTop;
top+=10;
sc.style.top=top+"px";
}
menu.onmouseenter=function(){
interval=setInterval("menuscroll()",90);
}
menu.onmouseleave=function(){
clearInterval(interval);
sc.style.top=0;
}
</script>
</body>

</html>

❻ 关于下拉菜单的JS代码

❼ 用js做网页下拉菜单缓慢向下的特效代码

<!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=utf-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
$("nav").onclick = function(e){
var src = e?e.target:event.srcElement;
if(src.tagName == "H3"){
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display =="block")?"none":"block";
}
}
}
</script>
</head>
<body>
<div id="nav">
<h3>管理区</h3>
<div>
<a href="#">建议</a>
<a href="#">链接</a>
<a href="#">联系</a>
</div>
<h3>交流区</h3>
<div>
<a href="#">JavaScript</a>
<a href="#">Delphi</a>
<a href="#">VC++</a>
</div>
</div>
</body>
</html>

❽ html+css+javascript 菜单单击式下拉菜单

HTML:

<!DOCTYPEhtml>
<html>
<head>
<title>Dropdown</title>
<linkrel="stylesheet"href="style.css">
<metacharset="utf-8"/>
</head>
<body>
<ul>
<liclass="dropdown">
<aid="a"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题</a>
<divclass="dropdown-content"id="dropdown-a">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
<liclass="dropdown">
<aid="b"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题B</a>
<divclass="dropdown-content"id="dropdown-b">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
</ul>
<scriptsrc="script.js"></script>
</body>
</html>

CSS (style.css):

body{
font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
lia,.dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
lia:hover,.dropdown:hover.dropbtn{
background-color:#1f75cf;
}
li.dropdown{
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#fafafa;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
}
.dropdown-contenta{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
.dropdown-contenta:hover{
color:white;
background-color:#1f75cf;
}
.show{
display:block;
}

JavaScript (script.js):

functionshowList(o){
hideList("dropdown-content"+o.id);
document.getElementById("dropdown-"+o.id).classList.toggle("show");
}


functionhideList(option){
vardropdowns=document.getElementsByClassName("dropdown-content");

for(vari=0;i<dropdowns.length;i++){
varopenDropdown=dropdowns[i];
if(openDropdown.id!=option){
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}


window.onclick=function(e){
if(!e.target.matches('.dropbtn')){
hideList("");
}
}

点击标题 A：

JSFiddle 调试：jsfiddle.net/soL73u4y/2/

导航:首页 > 编程语言 > js下拉菜单特效

js下拉菜单特效

与js下拉菜单特效相关的资料

友情链接