15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > div做菜单

div做菜单

时间:2023-07-24 21:09:02 | 来源:网站运营

时间:2023-07-24 21:09:02 来源:网站运营

div做菜单:用div做菜单

思路:

怎么思考,这个很重要。

一个菜单是什么样子的?

+大学

-A大学

-B 大学

这就是菜单。

当点击“大学”,出现子菜单列表,A大学,B大学,

然后点击A大学,可以转到A大学网站。

当再次点击“大学”,子菜单列表就隐藏掉了。




分析,程序里面要用到一个切换功能。

第一次点击,打开列表,第二次点击,关闭列表。循环执行。

这个怎么做呢?

用一个变量i

初始i=0,

先检查i,如果i=0,打开子菜单。

然后修改i的状态,i=1

下次执行的时候,

先检查i,如果i=1,关闭子菜单,

然后修改i的状态,i=0

这样就实现了状态切换。

这个功能,在网页设计的时候,经常会使用到。




如何实现菜单对齐?

就是要做的视觉效果。

大学

A大学

B大学

这样的位置关系怎么做。




<div>大学</div>

<div>

<div>A大学</div>

<div>B大学</div>

</div>




如果增加一个菜单,

+专业

-土木

-软件

他们的位置关系怎么安排好。




还有一点,

怎么让他显示,隐藏。

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">专业</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浏览器
关闭