HTML模仿QQ好友列表,JS+CSS实现类似QQ好友及黑名单效果的树型菜单
本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单。分享给大家供大家参考。具体如下:
今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
QQ好友/黑名单的树型菜单
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.parentNode.style.backgroundImage = "url()";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url()" : "url()";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("productsMenu", "productsActuator");
initializeMenu("newPhonesMenu", "newPhonesActuator");
initializeMenu("compareMenu", "compareActuator");
}
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 203px;
}
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar {
background: url() no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url() no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
图秀地带收藏夹
我的好友
- 张三[10000001]
- 李四[10000002]
- 张三[10000001]
- 李四[10000002]
陌生人
- 张三[10000001]
- 李四[10000002]
- 张三[10000001]
- 李四[10000002]
HTML模仿QQ好友列表,JS+CSS实现类似QQ好友及黑名单效果的树型菜单相关推荐
- JS+CSS打造仿QQ面板的三级折叠下拉菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- qq好友列表获取导出,利用QQ协议实现好友数据备份,包含:qq好友、QQ分组、QQ群、qq群成员【附code源码】
qq好友列表获取导出,利用QQ协议实现qq好友数据备份,包含:qq好友.QQ分组.QQ群.qq群成员. 我们是在浏览器中的操作,接下来看看数据到底怎么获取的,我们通过Fiddler的查找功能,就可以查 ...
- html菜单树实现原理,HTML_DIV+CSS构成树型菜单,这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单 这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...
- CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
- java 气泡聊天消息_Html,CSS 实现类似QQ的气泡聊天
下面是效果图: 下面说下关键地方的样式设置,然后贴出html和css代码(不多). 步骤1:布局 消息采用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和 ...
- 下拉的DIV+CSS+JS二级树型菜单,刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- DIV+CSS+JS二级树型菜单,刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- html中验证qq的正确性,QQ强制聊天js脚本代码 可判断好友关系
(function(exports){ varchatVO = { //你的QQ yourQQ: "20737302", //你好友的QQ yourFQQ: "64937 ...
- mysql生成类似qq号_【mysql】类似QQ的好友关系表是怎么设计的?
请问一下类似QQ的好友关系表是怎么设计的? 难道只是简单的id,userId,friendId吗? 回答 其实没有必要把事情想得太复杂了,按照需求慢慢递进就可以了. 这是我做关注功能的表结构,可以参考 ...
最新文章
- 【技术趋势】德勤发布2020技术趋势报告,五个新趋势可引发颠覆性变革
- Java中Runnable和Thread的区别
- JavaWeb总结(六)—Session
- day7 python学习随笔
- Java关于远程调试程序教程
- MXD文档保存和地图浏览
- Codeforces 994B. Knights of a Polygonal Table
- JDK 12开关表达式遇到意外的枚举值
- java api帮助文档_JAVA的Swagger界面丑、功能弱怎么破?
- oracle session_wait,转载:学习Oracle动态性能表-(8)-V$SESSION_WAIT,V$SESSION_EVENT
- 为踏实上进的【飞鸽传书】开发者而感动
- php inet pton,inet_pton 网络函数在PHP中的作用是什么
- selection.text
- php 编码 url,php escape URL编码
- mybatis+mysql查询类别下的所有子类别(递归)
- Java 第 34 课 1365. 有多少小于当前数字的数字 1331. 数组序号转换
- 投资 - 指标介绍: MACD
- 世界坐标系,图像坐标系,车体坐标系,雷达坐标系转换
- HDU 2276 Kiki Little Kiki 2 (位运算+矩阵快速幂)
- widget是什么意思?
热门文章
- windows7系统,NVIDIA GeForce GTX 750 Ti 2G显卡搭建caffe、TensorFlow、Keras深度学习GPU环境
- 为什么有HTTP协议,还要有websocket协议
- 标注横纵坐标MATLAB,matlab FFT 横纵坐标
- Unity3D学习笔记(八):四元素和书籍推荐
- apex打不开/启动不了游戏/打开就闪退解决办法
- php微信昵称保存,分析一次写入微信昵称数据执行sql报错问题
- muduo学习笔记:base部分之高性能日志库
- 电脑蓝屏提示错误代码0X000000B4怎么办?
- 2018-8-10-win10-uwp-气泡
- 依图悄然进军AI芯片领域,对标地平线,机器视觉竞争进入下半场