Maison >interface Web >js tutoriel >Code JS pour implémenter un menu pliable vertical gris argenté avec effet stéréoscopique 3D

Code JS pour implémenter un menu pliable vertical gris argenté avec effet stéréoscopique 3D

不言original: 2018-07-02 09:57:551562parcourir

Cet article présente principalement le code JS pour implémenter un menu pliable vertical gris argenté avec un effet tridimensionnel 3D. Il peut réaliser la fonction de base JS consistant à étendre et plier dynamiquement la barre de menus en réponse aux événements de la souris. certaine valeur de référence et est nécessaire. Les amis peuvent se référer à

Cet article décrit l'exemple de JS implémentant un code de menu pliant vertical gris argenté avec un effet tridimensionnel 3D. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'un menu pliant vertical à plusieurs niveaux gris argenté super cool qui peut être utilisé sur le côté gauche de la page Web. un arrière-plan au menu vous-même, et il est prédéfini en CSS. Le code est laissé. Il s'agit d'un menu en mode de gestion d'arrière-plan relativement standard et classique. Il a une structure p+Css, est conforme aux normes et est facile à modifier. c'est plutôt bien.

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

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页左边的竖式菜单</title>
<style>
body
{
background-color:#F3F3F3;
margin:0px;
font-size: 9pt;
background-position:center;
text-decoration: none;
scrollbar-face-color: #f6f6f6;
scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #EEEEEE; scrollbar-3dlight-color: #EEEEEE; scrollbar-arrow-color: 
#330000; scrollbar-track-color: #f6f6f6; scrollbar-darkshadow-color: #ffffff;
}
/* 网站链接总的css定义*/
a{text-decoration: underline;}
a:link {color: #595989;}
a:visited {color: #595989;} 
a:hover{color: #ff0000;} 
a:active {color: #595989;} 
.dt1, .dt2, .dt3, .dt4 ,.dt{
padding: 0px; margin: 0px; border: 0px; padding-left: 25px;
border-left: 5px solid #c0c0c0; 
border-top: 1px solid #ffffff; 
border-bottom: 1px solid #c0c0c0;
width: auto;text-align: left;
line-height: 26px;
height: 26px;
background: #E0E0E0;
cursor:pointer!important;
cursor:hand;
display:block;
}
/*这里可以加入背景图片
.dt1{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt{
 background-image: url();
 background-repeat: no-repeat;
 background-position: 8px center;
}
.dt2{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt4{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt3{
 background-image: ur();
 background-repeat: no-repeat;
 background-position: right center;
}*/
#aboutbox { /*左侧box*/
padding: 0px; margin: 0px; border: 0px;
width: 190px; 
float: left;
background: #eee;
}
#aboutbox dl { /*dl、dt、dd*/
margin: 0px; border: 0px;
border: medium none; /*不显示边框*/
background:#eeeeee;
background-image: url();/*背景图像，这里省略了*/
background-repeat: repeat-y;
background-position: left;
clear: both;
}
#aboutbox dd {
padding: 0px; margin: 0px; border: 0px;
background: #eee;
border-top: 1px solid #fff;
border-left: 5px solid #e0e0e0;
padding-right:3px;
}
#aboutbox ul { /*ul、li定义*/
padding: 0px;
margin: 0px; 
border: 0px;
list-style-type: none; 
}
#aboutbox li {
padding: 0px; margin: 0px; border: 0px;
text-align: left;
text-indent: 10px;
list-style:none;
}
#aboutbox li a {
padding-left: 5px; margin: 0px; border: 0px;
display: block;
background: #eee;
font-weight: normal;height: 22px;line-height: 22px;
color: #000;
border: 1px solid #eee;
text-decoration: none;}
#aboutbox li a:link,#aboutbox li a:visited {height: 22px;line-height: 22px;}
#aboutbox li a:hover {
padding-left: 5px;
background-color: #e4e4e4;
border: 1px solid #999999;
color: #D90000;height: 22px;line-height: 22px;}
#aboutbox li a:active {color: #333333;height: 22px;line-height: 22px;background: #EEEEEE;}
.center_tdbgall /* 中部表格背景颜色 */
{
background:#ffffff;
}
</style>
</head>
<body>
<table class=center_tdbgall width="191" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width=191 rowspan="2" valign=top class=web_left_all>
  <p id=aboutbox>
  <dl>
 <dt class=dt1 id=dt1 onmouseover=showbg(1) onclick=showsubmenu(1) onmouseout=showoutbg(1)><B>网站动态</B>
  <dd id=submenu1>
  <ul>
  <LI><A href=&#39;#&#39;>今日关注</A></LI>
  <LI><A href=&#39;#&#39;>最新整理</A></LI>
  <LI><A href=&#39;#&#39;>下载排行</A></LI>
  </ul>
  </dd>
 </dt>
 </dl>
 <dl>
 <dt class=dt2 id=dt2 onmouseover=showbg(2) onclick=showsubmenu(2) onmouseout=showoutbg(2)><B>管理新闻</B>
  <dd id=submenu2>
  <ul>
  <LI><A href=&#39;#&#39;>新闻分类</A></LI>
  <LI><A href=&#39;#&#39;>新闻列表</A></LI>
  <LI><A href=&#39;#&#39;>审核新闻</A></LI>
  </ul>
  </dd>
 </dt>
 </dl>
<script>
function showsubmenu(sid){
 whichEl = eval(&#39;submenu&#39; + sid);
 if (whichEl.style.display == &#39;none&#39;){
 eval("submenu" + sid + ".style.display=&#39;&#39;;");
 eval("dt" + sid + ".className=&#39;dt2&#39;;");
 }
 else{
 eval("submenu" + sid + ".style.display=&#39;none&#39;;");
 eval("dt" + sid + ".className=&#39;dt1&#39;;");
 }
}
function showbg(sid){
 whichEl = eval(&#39;submenu&#39; + sid);
 if (whichEl.style.display == &#39;none&#39;){
 eval("dt" + sid + ".className=&#39;dt4&#39;;");
 }
 else{
 eval("dt" + sid + ".className=&#39;dt3&#39;;");
 }
}
function showoutbg(sid){
 whichEl = eval(&#39;submenu&#39; + sid);
 if (whichEl.style.display == &#39;none&#39;){
 eval("dt" + sid + ".className=&#39;dt1&#39;;");
 }
 else{
 eval("dt" + sid + ".className=&#39;dt2&#39;;");
 }
}
</script> 
 </p></TD>
</tr>
</table>
</body>
</html>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez javascript pour obtenir l'effet de changer d'image à gauche et à droite

Comment utiliser JS pour mettre en œuvre une fenêtre contextuelle de paiement WeChat Fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

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

Article précédent：Introduction à la fonction de menu multi-sélection de niveaux infinis implémentée par un seul composant vueArticle suivant：Introduction à la fonction de menu multi-sélection de niveaux infinis implémentée par un seul composant vue

Articles Liés

Voir plus