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下拉菜單特效相關的資料

友情鏈接