一个qq菜单效果

这么一个简单的效果就花了偶两个多小时，失败。。。看来还是写的太少，眼高手低！！以后还要多动手写，不能只知道实现方法就pass了废话少说，代码如下(这个可是结构，样式，行为相分离哦)：

new document

*{margin:0px;padding:0px;}
#menu{
font-size:12px;
list-style-type:none;
width:100px;text-align:center;
}
#m1,#m2,#m3,#m4{
border:1px solid #666;
height:20px;line-height:20px;
background:#ccc;width:98px;
}
#m1_sub,#m2_sub,#m3_sub,#m4_sub{
display:inline-block;
}
ul#menu li ul li{
border:1px solid #999;
height:20px;line-height:20px;
background:#efefef;list-style-type:none;
}

function toggleMenu(){
var aTitle=new Array();
if(arguments.length==0) return false;

//获取对象
var $=function(id){
return document.getElementById?document.getElementById(id):document.all[id];
}

//将获取参数转换为数组
for(var i=0;i

  • 菜单1
    • 11111111111
    • 11111111111
  • 菜单2
    • 22222222222
    • 22222222222
  • 菜单3
    • 33333333333
    • 33333333333
  • 菜单4
    • 44444444444
    • 44444444444

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 一个qq菜单效果

    这么一个简单的效果就花了偶两个多小时,失败...看来还是写的太少,眼高手低!!以后还要多动手写,不能只知道实现方法就pass了废话少说,代码如下(这个可是结构,样式,行为相分离哦): new document *{margin:0px;padding:0px;} #menu{ font-size:12px; list-style-type:none; width:100px;text-align:center; } #m1,#m2,#m3,#m4{ border:1px solid #666;

  • js自定义QQ菜单效果

    js自定义QQ菜单效果

    QQ菜单大家都见过,这样有以下的功能: 1.点击我的好友,会展示下拉出具体的好友 2.再点击我的好友,会收缩 3.首次点击具体的某个好友,只有当前这个好友高亮 4.再次点击这个好友时,高亮状态就消失了 还是瞄一眼效果图吧: 最后代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> ul

  • Android_UI 仿QQ侧滑菜单效果的实现

    Android_UI 仿QQ侧滑菜单效果的实现

    相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级 2.在布

  • JS实现超简单的仿QQ折叠菜单效果

    JS实现超简单的仿QQ折叠菜单效果

    本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

  • Android自定义PopWindow实现QQ、微信弹出菜单效果

    前段时间在个人开发的项目中需要用到弹出菜单,类似QQ右上角的弹出菜单,自己使用popwin的次数也不是很多,其中也遇到过一点问题,今天正好有时间就把一些经验分享给大家. 先来看看最终实现过后的效果怎么样,下面放上图 自定义的弹出菜单是继承的popwin,并不是view 因为没有必要重复造车轮,如果想要实现某种特殊的效果另说.首先创建类MyPopWindow继承Popwindow. public class MyPopWindow extends PopupWindow implements Vi

  • Android中DrawerLayout实现侧滑菜单效果

    Android中DrawerLayout实现侧滑菜单效果

    众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效果了. 话不多说,先来发图以表我滴诚意: 开始写代码 DrawerLayout 是v4包里面的,所以项目里面需要添加v4包,具体怎么添加就不多说了, NavigationView需要在build.gradle里面添加compile 'com.android.support:d

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

  • Android自定义控件简单实现侧滑菜单效果

    Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android利用滑动菜单框架实现滑动菜单效果

    之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章Android仿人人客户端滑动菜单的侧滑特效实现代码,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架也是基于同样的原理的. 之前的文章中在最后也提到了,如果是你的应用程序中有很多个Activity都需要加入滑动菜单的功能,那么每个Activity都要写上百行的代码才能实现效果,再简单的滑动菜单实现方案也没用.因此我们今天要实现一个滑动菜单的框架,然后在任

  • android自定义左侧滑出菜单效果

    android自定义左侧滑出菜单效果

    这里给大家提供一个类似QQ聊天那种可以左侧滑出菜单的自定义控件.希望对大家有帮助.参考了一些网友的做法,自己整理优化了一下,用法非常简单,就一个类,不需要自己写任何的代码,只要添加上布局就能实现侧滑菜单效果,非常方便.不多说,一看就懂. 先来看看效果: 先看看实现: package com.kokjuis.travel.customView;   import android.content.Context; import android.content.res.TypedArray; impo

随机推荐