js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼
更新時(shí)間：2015年09月11日 16:01:38 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼,可實(shí)現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼。分享給大家供大家參考。具體如下：
這是一個(gè)完美的后臺(tái)左側(cè)管理菜單，從樣式來說，貌似出自專業(yè)人士之手，風(fēng)格清新，操作實(shí)用，用在WEB管理系統(tǒng)中或用在網(wǎng)站后臺(tái)管理中，最恰當(dāng)不過了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>后臺(tái)左側(cè)菜單<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);">關(guān)于我們</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>榮譽(yù)資質(zhì)</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);">產(chǎn)品中心</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>產(chǎn)品展示</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>最新產(chǎn)品</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);">客戶服務(wù)</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>客戶服務(wù)</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);">經(jīng)典案例</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>訪問統(tǒng)計(jì)</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>郵件發(fā)送設(shè)置</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>聯(lián)系部門</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>應(yīng)聘人員</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>產(chǎn)品訂購</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>信息轉(zhuǎn)移</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);">系統(tǒng)管理</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>基本設(shè)置</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>首頁設(shè)置</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);">個(gè)人管理</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.dhdzp.com"
target=_top>退出系統(tǒng)</A></TD></TR></TABLE></TD>
<TD width=1 bgColor=#d1e6f7></TD></TR></TABLE></BODY></HTML>
希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- vue.js 左側(cè)二級菜單顯示與隱藏切換的實(shí)例代碼
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JS實(shí)現(xiàn)新浪博客左側(cè)的Blog管理菜單效果代碼
- JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼
- JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
- 原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
- js實(shí)現(xiàn)的四級左側(cè)網(wǎng)站分類菜單實(shí)例
- js左側(cè)三級菜單導(dǎo)航實(shí)例代碼
- js左側(cè)多級菜單動(dòng)態(tài)的解決方案
- JavaScript實(shí)現(xiàn)左側(cè)菜單效果
相關(guān)文章
js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法
這篇文章主要介紹了微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
JavaScript實(shí)現(xiàn)像素鳥小游戲的詳細(xì)流程
最近通過javascript這門語言,然后結(jié)合html的來寫一個(gè)簡單的小游戲 ,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)像素鳥小游戲的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
同時(shí)使用n個(gè)window onload加載實(shí)例介紹
window onload加載多個(gè)同時(shí)使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下2013-04-04
在html頁面中顯示時(shí)間是很常見的，實(shí)現(xiàn)的方法有很多，下面為大家簡單介紹兩種方式，有需求的朋友可以參考下，希望對大家有所幫助2013-08-08
Javascript 生成 HTML元素的方法在本文中介紹2種，第一種是比較正規(guī)的創(chuàng)建元素方法，第二種是利用javascript中的write()方法直接寫出html元素。2014-05-05
判斷數(shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
同一個(gè)頁面, 有多組(不固定), 每組區(qū)塊數(shù)量不一定一樣的小區(qū)塊. 要求每次只展開一個(gè)區(qū)塊，需要的朋友可以參考下。2011-01-01
這篇文章主要為大家詳細(xì)介紹了ionic3雙擊返回退出應(yīng)用的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
javascript 三組文字間隙滾動(dòng)實(shí)例代碼
非常實(shí)用的文字間隙滾動(dòng)效果代碼2008-06-06