$(document).ready(function() { $(window).resize(function(){ var need=0; var ul_max_width = $(window).width()*0.96-$("#nav #admin").width(); //alert(need + ', ul_max_ ' + 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: 40px9; 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; 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>