This article describes the JS+CSS to achieve a similar QQ friends and blacklist effect of the tree-type menu. Share to everyone for your reference. Specifically as follows:
Today's introduction of the menu is the best ah, but there are some of the icons lost, the path is still there, really want to use a friend of their own production of two folding menu icon by path to go up on the line, this menu is to imitate the menu features QQ panel, many friends still like this function, Did not expect to use so little JS code can also be realized, it is worth signing oh.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-css-qq-hy-hmd-style-menu-codes/
The specific code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <title>qq Buddy/blacklist tree menu </TITLE> </HEAD> <BODY> <script> 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"); } </script> <style> 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;} </sty le>
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
