首页 / JAVASCRIPT / javascript代码简单的管理菜单_导航菜单

javascript代码简单的管理菜单_导航菜单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript代码简单的管理菜单_导航菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2753字，纯文字阅读大概需要4分钟。

内容图文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>脚本之家_www.gxlcms.com_简单的管理菜单</title> 
<style type="text/css"> 
body{font-size:12px;} 
ul,li,h2{margin:0;padding:0;} 
ul{list-style:none;} 
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} 
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;} 
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left} 
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} 
#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} 
#leftMenu{width:150px;height:500px;background-color:#009900;float:left} 
#leftMenu ul{margin:10px;} 
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} 
#leftMenu ul li a{color:#000000;text-decoration:none;} 
#content{width:750px;height:500px;float:left} 
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} 
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} 
.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
function $(id){return document.getElementById(id)} 
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器 
var tags=menu.getElementsByTagName("li");//顶部菜单 
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单 
var j; 
//点击左侧菜单增加新标签 
for(i=0;i<ck.length;i++){ 
ck[i].onclick=function(){ 
$("welcome").style.display="none"//欢迎内容隐藏 
//循环取得当前索引 
for(j=0;j<8;j++){ 
if(this==ck[j]){ 
if($("p"+j)==null){ 
openNew(j,this.innerHTML);//设置标签显示文字 
 } 
clearStyle(); 
$("p"+j).style.backgroundColor="yellow"; 
clearContent(); 
$("c"+j).style.display="block"; 
   } 
 } 
return false; 
  } 
 } 
//增加或删除标签 
function openNew(id,name){ 
var tagMenu=document.createElement("li"); 
tagMenu.id="p"+id; 
tagMenu.innerHTML=name+"   "+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>"; 
//标签点击事件 
tagMenu.onclick=function(evt){ 
clearStyle(); 
tagMenu.style.backgroundColor="yellow"; 
clearContent(); 
$("c"+id).style.display="block"; 
} 
//标签内关闭图片点击事件 
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){ 
evt=(evt)?evt:((window.event)?window.event:null); 
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为; 
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签 
var color=tagMenu.style.backgroundColor; 
//设置如果关闭一个标签时，让最后一个标签得到焦点 
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释 
if(tags.length-1>=0){ 
clearStyle(); 
tags[tags.length-1].style.backgroundColor="yellow"; 
clearContent(); 
var cc=tags[tags.length-1].id.split("p"); 
$("c"+cc[1]).style.display="block"; 
 } 
else{ 
clearContent(); 
$("welcome").style.display="block" 
   } 
  } 
} 
menu.appendChild(tagMenu); 
} 
//清除标签样式 
function clearStyle(){ 
for(i=0;i<tags.length;i++){ 
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00"; 
  } 
} 
//清除内容 
function clearContent(){ 
for(i=0;i<7;i++){ 
$("c"+i).style.display="none"; 
 } 
} 
} 
</ script> 
</head> 
<body> 
<div id="top"> 
<h2>管理菜单</h2> 
<div id="topTags"> 
<ul> 
</ul> 
</div> 
</div> 
<div id="main">  
<div id="leftMenu"> 
<ul> 
<li>个人资料</li> 
<li>相册管理</li> 
<li>日志管理</li> 
<li>留言管理</li> 
<li>风格管理</li> 
<li>系统管理</li> 
<li>帮助信息</li> 
</ul> 
</div> 
<div id="content"> 
<div id="welcome" class="content" style="display:block;"> 
  <div align="center"> 
    <p> </p> 
    <p><strong>欢迎使用用户管理系统！</strong></p> 
    <p> </p> 
    </div> 
</div> 
<div id="c0" class="content">个人资料</div> 
<div id="c1" class="content">相册管理</div> 
<div id="c2" class="content">日志管理</div> 
<div id="c3" class="content">留言管理</div> 
<div id="c4" class="content">风格管理</div> 
<div id="c5" class="content">系统管理</div> 
<div id="c6" class="content">帮助信息</div> 
</div> 
</div> 
<div id="footer">copyright for lalasxc </div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的javascript代码简单的管理菜单_导航菜单全部内容，希望文章能够帮你解决javascript代码简单的管理菜单_导航菜单所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/307459.html

来源：【匿名】

【上一篇】获取当前网页document.urllocation.href区别总结_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【javascript代码简单的管理菜单_导航菜单】教程文章相关的互联网学习教程文章

JavaScript实战（带收放动画效果的导航菜单）【代码】【图】

虽然有很多插件可用，但为了共同提高，我做了一系列JavaScript实战系列的实例，分享给大家，前辈们若有好的建议，请务必指出，免得误人子弟啊！（原创文章，转摘请注明：苏服：http://www.cnblogs.com/susufufu/p/5768402.html ）今天是第一战：带收放动画效果的菜单，效果如下图：（样式有点丑(-^-)）动画效果：鼠标hover改变所有目标的背景和字体颜色，鼠标移动到‘首页导航’，显示下面的分组菜单，分组菜单有子菜单，点击可缩...

layui实现三级导航菜单

本文实例为大家分享了layui实现三级导航菜单的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>.Net海</title><link href="~/layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" /> //注意路劲<style>ol li a {background-color: rgba(0,0,0,1) !important;}.three_this {b...

ABP框架中导航菜单的使用及JavaScript API获取菜单的方法

每一个WEB应用程序都有导航菜单，Abp也为用户提供了通用的创建和显示菜单方式。创建菜单一个应用程序可能包含不同的模块，而每个模块都可能有它自己的菜单项。在Abp中，需要创建一个派生自NavigationProvider的类来定义一个菜单项。假设我们有一个这样的主菜单： TasksReportsAdministration 1 User Management 2 Role Management由上可知，Administration菜单项有两个子菜单项。对应的生成方法如下：public class SimpleTaskSy...

jQuery实现淡入淡出二级下拉导航菜单的方法【图】

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下：这是一款基于jQuery实现的导航菜单，淡入淡出二级的菜单导航，很经常见到的效果，这里使用的是jquery-1.6.2版本的JS，鼠标移动到包括二级子菜单的主菜单上，会立即渐显出二级的子菜单，鼠标在二级子菜单上划过，子菜单项的背景会改变。运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-cod...

jQuery实现类似标签风格的导航菜单效果代码【图】

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下：这是一款基于jquery实现的类似TAB标签样式的网站导航菜单，引入了jquery，若运行代码后左上角提示错误，刷新页面即可正常。你可点击菜单查看到整体的效果。点击后对应菜单项下移，可扩展成二级菜单，也可以改成TAB标签布局，感兴趣的朋友自己研究吧。运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-bq-st...

jquery实现导航菜单鼠标提示功能【图】

这次给大家带来jquery实现导航菜单鼠标提示功能，jquery实现导航菜单鼠标提示功能的注意事项有哪些，下面就是实战案例，一起来看一下。这是一个奇妙的导航菜单鼠标提示特效，俗称“链接提示”，鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。先来看看运行效果截图：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh...

Freemarker生成树形导航菜单的方法

很多导航菜单是树形的，即一级一级往下分，这样的结构固然需要用递归来处理。对于Freemarker 来说，宏就相当于函数，其定义了签名及参数列表。所以在freemarker页面应这样写： <#macro menuTree menus><#if menus?? && menus?size gt 0><#list menus as menu><tr><td><input type="checkbox" name="ids" value="${menu.id}" /></td><td><span title="${menu.name!}" style="margin-left: ${menu.leaf * 30}px;[#if menu.l...

JavaScript控制的导航菜单的实例

这篇文章主要是对js控制的导航菜单实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助这种菜单效果是通过脚本和样式控制的，对于新手来说是非常好的学习内容：这种昨晚一边看舞动奇迹，一边整理这个菜单的小代码，一起来看看吧，会了可以温故知新，不会的可以借鉴一下思想，其实就是想完善一下这种前端的思想，让它不要再陌生：这是一个asp.net的master页面里面的菜单部分Html部分：<%@ Master Language="C#" Auto...

JS中用三种方式实现导航菜单中的二级下拉菜单【图】

我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单？下面小编给大家分享实现思路。但是如何实现类似的图片呢？实际上，我们有至少三种方式来实现，下面，我附上代码供大家参考。仅使用html和css<meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;...

模仿FlashAS效果的导航菜单_javascript技巧

模仿Flash AS效果的导航菜单 lastNo=0 function re(menu_no){ if(lastNo!=menu_no){ cur=menu_no+1 lastNo=menu_no rest() }else{ cur=100 } document.getElementById("board"+menu_no).style.visibility="visible" } function rest(){ for(i=1;i News Populor Sports Woman 1.由AS而想起Javascript 2.用Jscript写ASP有没有先天性的不足？ 3.没有了。 1.xhtml+css真的来了吗？ 2.Flash取代传统网站 3.Flash何时才...

用js实现网页上模仿桌面右键菜单_导航菜单

网页上模仿桌面右键菜单右击鼠标看看 -_-! \n"; HTMLstr += "\n"; HTMLstr += "\n"; HTMLstr += "\n"; // rbpm = right button pop menu HTMLstr += "\n"; HTMLstr += "\n"; HTMLstr += "\n"; HTMLstr += "\n"; HTMLstr += ""; HTMLstr += "\n"; HTMLstr += "\n"; } function AddExtendMenu(id,name,parent) { var TempStr = ""; eval("A_"+parent+".length++"); eval("A_"+parent+"[A_"+parent+".length-1] = id"); // 将...

js实现的非常棒的绿色下拉透明菜单_导航菜单

非常棒的绿色下拉透明菜单 var mmenus = new Array(); var misShow = new Boolean(); misShow=false; var misdown = new Boolean(); misdown=false; var mnumberofsub=0; var musestatus=false; var mpopTimer = 0; mmenucolor='#89CB10';mfontcolor='MenuText';mmenuoutcolor='#ADEF34';mmenuincolor='#B5E74E';mmenuoutbordercolor='#ECFA3A';mmenuinbordercolor='#5A2614';mmidoutcolor='#A9DA1D';mmidincolor=...

js实现的XP风格的右键菜单_导航菜单【图】

使用说明：在使用前，先建立菜单对象 var obj = new MouseMenu("obj"); 注意，obj 要和 MouseMenu("obj") 的obj 相同如建立了 obj 那么 obj 将会有以下方法，开始 obj.length = 0 方法： 1. addMenu(express[,icon][,url][,target][,title]); 功能：插入一个菜单，并且返回一个功能和上面说提起的 obj 一样的菜单对象 obj[obj.length] 然后 obj.length 将会 +1 说明： express 必须，字符串，显示在插入的菜单上的文...

腾讯QQ网页在线客服，随网页滚动条上下移动的效果一_导航菜单【图】

该特效需要用到相关的图片，比如那个效果的皮服，请各位自行将相关的图片下载到本地使用。腾讯QQ网页在线客服，随网页滚动条上下移动的效果一 function picsize(obj,MaxWidth){ img=new Image(); img.src=obj.src; if (img.width>MaxWidth) { return MaxWidth; } else { return img.width; } } function CloseQQ() { divStayTopleft.style.display="none"; return true; } var online= new Array(); 客户服务 d...

可以媲美Flash的JS导航菜单_导航菜单【图】

媲美Flash的JS导航菜单 .table1 { BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid } .alp { FILTER: Alpha(Opacity=0,FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=80, FinishY=80); BACKGROUND-COLOR: #99ccff } .maskl { OVERFLOW: hidden } .subm...

首页 / JAVASCRIPT / javascript代码简单的管理菜单_导航菜单

javascript代码简单的管理菜单_导航菜单

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript代码简单的管理菜单_导航菜单】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程