communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Code du menu de gestion de gauche du backend implémenté par les compétences js_javascript

Code du menu de gestion de gauche du backend implémenté par les compétences js_javascript

WBOY
Libérer： 2016-05-16 15:39:48
original
1792 Les gens l'ont consulté

L'exemple de cet article décrit le code du menu de gestion de gauche en arrière-plan implémenté dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de gestion backend parfait. En termes de style, il semble avoir été créé par des professionnels. Le style est frais et le fonctionnement est plus approprié pour être utilisé dans les systèmes de gestion WEB ou dans le backend de sites Web. gestion. .

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/

Le code spécifique est le suivant : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>后台左侧菜单<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
BODY {
 MARGIN: 0px
}
P {
 MARGIN: 0px
}
BODY {
 COLOR: #000; BACKGROUND-COLOR: #fff
}
BODY {
 FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
TABLE {
 FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
INPUT {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
SELECT {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
TEXTAREA {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
A:link {
 COLOR: #036; TEXT-DECORATION: none
}
A:visited {
 COLOR: #036; TEXT-DECORATION: none
}
A:hover {
 COLOR: #f60; TEXT-DECORATION: underline
}
A.menuChild:link {
 COLOR: #036; TEXT-DECORATION: none
}
A.menuChild:visited {
 COLOR: #036; TEXT-DECORATION: none
}
A.menuChild:hover {
 COLOR: #f60; TEXT-DECORATION: underline
}
A.menuParent:link {
 COLOR: #000; TEXT-DECORATION: none
}
A.menuParent:visited {
 COLOR: #000; TEXT-DECORATION: none
}
A.menuParent:hover {
 COLOR: #f60; TEXT-DECORATION: none
}
TABLE.position {
 WIDTH: 100%
}
TR.position {
 HEIGHT: 25px; BACKGROUND-COLOR: #f4f7fc
}
TD.position {
 BORDER-RIGHT: #adceff 1px solid; PADDING-LEFT: 20px; BORDER-BOTTOM: #adceff 1px solid
}
TABLE.listTable {
 WIDTH: 98%; BACKGROUND-COLOR: #b1ceee
}
TR.listHeaderTr {
 FONT-WEIGHT: bold; HEIGHT: 25px; BACKGROUND-COLOR: #ebf4fd; TEXT-ALIGN: center
}
TR.listTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}
TR.listAlternatingTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: center
}
TR.listFooterTr {
 HEIGHT: 30px; BACKGROUND-COLOR: #ebf4fd; TEXT-ALIGN: center
}
TABLE.editTable {
 WIDTH: 98%; BACKGROUND-COLOR: #b1ceee
}
TR.editHeaderTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #ebf4fd
}
TD.editHeaderTd {
 PADDING-LEFT: 50px; FONT-WEIGHT: bold
}
TR.editTr {
 HEIGHT: 30px
}
TD.editLeftTd {
 WIDTH: 150px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: center
}
TD.editRightTd {
 PADDING-LEFT: 10px; BACKGROUND-COLOR: #fff
}
TR.editFooterTr {
 HEIGHT: 40px; BACKGROUND-COLOR: #ebf4fd
}
TD.editFooterTd {
 PADDING-LEFT: 150px
}
</style>
<SCRIPT language=javascript>
 function expand(el)
 {
  childObj = document.getElementById("child" + el);
  if (childObj.style.display == 'none')
  {
   childObj.style.display = 'block';
  }
  else
  {
   childObj.style.display = 'none';
  }
  return;
 }
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=170 
background=images/menu_bg.jpg border=0>
 <TR>
 <TD vAlign=top align=middle>
 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
 <TR>
  <TD height=10></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(1) 
  href="javascript:void(0);">关于我们</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child1 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>公司简介</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>荣誉资质</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(2) 
  href="javascript:void(0);">新闻中心</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child2 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>公司新闻</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(3) 
  href="javascript:void(0);">产品中心</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child3 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>产品展示</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>最新产品</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(4) 
  href="javascript:void(0);">客户服务</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child4 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>客户服务</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(5) 
  href="javascript:void(0);">经典案例</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child5 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(6) 
  href="javascript:void(0);">高级管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child6 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>广告管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>访问统计</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>邮件发送设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>联系部门</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>用户留言</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>招聘职位</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>应聘人员</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>留言簿</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>产品订购</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>链接管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>文件管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>信息转移</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(7) 
  href="javascript:void(0);">系统管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child7 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>基本设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>样式管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>栏目管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>功能管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>菜单管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>首页设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>管理员列表</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A 
  class=menuParent onclick=expand(0) 
  href="javascript:void(0);">个人管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child0 style="DISPLAY: none" cellSpacing=0 cellPadding=0 
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  href="#" 
  target=main>修改口令</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9 
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild 
  onclick="if (confirm('确定要退出吗？')) return true; else return false;" 
  href="http://www.jb51.net" 
  target=_top>退出系统</A></TD></TR></TABLE></TD>
 <TD width=1 bgColor=#d1e6f7></TD></TR></TABLE></BODY></HTML>
Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Étiquettes associées：
js
source：php.cn
Article précédent：Native JS implémente le code d'effet du menu de classification des produits de type Taobao sur le côté gauche_javascript skills Article suivant：jquery implémente l'effet de menu coulissant le plus simple code_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal