$(document).ready(function() {
$(window).resize(function(){
var need=0;
var ul_max_width = $(window).width()*0.96-$("#nav #admin").width();
//alert(need + ', ul_max_width: ' + ul_max_width);
need=$('#nav ul').width();
if(ul_max_width<need){
$("#nav .logo_name").html('CZ');
$("#nav .logo_rear").html('');
$('#nav ul nav_classification').removeClass('csshide');
need=$('#nav ul').width();
if(ul_max_width<need){
var len = $('#nav ul li').length;
while(--len>=0){
if($(this).attr('id') !='nav_classification'){
need -= $('#nav ul li').eq(len).width();
alert(need);
$('#nav ul li').eq(len).addClass('csshide');
if(need<ul_max_width){ break;}
}
}
}
} else {
$("#nav .logo_name").html('carlo-z');
$("#nav .logo_rear").html('.com');
}
});
});
#nav
{
background: #65666D;
padding-left: 2%;
padding-right: 2%;
margin: 0;
overflow:hidden;
}
#nav ul
{
}
#nav ul li
{
float: left;
height: 40px;
}
#nav a
{
position: relative;
display: block;
outline: 0;
float: left;
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
_line-height: 40px\9;
overflow: hidden;
margin: 0 auto;
z-index: 1000;
zoom: 1;
padding: 0 22px 0 23px;
text-decoration: none;
}
#nav a:visited
{
color: #fff;
}
#nav a:hover
{
background: #55575c;
border-left: 1px solid #4e5155;
border-right: 1px solid #4e5155;
padding: 0 22px;
margin-right: -1px;
z-index: 1001;
}
#nav #admin
{
display: inline-block;
width: auto;
height: 40px;
float: right;
background-color: #4DBE39;
}
#nav .logo{padding: 0; margin: 0; border: 0; overflow: hidden;}
#nav .logo_name{font-size: 32px; font-weight: bold; color: #FFFFFF;}
#nav .logo_rear{font-size: 21px; font-weight: bold; color: #4DBE39;}
#nav .csshide{display:none;}
<!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>
<title>无标题页</title>
<link href="../base.css" rel="stylesheet" type="text/css" />
<link href="moudle_nav.css" rel="stylesheet" type="text/css" />
<script src="../jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="moudle_nav.js" type="text/javascript"></script>
<link href="../atb_mystyle/common_atb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul>
<li id="nav_logo"><a href="">
<span class="logo">
<span class="logo_name">carlo-z</span> <span class="logo_rear">.com</span>
</span>
</a></li>
<li><a href="">Android</a></li>
<li><a href="">Linux</a></li>
<li><a href="">Web</a></li>
<li><a href="">Cloud</a></li>
<li><a href="">Android</a></li>
<li><a href="">Linux</a></li>
<li><a href="">Web</a></li>
<li><a href="">Cloud Computing</a></li>
<li id="nav_classification" class="csshide"><a href="">Classification</a></li>
</ul>
<a id="admin" href="">Admin</a>
</div>
</body>
</html>
