javascript控制菜單

html

站在用戶的角度思考問題，與客戶深入溝通，找到前進網站設計與前進網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：網站設計、成都做網站、企業官網、英文網站、手機端網站、網站推廣、國際域名空間、虛擬空間、企業郵箱。業務覆蓋前進地區。

head

titletest/title

style type="text/css"

!--

#wrap{width:300px;height:220px;}

ul {padding:0px;margin:0px}

li{width:100px;height:20px;list-style-type:none;text-

align:center;float:left;}

#m1{width:300px;height:200px;border:1px solid #4c4cff}

#m2{width:300px;height:200px;border:1px solid #4c4cff}

#m3{width:300px;height:200px;border:1px solid #4c4cff}

#chuang{width:200px;height:220px;background-color:#00FF00;}

--

/style

/head

script language="javascript"

var old=null;

function changemenu(mydiv,id){

var obj = document.getElementById(mydiv);

if (old!=nullold!=obj)

old.style.display='none';

old=obj;

if (obj.style.display=='none'){

obj.style.display='block';

}

document.getElementById("i").style.backgroundColor='';

document.getElementById("e").style.backgroundColor='';

document.getElementById("s").style.backgroundColor='';

document.getElementById(id).style.backgroundColor='red';

}

/script

body onload="(changemenu('m1'));"

div id="wrap"

ul

lidiva id="i" onclick="changemenu('m1','i');"信息/a/div /li

lidiva id="e" onclick="changemenu('m2','e');"教育/a/div /li

lidiva id="s" onclick="changemenu('m3','s');"科技/a/div /li

/ul

div id="m1" style="DISPLAY: none"1的信息

/div

div id="m2" style="DISPLAY: none"2的教育

/div

div id="m3" style="DISPLAY: none"3的科技

/div

/div

/body

/html

函數里面多加了一個參數用于接收具體是哪個標題要變色。函數里面增加了4行代碼。前3行依次是先把所有的標題背景初始化為沒有顏色。最后行代碼是把你所點擊的代碼的背景色變成紅色。

你說的新浪的什么的網站的那種屬于美工設計。具體方法萬變不離其宗。你先把基礎學好了再說

關于JavaScript的生成下拉菜單代碼

既然是下拉式菜單嘛

肯定不會只有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的一些最基本基礎

我想知道javascript滑動菜單的實現原理？

原理么：首先設計菜單部分的div，利用css設置好div的位置、顯示方式，比如滑出的部分首先隱藏起來；然后用javascript的dom、事件編程技巧，查找相關的div，讓其顯示或隱藏。

網上有很多jquery的源代碼，用jquery實現比較方便吧。

Javascript實現下拉菜單的方法?

HTML

HEAD

META http-equiv="Content-Type" content="text/html; charset=gb2312"

TITLE樹形菜單/TITLE

STYLE type="text/css"

DIV {

FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;

}

A{FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none}

A:hover {FONT-SIZE: 13px; COLOR: #999999}

/STYLE

SCRIPT language="JavaScript"

function show(d1){

if(document.getElementById(d1).style.display=='none'){

document.getElementById(d1).style.display='block'; //如果觸動的層如果處于隱藏狀態，即顯示

}

else{

document.getElementById(d1).style.display='none'; //如果觸動的層如果處于顯示狀態，即隱藏

}

}

/SCRIPT

/HEAD

BODY

DIV HEIGHT="30"

FONT color="#CC0000" BIMG src="image/fold.gif" width="16" height="16" align="absmiddle"樹形菜單：/B/FONT

/DIV

A href="javascript:onClick=show('1') "IMG src="image/fclose.gif" border="0" align="absmiddle" 文學藝術/A

DIV id="1" style="display:none"

IMG src="image/doc.gif" align="absmiddle"先鋒寫作BR

IMG src="image/doc.gif" align="absmiddle"小說散文BR

IMG src="image/doc.gif" align="absmiddle"詩風詞韻

/DIV

DIV

A href="javascript: onClick=show('2') "IMG src="image/fclose.gif" border="0" align="absmiddle"貼圖專區/A

/DIV

DIV id="2" style="display:none"

IMG src="image/doc.gif" align="absmiddle"真我風采BR

IMG src="image/doc.gif" align="absmiddle"視頻貼圖BR

IMG src="image/doc.gif" align="absmiddle"行行攝攝BR

IMG src="image/doc.gif" align="absmiddle"Flash貼圖

/DIV

/BODY

/HTML

如何利用javascript實現二級菜單

可以用二維數組實現

1 給一級菜單和子菜單2個id,然后根據id獲取內容存入數組,用數組下標把菜單項顯示出來

javascript下拉菜單

html

head

.....

script language="javascript" type="text/jscript"

function showTab(tabContentId)

{

if(document.getElementById(tabContentId).style.display=='block') //這么寫

{

document.getElementById(tabContentId).style.display = 'none';

}

else

{

document.getElementById(tabContentId).style.display = 'block';

}

}

/script

/head

body

.....

div id="aa"

li onClick="showTab('tabContent1');"a href="#"sdfsd/a/li

/div

div id="tabContent1" style="display:block"

lia href="#"gdfdg/a/li

lia href="#"dfgdf/a/li

lia href="#"dfgdf/a/li

/div

.....

/body

/html