文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> Jquery实例教程:slideMenu网页菜单

Jquery实例教程:slideMenu网页菜单


作者: 佚名 来源:网络 浏览:1 日期:2012-6-4 23:43:06

网页制作Webjx文章简介:每天学习一点jquery:slideMenu

菜单二(slideMenu)
效果图:


要点说明:1.html(习惯性用ul列表,这例子换个一种架构)
实现代码:(其中一个列表)
<p class="menu_head">首页</p>
<div class="menu_content">
<em class="arrow_left"></em>
<a href=&http://www.webjx.com/javascript/quot;#">日记</a>
<a href="#">相册</a>
<a href="#">兴趣</a>
<em class="arrow_right"></em>
</div>

2.css
A,定位position
B,display
C,边框border——可以制作箭头
实现代码:
<style type="text/css">
p{
margin:10px 0 0;
width:100px;
height:24px;
text-align:center;
border:1px solid gray;
background:#eee;
}
div.menu_content{
margin-left:5px;
width:90px;
background:red;
}
div.menu_content a{
width:90px;
height:24px;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
}
div.menu_content em{
position:relative;
display:inline-block;
width:0;
height:0;
}
div.menu_content em.arrow_left{
left:-5px;
border-right:5px solid blue;
border-bottom:5px solid #fff;
}
div.menu_content em.arrow_right{
top:-77px;
left:90px;
border-right:5px solid #fff;
border-top:5px solid blue;
}
</style>

3.jquery技术
A,click()单击事件
B,slideUp()向上滑动效果
C,slideToggle()上下滑动切换

实现代码:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("div.menu_content").hide();
$("p.menu_head").click(function(){
$(this).next("div.menu_content").slideToggle() //p标签后面相邻的div标签上下滑动来达到显示隐藏
.siblings("div.menu_content").slideUp(); //所有显示的div的兄弟标签都向上滑动隐藏

});
});
</script>

ps:上传不了附件,亲们如果有兴趣。可以留言,一起学习大家进步!

上一篇:javascript实例教程:typeof操作符 下一篇:无
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

HTTP消息头字段深入..

webjx收集45个j..

HTML5 + ..

JS实例教程:制作图片..

jQuery教程:制作..

ImagesLazyL..

JS教程:如何制作表单..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号