菜单导航栏tab页制作

一 页面部分

•     </ul>
  </div>
  <!-- 登录用户-->
  <div class="user-info">
      <ul class="user">
          <li>
              <a href="" style="text-align:center;">
                  <span style="margin-left: 50px;">
                          ${user.userName}<br>
                          ${user.deptName}
                  </span>
                  <i class="iconfont icon-pull_down f-left"></i>
              </a>
              <ul>
                  
                  <li class="exit">
                      <a id="logout">
                          退出系统
                      </a>
                  </li>
              </ul>
          </li>
      </ul>
  </div>
  

•     </ul>
  </div>
  
  <div class="content row" id="showInnnerDiv">
     <div class="icon-left"> left </div>
      <div class="tags-list" id="aList">
          <ul id="alUl"></ul>
      </div>
      <div class="icon-right"> > </div>
      <div class="content-box" id="boxIframe" style="margin: 0px !important;width: 100%">
          <!-- <iframe id='' frameborder=0 src='http://localhost:8080/zyhd-web/history/showHis'></iframe> -->
  						<h2 align="center" style="margin-top:10%;">
  							<div class="blue">
  								<em style="font-size: 25px;">欢迎使用本系统 <br> <br>我们将给您最好的服务 <br> <br>最舒适的体验
  								</em>
  							</div>
  						</h2>
      </div>
  
  
      <!--为了万恶的ie6-->
      <span style="float:right; font-size:0; position:relative; ">&nbsp;</span>
  </div>
  

版权所有 Copyright © 2014 Msunsoft.com All Right Reserved

二 js 事件（核心）

2.1 菜单的生成

//初始化的时候显示几个菜单
function selfDo(){
	var menuId="id1";
	 var meId = "#" + menuId;// 得到父节点的id
    $("#nav_dot").append("<li id='"+menuId+"'><h4><i class='iconfont '></i>fm.hdMenuName<i class='arrow iconfont icon-more'></i></h4></li>");	
    $(meId).append("<div class='list-item '> <a onclick='showPage();'>cm.hdMenuName</a></div>");
     var menuId="id2";
	 var meId = "#" + menuId;// 得到父节点的id
    $("#topMenu").append("<li style='width:5em;'><a><i class='iconfont'></i><p>fm.hdMenuName1</p></a><ul id='"+menuId+"'></ul></li>");
    $(meId).append("<li style='height:45px;width: 5em;'><a onclick='showPage();' style='height:45px;line-height:45px;width:100%;padding:0px;text-align:center;font-size: 15px;'>hdMenuName</a></li>");
}

2.2 菜单点击事件

//接收cm子菜单，打开连接，点击菜单打开tab页
function showPage(obj) {
	if ($("#boxIframe iframe").length <= 0) {
		$("h2").hide();
	}
	//点击一下菜单增加一个tab页，测试方便
	var menuId= new Date().getTime().toString();
	var page = menuId + "Page";// 页面id
	var tab = menuId + "Tab";// tab标签id
	var img = menuId + "Img";// 图标id
	var iPage = "#" + page;
	var iTab = "#" + tab;
	var timestamp = new Date().getTime().toString();
	if (document.getElementById(tab) == undefined) {
		$("iframe").hide();
		$("#alUl li").removeClass("active");
		$("#alUl").append("<li id='"+ tab+ "' class='active' onclick='togglePage("+ menuId+ ")'><span class='tags-dot'></span><span class='tags-text'>hdMenuName</span><i id='"+menuId+"' class='iconfont icon-close' onclick='closePage(event)'></i></li>");
		$("#boxIframe").append("<iframe id='"+page+"' frameborder=0 src=''></iframe>");	
		var tagsWidth = $(".tags-list").outerWidth();
		var tabUlWidth = $("#alUl").outerWidth();
		//向左偏移
		if(tabUlWidth>tagsWidth){
			$("#alUl").animate({
		          left:tagsWidth-tabUlWidth
		    },10);
		}
	} else {
		$("iframe").hide();
		$("#aList a").removeClass("active");
		$(iTab).addClass("active");//标签被选中效果
		$(iPage).show();
	}
	
}

2.3 菜单点击和关闭事件

//点击tab标签按钮显示打开的页面
function togglePage(mid) {
	openLeble(mid);
	var page = "#" + mid + "Page";// 页面id
	$("iframe").hide();
	$(page).show();
}
//标签打开效果
function openLeble(mid) {
	$("#alUl li").removeClass("active");
	var midTab = mid+"Tab";
	$("#"+midTab).addClass("active");
}

//关闭页面
function closePage(event) {
	var tabObj = event.target;
	var tid=tabObj.id;
	//点击close的标签tab
	var tab = "#" + tid + "Tab";// tab标签id()
	var page = "#" + tid + "Page";// 页面id
    //当前选中状态的标签tab
    var selectedDom=$("#alUl li.active");
    var selectedTab = "#"+selectedDom[0].id;
    if(tab == selectedTab){//点击的tab页就是当前选中状态的tab页
    	if ($(page).next().length > 0){
    		$("iframe").hide();
    		$("#alUl li").removeClass("active");
			$(tab).next().addClass("active");//标签被选中效果
			$(page).next().show();// 默认显示下一页
    	}else if($(page).prev().length > 0){
    		$("iframe").hide();
    		$("#alUl li").removeClass("active");
			$(tab).prev().addClass("active");//标签被选中效果
			$(page).prev().show();// 默认显示上一页
    	}else{
    		$("h2").show();
    	}
    }

	$(tab).remove();
	$(page).remove();// 删除页面
	event.stopPropagation();
}

2.4 tab页向左移动向右移动

function initTabClick(){

	$(".icon-left").on("click",function(){
		var containWidth = $(".tags-list").outerWidth(true);
		var ulWidth = $("#alUl").outerWidth(true);
		var left = $("#alUl").position().left;
		var liWith = 0;
		$("#alUl li").each(function(index,dom){
			 liWith = $(dom).outerWidth(true);
             return false;
         });
		
		var move = -liWith;
		
		var addwidth = containWidth -left;
		if(addwidth<ulWidth){//向左移动的最大偏移量未超标
			move = move + left;
			if(-move + containWidth > ulWidth){//偏移之后向左的最大偏移量超标
				move = containWidth -  ulWidth;//向左偏移的最大限度
			}
			$("#alUl").animate({
		          left:move
		    },200);
		}
	});
	$(".icon-right").on("click",function(){
		var left = $("#alUl").position().left;
		var liWith = 0;
		$("#alUl li").each(function(index,dom){
			 liWith = $(dom).outerWidth(true);
             return false;
         });
		var move = liWith;
		if(left <0){
			if(-left < liWith){
				move = -left;//向右移动最大偏移量
			}
			move = move + left
			  $("#alUl").animate({
                  left:move
              },200);
		}
		
	})
}

三 css样式部分

    a{
       cursor: pointer;
    }
#alUl{
 position: absolute;
}
#alUl li{
 display: inline;
}
.tags-list {
    position: relative;
    width: 96%;
    height: 37px;
    text-align: center;
    overflow: hidden;
    float: left;
}
.icon-left{
 position: relative;
 float: left;
 height: 22px;
 width: 25px;
 padding-right: 5px
}
.icon-right{
 position: relative;
 float: right;
 height: 22px;
 width: 25px;
 padding-left: 5px
}
#alUl li.active {
    background: #4493ef;
    border-color: #4493ef;
}
#alUl li {
    line-height: 22px;
    border: 1px solid #e9eaec;
    color: #495060;
    background: #fff;
    padding: 0 5px;
    display: inline-block;
    font-size: 12px;
    position: relative;
}
#alUl li:hover {
    background: #fdfdfd;
}
#alUl li .tags-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    background: #e9eaec;
    position: relative;
    top: 1px;
}
#alUl li.active .tags-dot {
    background: #fff;
}
#alUl li:hover, #alUl li:focus {
    color: #4493ef;
}

#alUl li:active, #alUl li:hover {
    text-decoration: none;
}
#alUl{
 position: absolute;
 white-space: nowrap;/*   保证li保持一行 */
}