思路:

怎么思考,這個很重要。

一個菜單是什么樣子的?

+大學

-A大學

-B 大學

這就是菜單。

當點擊“大學”,出現子菜單列表,A大學,B大學,

然后點擊A大學,可以轉到A大學網站。

當再次點" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網站運營 > div做菜單

div做菜單

時間:2023-07-24 21:09:02 | 來源:網站運營

時間:2023-07-24 21:09:02 來源:網站運營

div做菜單:用div做菜單

思路:

怎么思考,這個很重要。

一個菜單是什么樣子的?

+大學

-A大學

-B 大學

這就是菜單。

當點擊“大學”,出現子菜單列表,A大學,B大學,

然后點擊A大學,可以轉到A大學網站。

當再次點擊“大學”,子菜單列表就隱藏掉了。




分析,程序里面要用到一個切換功能。

第一次點擊,打開列表,第二次點擊,關閉列表。循環(huán)執(zhí)行。

這個怎么做呢?

用一個變量i

初始i=0,

先檢查i,如果i=0,打開子菜單。

然后修改i的狀態(tài),i=1

下次執(zhí)行的時候,

先檢查i,如果i=1,關閉子菜單,

然后修改i的狀態(tài),i=0

這樣就實現了狀態(tài)切換。

這個功能,在網頁設計的時候,經常會使用到。




如何實現菜單對齊?

就是要做的視覺效果。

大學

A大學

B大學

這樣的位置關系怎么做。




<div>大學</div>

<div>

<div>A大學</div>

<div>B大學</div>

</div>




如果增加一個菜單,

+專業(yè)

-土木

-軟件

他們的位置關系怎么安排好。




還有一點,

怎么讓他顯示,隱藏。

show

hide

JQuery可以實現

但是,沒有一種滑動的視覺效果,突然出現,突然消失,視覺上看到的不連貫。

怎么改進?



slideDown,

slideUp

這個滑動效果實現顯示,隱藏。




解決了這些問題,程序就做出來了。




代碼:

<script src="jquery.min.js"></script><script>var i=0;var j=0;$(document).ready(function(){ $("#daxue").click(function(){ if(i==0){ $("#daxues").slideDown();i=1;}else{$("#daxues").slideUp();i=0;}}); $("#zhuanye").click(function(){ if(j==0){ $("#zhuanyes").slideDown();j=1;}else{ $("#zhuanyes").slideUp();j=0;}});});</script><style>.menu{width:100px;height:40px;background:rgb(214,123,230);text-align:center;line-height:40px;color:rgb(148,32,168);}#one,#two{float:left;margin-left:2px;}#daxues,#zhuanyes{display:none;margin-top:2px;}</style><div id="one"><div class="menu" id="daxue" >大學</div> <div id="daxues"> <div class="menu"><a href="http://www.hqu.edu.cn" target="_blank">華僑大學</a></div> <div class="menu">清華大學</div> </div></div><div id="two"><div class="menu" id="zhuanye">專業(yè)</div> <div id="zhuanyes"> <div class="menu">土木工程</div> <div class="menu">軟件工程</div> <div class="menu">音樂舞蹈</div> </div></div></div>











關鍵詞:

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉