This article mainly introduces JS + CSS to implement tree menus similar to QQ friends and blacklist effects, and involves JavaScript dynamic operation techniques for CSS styles of page elements based on mouse events, which is very simple and practical, for more information, see examples in this article. JS + CSS provides a tree menu similar to QQ friends and blacklist effects. Share it with you for your reference. The details are as follows:
The menu introduced today is superb, but some icons in it are lost and the path remains there, if you really want to use it, just create two icons for the folding menu and upload them by path. This menu imitates the menu function of the QQ panel. Many friends still like this function, I didn't expect to use so few JS Code to implement it. It's worth signing.
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 Code is as follows:
Tree menu of QQ friends/blacklistScript 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", "success"); initializeMenu ("success", "compareActuator ");} script
- Figure show area favorites
- My friends
- Zhang San [10000001]
- Li Si [10000002]
- Zhang San [10000001]
- Li Si [10000002]
- Stranger
- Zhang San [10000001]
- Li Si [10000002]
- Zhang San [10000001]
- Li Si [10000002]
I hope this article will help you design JavaScript programs.