nav

9092 단어 
$(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>

Ionic 경고 상자
반짝반짝 빛나는 플리☆장의 코디 관리 어플리케이션을 만들어 보았다면

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage