TestSideShowApp SlideMenu侧边悬浮，可以滑动向左右两侧显示下面的菜单 android 238万源代码下载-
&文件名称: TestSideShowApp
& & & & &&]
&&所属分类:
&&开发工具: Java
&&文件大小: 83 KB
&&上传时间:
&&下载次数: 151
&&提 供 者:
&详细说明：SlideMenu侧边悬浮，可以滑动向左右两侧显示下面的菜单-SlideMenu in Android app
&[]:很好，推荐下载
&近期下载过的用户:
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - 安卓软件，用于足底压力监护仪的上位机部分的蓝牙接收以及数据处理显示功能。
&[] - 疯狂android讲义的源代码，适合新手学习，完整版
&[] - andoird底部导航，提供大图标方式的android底部导航功能。
&[] - 豆瓣网的豆瓣同城模块android系统手机客户端
&[] - 飞鸽传书源码，对开始学习android的学者有很不错的帮助！特别是网络开发有一点帮助
&[] - 一个相当实用的android滑动菜单的实例...
&[] - view 动画的滑动显示。点击滑动和手势滑动。类是slidingdrawer的抽屉效果。
&[] - jquery-easyui-1.2.1源码学习资料
&[] - 这是一个使用OpenCV实现的Canny边沿检测，在程序中添加了一个滑动的控件，可以在程序运行时实时改变参数来观察检测效果。可以根据自己的所需来测试要选的参数。
&[] - 狐狸的贴吧签到客户端 安卓版
不想继续做了，拿出来分享使用CSS实现侧边Tab菜单栏
使用CSS实现侧边Tab菜单栏
使用CSS实现侧边Tab菜单栏
侧边Tab菜单栏和常规菜单栏的对比
常规菜单栏侧边Tab菜单栏的特点
侧边Tab菜单栏与一般菜单栏的区别在于菜单项与左边内容栏的贯通效果,这样做的好处在于用户通过菜单就能看出当前所在的页面,无需记忆或在页面上查找.Gmail和Google Group都采取了这种直观式的设计.如果采用表格实现首页的效果比较困难,而使用CSS对DIV和无序列表加以限制就比较容易了,本文将逐步讲述这一过程.
从图上可见,左边的白色内容区与右边的菜单区分居左右,自然他们分属不同的DIV.内容区处于leftContent中,而菜单区处于rightMenu中,而两个DIV处于一个固定宽度的DIV content中,让leftContent向左浮动, rightMenu向右浮动就实现左右分栏的效果.页面定义如右:
&div&id="content"&&&&div&id="leftContent"&&&&.&&&/div&&&&div&id="rightMenu"&&&&&&&&&&&&/div&&/div&
leftContent, rightMenu, content三个DIV的CSS定义
#content{}{&&width:924px;&&height:500px;&&background:#fff7c6;}#leftContent{}{&&width:624px;&&height:500px;&&float:left;}#rightMenu{}{&&width:300px;&&float:right;&&height:500px;}
leftContent的边框效果
仔细观察可以发现, leftContent的左,上,下边框右边框是固定的,而右边框却是组合成的,确切的说视觉上的leftContent的右边框事实上是rightMenu的左边框.rightMenu的左边框比较复杂,我们还是把leftContent的CSS定义完成了再说.
#leftContent{}{&&width:624px;&&height:500px;&&float:left;&&background:#f8f8f8;&&border-left:1px&solid&#ffcc31;&&border-right:0px&solid&#ffcc31;&&border-top:1px&solid&#ffcc31;&&border-bottom:1px&solid&#ffcc31;}
rightMenu中的组成部分
一般来说导航栏和菜单栏时下流行用无序列表实现,这次也不例外.而视觉上的rightMenu的左边框效果当然主要交给无序列表中的li项目来完成.因为无序列表高度有限,要实现与rightMenu等高的边框需要别的DIV的帮助,这里我采用了在齐下放置一个高度为100%单元格的方式填充无序列表剩下的部分,另为美观考虑,在无序列表上方实现了一个固定高度的单元格.代码如右:
&div&id="rightMenu"&&&&&&&&table&border=0&cellspacing="0"&cellpadding="0"&height="100%"&width=100%&&&&tr&height="2"&&td&&&&&&&&&div&id="rightMenuTop"&&&&&&&&&/div&&&&/td&&/tr&&&&tr&&td&&&&&&&&ul&&&&&……&&&/ul&&&&/td&&/tr&&&&tr&height="100%"&&td&&&&&&&&&&div&id="rightMenuBottom"&&&&&&&&&&/div&&&&/td&&/tr&&&&/table&&/div&
rightMenuTop和rightMenuBottom的CSS设置
#rightMenuTop{}{&&height:100%;&&background:#fff7c6;&&border-left:1px&solid&#ffcc31;&&border-right:0px&solid&#ffcc31;&&border-top:0px&solid&#ffcc31;&&border-bottom:0px&solid&#ffcc31;}#rightMenuBottom{}{&&height:100%;&&background:#fff7c6;&&border-left:1px&solid&#ffcc31;&&border-right:0px&solid&#ffcc31;&&border-top:0px&solid&#ffcc31;&&border-bottom:0px&solid&#ffcc31;}
视觉上当前菜单项与非当前菜单项的区别
仔细观察当前菜单项与非当前菜单项,你会发现以下特点:1.当前菜单项有上,右,下三个方向的边框,唯独没有左边框.2.当前菜单项的背景色和内容区一致.以上两点造成了当前菜单项与左边内容区的”打通”效果.与之相反,非当前菜单项的特点是:3.有左边框,无上,右,下三个方向的边框.4.背景色为黄色.上述这两个特点与前面两个DIV:rightMenuTop和rightMenuBottom是一致的,它们在一起形成了视觉上的菜单栏的左边框.
页面上的当前菜单项和非当前菜单项
&ul&&&&li&&a&href="#"&天下风云出我辈&/a&&/li&&&&li&&a&href="#"&class="currentLink"&一入江湖岁月催&/a&&/li&&&&li&&a&href="#"&皇图霸业谈笑中&/a&&/li&&&&li&&a&href="#"&不胜人生一场醉&/a&&/li&&&&li&&a&href="#"&提剑跨骑挥鬼雨&/a&&/li&&&&li&&a&href="#"&白骨如山鸟惊飞&/a&&/li&&&&li&&a&href="#"&尘事如潮人如水&/a&&/li&&&&li&&a&href="#"&只叹江湖几人回&/a&&/li&&/ul&&
对当前菜单项和非当前菜单项的CSS定义
当前:#rightMenu&ul&a.currentLink{}{&&color:#000000;&&background:#f8f8f8;&&display:block;&&padding-left:20px;&&text-align:left;&&text-decoration:none;&&width:300px;&&padding-top:5px;&&padding-bottom:5px;&&&border-left:0px&solid&#ffcc31;&&border-right:1px&solid&#ffcc31;&&border-top:1px&solid&#ffcc31;&&border-bottom:1px&solid&#ffcc31;}非当前:#rightMenu&ul&a{}{&&color:#0000cc;&&background:#fff7c6;&&display:block;&&padding-left:20px;&&text-align:left;&&text-decoration:none;&&width:300px;&&padding-top:1px;&&padding-bottom:1px;&&&border-left:1px&solid&#ffcc31;&&border-right:0px&solid&#ffcc31;&&border-top:0px&solid&#ffcc31;&&border-bottom:0px&solid&#ffcc31;}
动态效果的实现
以上代码实现了静态效果,动态效果还需要jsp的辅助.示例代码如下:&
&%&&&String&curr=request.getParameter("curr");&&if(curr.equals("0")){&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=0'&class='currentLink'&天下风云出我辈&/a&&/li&");&&}&&else{&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=0'&天下风云出我辈&/a&&/li&");&&}&&&&if(curr.equals("1")){&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=1'&class='currentLink'&一入江湖岁月催&/a&&/li&");&&}&&else{&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=1'&一入江湖岁月催&/a&&/li&");&&}.&&&&if(curr.equals("7")){&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=7'&class='currentLink'&只叹江湖几人回&/a&&/li&");&&}&&else{&&&&out.print("&li&&a&href='ShowPage?page=sideLabel2&&curr=7'&只叹江湖几人回&/a&&/li&");&&}%&
发表评论：
TA的最新馆藏Jquery左侧浮动菜单鼠标滑过图标菜单滑动显示
下载资源()次
阅读次数()次
发布时间：
用法简介：
Jquery左侧浮动菜单鼠标滑过图标菜单滑动显示完美左侧浮动导航菜单，代码简洁短小引用代码：&link rel=&stylesheet& href=&css/style.css& type=&text/css& /&&script type=&text/javascript& src=&jquery-1.3.2.js&&&/script&&script type=&text/javascript&&$(function() {$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);$('#navigation & li').hover(function () {$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);},function () {$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);});});&/script&最好将脚本放入页面底部，用利用页面快速加载
相关标签：
上一篇:已经是第一篇数据
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。基于jquery实现后台左侧菜单点击上下滑动显示
字体：[ ] 类型：转载 时间：
一个左侧菜单点击是可以上下滑动，简洁时尚，复制即可使用，感兴趣的朋友可以参考下哈，希望对你有所帮助
今天做了一个左侧菜单的效果，做后台的时候应该会经常用到这个效果的,代码同样是简洁明了，复制即可用：效果图如下：&代码如下：（这个上下箭头的图标如上，图标可自己换）
代码如下: &!DOCTYPE html& &html& &head& &meta http-equiv="Content-Type" content="text/ charset=gb2312" /& &title&后台左侧菜单点击上下滑动显示jquery&/title& &script type="text/javascript" src="/js/jquery.js"&&/script& &script type="text/javascript"& $(function(){ $(".box dt:first").addClass("active"); $(".box dd:not(:first)").hide(); $(".box dt").click(function(){ $(this).next("dd").slideToggle() .siblings("dd").slideUp(); $(this).toggleClass('active') .siblings("dt").removeClass("active"); }); }); &/script& &style type="text/css"& * { padding:0; margin:0; } body { padding:100 font:12px "宋体"; } dl,dt,dd{list-style:} .box { width:500 border-bottom:1px solid #CCC; } .box dt { height:30 line-height:30 padding:0 10 font-size:12 cursor: border:1px solid # border-bottom: background:#eee url(img/bg.gif) no-repeat right -27 } .box dt.active { background-position:right 7 } .box dd { border-left:1px solid # border-right:1px solid # padding:0 10 } .box dd p{line-height:20 } &/style& &/head& &body& &div class="box"& &dl& &dt&标题一&/dt& &dd& &p&&a href="#"&第一项&/a&&/p& &p&&a href="#"&第二项&/a&&/p& &p&&a href="#"&第三项&/a&&/p& &/dd& &dt&标题二&/dt& &dd& &p&&a href="#"&第一项&/a&&/p& &p&&a href="#"&第二项&/a&&/p& &p&&a href="#"&第三项&/a&&/p& &/dd& &dt&标题三&/dt& &dd& &p&&a href="#"&第一项&/a&&/p& &p&&a href="#"&第二项&/a&&/p& &p&&a href="#"&第三项&/a&&/p& &/dd& &dt&标题四&/dt& &dd& &p&&a href="#"&第一项&/a&&/p& &p&&a href="#"&第二项&/a&&/p& &p&&a href="#"&第三项&/a&&/p& &/dd& &/dl& &/div& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具插件描述：这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。
这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果。菜单栏中的菜单项以一个接一个的方式显示，这种效果是通过为它们分别添加 transition-delay 来实现的。下面来看看默认的滑动侧边栏效果的制作方法。HTML结构所有滑动侧边栏效果都是使用无序列表来制作的，在默认的实现中，将无序列表包装到class为mobile的div中，为了便于控制，外围还添加了一个wrapper包裹div。这个DEMO使用纯CSS制作，按钮使用的是一个checkbox输入框来制作。插件中使用了font-awesome图标字体&div id="wrapper"&
Off Canvas Menu with Animated Links
&div class="mobile"&
&!-- Checkbox to toggle the menu --&
&input type="checkbox" id="tm" /&
&!-- The menu --&
&ul class="sidenav"&
&a href="#"&
&i class="fa fa-check"&
&a href="#"&
&i class="fa fa-inbox"&
&a href="#"&
&i class="fa fa-pencil"&
&a href="#"&
&i class="fa fa-cog"&
&a href="#"&
&i class="fa fa-star"&
&a href="#"&
&i class="fa fa-power-off"&
&!-- Content area --&
&!-- Label for #tm checkbox --&
&label for="tm"&
&/section&
CSS样式整个包裹div被设置为相对定位，并为其设置左浮动和阴影效果。.mobile {
&&float: position:
&&box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
&&overflow:
这里的按钮制作使用了一个小技巧。作为按钮的checkbox被设置为隐藏状态，然后在&section&元素使用一个&label&元素来和它关联，将&label&制作为按钮样式，实际在点击&label&时，相当于点击了checkbox按钮。/*Hiding the checkbox*/
.mobile section label {
font: bold 14px M
text - align:
border - radius: 4
padding: 10px 0;
width: 60 % ;
left: 20 % ;
text - transform:
按钮的点击使用了checkbox hack 技术。/*Animate content area to the right*/
#tm:checked ~ section {transform: translateX(150px);}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b {opacity: 1; transform: translateX(0);}
最后，为每个滑动侧边栏菜单项添加一些延迟来制作一个接一个出现的效果：#tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
#tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
#tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
#tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
#tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
#tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}
相关插件-背景,动画效果
讨论这个项目（7）回答他人问题或分享插件使用方法奖励jQ币
讲的好详细，谢谢~
快乐的con0
在手机上不能打开侧边栏啊 5s ios7 ios8都试过了
微笑的海绵0
真的很赞的插件啊
看着很赞！
Hello,GoodBye0
效果很不错啊
看着是很爽~ 自己想复用不是那么容易的~
PROMULGATOR
关注作者 (24)
收藏此插件 (187)
我当前jQ币余额：正在获取..
已下载次数：1432
所需jQ币：0