js實現(xiàn)的后臺左側(cè)管理菜單代碼
更新時間：2015年09月11日 16:01:38 作者：企鵝
這篇文章主要介紹了js實現(xiàn)的后臺左側(cè)管理菜單代碼,可實現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標事件動態(tài)操作頁面元素樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)的后臺左側(cè)管理菜單代碼。分享給大家供大家參考。具體如下：
這是一個完美的后臺左側(cè)管理菜單，從樣式來說，貌似出自專業(yè)人士之手，風格清新，操作實用，用在WEB管理系統(tǒng)中或用在網(wǎng)站后臺管理中，最恰當不過了。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>后臺左側(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>榮譽資質(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);">客戶服務</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);">經(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)計</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ā)送設置</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>應聘人員</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>基本設置</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://chabaoo.cn"
target=_top>退出系統(tǒng)</A></TD></TR></TABLE></TD>
<TD width=1 bgColor=#d1e6f7></TD></TR></TABLE></BODY></HTML>
希望本文所述對大家的JavaScript程序設計有所幫助。
您可能感興趣的文章:
相關(guān)文章
不讓瀏覽器讀取緩存，故采用家隨機數(shù)方式引入腳本的方式，此法適用于及時刷新不讀緩存的情況2014-09-09
JS利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片
ffmpeg?是一個非常流行的開源軟件套件,用于處理音頻和視頻數(shù)據(jù),而要想對圖片之類的進行壓縮,我們可以選擇?sharp?來進行操作,所以下面我們就來學習一下前端如何利用ffmpeg和sharp玩轉(zhuǎn)音視頻和圖片吧2023-10-10
20個常見的JavaScript數(shù)組操作總結(jié)
JavaScript中的Array對象與其他編程語言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見操作的方法，本文整理了一些常用的，需要的可以參考一下2022-09-09
JavaScript原生對象之String對象的屬性和方法詳解
這篇文章主要介紹了JavaScript原生對象之String對象的屬性和方法詳解,本文講解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法屬性,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)帶刻度尺滑塊功能，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
class是創(chuàng)建對象的模版，由一系列屬性和方法構(gòu)成，用于表示對同一概念的數(shù)據(jù)和操作。有的屬性和方法是對外的，但也有的是私有的。本文梳理了六種私有屬性的實現(xiàn)方式，需要的可以參考一下2022-03-03
本文將提供php版的JavaScript裁剪圖片代碼，僅供大家參考2012-11-11
這篇文章主要為大家介紹了微信小程序用戶后臺定位及錄音授權(quán)及請求示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
JavaScript學習總結(jié)之正則的元字符和一些簡單的應用
這篇文章主要介紹了JavaScript學習總結(jié)之正則的元字符和一些簡單的應用,需要的朋友可以參考下2017-06-06
JavaScript:new 一個函數(shù)和直接調(diào)用函數(shù)的區(qū)別分析
或許許多人對此不以為然，在函數(shù)前加 new 關(guān)鍵字，不就是實例化一個對象嗎？但事情顯然沒那么簡單2013-07-07