JS实现新浪博客左侧的Blog管理菜单效果代码

前端技术 2023/09/07 JavaScript

本文实例讲述了JS实现新浪博客左侧的Blog管理菜单效果代码。分享给大家供大家参考，具体如下：

这里介绍新浪博客左侧的Blog管理菜单，我们变通一下，如果你在设计程序，那么本款菜单用到后台管理中想必应该很合适吧，图片是调用新浪的，用了比较多的图片，你用的时候最好是下载到本地，以免新浪哪天改版了，你就傻了。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-sina-blog-left-menu-style-codes/

具体代码如下：

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<title>新浪博客左侧的管理菜单</title>
<style type=\"text/css\">
<!--
body{margin:0;padding:0;background:url(\"images/bg.gif\")}
body, td{font-size:12px}
.menu_box_pad{background:#fdf9d5;padding:0 2px 2px 2px}
.menu_box{border-top:1px solid #ababab;border-left:1px solid #ababab;border-right:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6}
.menu_box th{background:url(\'images/menu_list_icon.gif\') no-repeat center;line-height:22px;width:10px} 
.menu_box td{background:url(\'images/menu_list_split.gif\') no-repeat left bottom;line-height:20px}
.menu_box a{text-decoration:none;color:#000}
.menu_box a:hover{text-decoration:underline}
.hand{cursor:hand;cursor:pointer}
.ctrl_menu{border-left:1px solid #767676;border-bottom:1px solid #767676;border-right:1px solid #767676;background:#ffcf60}
.ctrl_menu_title{padding-left:15px;font-weight:bold;line-height:25px}
.ctrl_menu_title_bg{background:url(\'images/menu_title_bg.gif\')}
.top_bg{background:url(\"images/top_bg.gif\")}
.logo_bg{background:url(\"images/logo_bg.gif\")}
#top_nav_menu {color:#fff}
#top_nav_menu a{text-decoration:none;color:#fff}
#top_nav_menu a:hover{text-decoration:underline;color:#ff6}
-->
</style>
<script>
function $(_sId){
 return document.getElementById(_sId);
}
function exist(_sId){
 var oObj = $(_sId);
 return oObj != null ? oObj : false;
}
function dw(_sTxt){
 document.write(_sTxt);
}
function hide(_sId){
 $(_sId).style.display = $(_sId).style.display == \"none\" ? \"\" : \"none\";
}
function onlyShow(_sId, _iNum, _sPic, _sTxt1, _sTxt2){
 var i = 0;
 var oCurr = exist(_sId + i);
 while(oCurr){
  oCurr.style.display = \"none\";
  $(_sPic + i).src = _sTxt2;
  i++;
  oCurr = exist(_sId + i)
 }
 $(_sId + _iNum).style.display = \"\";
 $(_sPic + _iNum).src = _sTxt1;
}
function swapShow(_sId){
 var i = 0;
 var oCurr = exist(_sId + i);
 while(oCurr){
  hide(_sId + i);
  i++;
  oCurr = exist(_sId + i)
 }
}
function seekKey(_sKey){
 var i = 0;
 while(exist(_sKey + i)){
  i++;
 }
 return i;
}
function swapPic(_sId,_sAttr,_sTxt1, _sTxt2) {
 $(_sId)[_sAttr] = $(_sId)[_sAttr].indexOf(_sTxt1) > -1 ? _sTxt2 : _sTxt1;
}
function swap(_sId,_sAttr,_sTxt1, _sTxt2) {
 $(_sId)[_sAttr] = $(_sId)[_sAttr] == _sTxt1 ? _sTxt2 : _sTxt1;
}
function moveGif(_sId){
 swap(_sId,\'className\',\'marginLeft2\',\'\');
}
function moveStart(_sId){
 __tmp__time = setInterval(\"moveGif(\'\" + _sId + \"\')\",200);
}
function moveStop(_sId){
 clearInterval(__tmp__time);
 $(_sId).className = \"marginLeft2\";
}
function switchShow(){
 hide(\'left\');
 swapPic(\'arrow\',\'src\',\'images/control_switch_up.gif\',\'images/control_switch_down.gif\');
 swapShow(\'hideLeft\');
 swapShow(\'hideBody\');
}
function scroll_to_top()
{
 document.body.scrollTop=0;
}
function mainFrameRedirect(url)
{
 oo = document.getElementById(\"mainFrame\");
 oo.url = url;
}
</script>
</head>
<body>
  <table align=\"left\" width=\"220\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
   <tr>
    <td height=\"50\" align=\"left\" valign=\"top\">
   <!-- 控制面板菜单 -->
  <table width=\"205\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"ctrl_menu\">
   <tr height=\"5\"><td></td></tr>
   <tr>
   <td align=\"center\">
   <!-- BLOG文章 -->
   <table width=\"195\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"ctrl_menu_title_bg\">
  <tr class=\"hand\" onClick=\"hide(\'hideMenuFunc3\')\">
  <td width=\"174\" class=\"ctrl_menu_title\">BLOG文章管理</td>
  <td width=\"21\"><image id=\'MenuFunc3\' src=\"images/menu_title_down.gif\"></td>
  </tr>
  <tr id=\"hideMenuFunc3\">
  <td align=\"left\" colspan=\"2\" class=\"menu_box_pad\">
  <table width=\"100%\" border=\"0\" cellspacing=\"5\" cellpadding=\"0\" class=\"menu_box\">
   <tr>
   <th> </th>
   <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">发表BLOG文章</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">BLOG文章管理</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">BLOG评论管理</a></td>
   </tr>
  </table>    </td>
  </tr>
  </table>
   <!-- /BLOG文章 -->   </td>
   </tr>
   <tr height=\"5\"><td></td></tr>
   <tr>
   <td align=\"center\">
   <!-- BLOG信息 -->
   <table width=\"195\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"ctrl_menu_title_bg\">
  <tr class=\"hand\" onClick=\"hide(\'hideMenuFunc2\')\">
  <td width=\"174\" class=\"ctrl_menu_title\">BLOG信息设置</td>
  <td width=\"21\"><image id=\'MenuFunc2\' src=\"images/menu_title_down.gif\"></td>
  </tr>
  <tr id=\"hideMenuFunc2\">
  <td align=\"left\" colspan=\"2\" class=\"menu_box_pad\" >
 <table width=\"100%\" border=\"0\" cellspacing=\"5\" cellpadding=\"0\" class=\"menu_box\">
    <tr>
    <th> </th>
    <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">更改基本信息</a></td>
    </tr>
    <tr>
    <th> </th>
    <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">定制我的模板</a></td>
    </tr>
    <tr>
    <th> </th>
    <td><a href=\"#\" target=\"mainFrame\" onClick=\"scroll_to_top()\">首页内容维护</a></td>
    </tr>
   </table></td>
  </tr>
  </table>
<!-- /BLOG信息 --></td>
   </tr>
   <tr height=\"5\"><td></td></tr>
   <tr>
   <td align=\"center\">
   <!-- 个人信息 -->
   <table width=\"195\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"ctrl_menu_title_bg\">
  <tr class=\"hand\" onClick=\"hide(\'hideMenuFunc1\')\">
  <td width=\"174\" class=\"ctrl_menu_title\">个人信息设置</td>
  <td width=\"21\"><image id=\'MenuFunc1\' src=\"images/menu_title_down.gif\"></td>
  </tr>
  <tr id=\"hideMenuFunc1\" style=\"display:none\">
  <td align=\"left\" colspan=\"2\" class=\"menu_box_pad\">
 <table width=\"100%\" border=\"0\" cellspacing=\"5\" cellpadding=\"0\" class=\"menu_box\">
   <tr>
   <th> </th>
   <td><a target=\"mainFrame\" href=\"#\" onClick=\"scroll_to_top()\">更改基本资料</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a target=\"mainFrame\" href=\"#\" onClick=\"scroll_to_top()\">登录默认选项</a></td>
   </tr>
   </table>    </td>
  </tr>
  </table>
   <!-- /个人信息 -->   </td>
   </tr>
   <tr height=\"5\"><td></td></tr>
   </table> 
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/19371

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案