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


Posted in Javascript onOctober 22, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
jquery实现图片翻页效果
Dec 23 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
小程序云开发之用户注册登录
May 18 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
QT与javascript交互数据的实现
May 26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
You might like
main.php
2006/12/09 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python操作xml文件示例
2014/04/07 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python实现学校管理系统
2018/01/11 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
公积金单位接收函
2014/01/11 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Java 死锁解决方案
2022/05/11 Java/Android