$(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>

nav的更多相关文章

  1. trigger() --工作中问题nav样式

    自动执行某元素的某个事件 $("#div").trigger("click");  //让系统自动执行单击事件 适用于nav样式中,下面横线绝对定位于nav.o ...

  2. 设置导航栏nav全透明

    设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...

  3. HTML5 中的Nav元素详解

    什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...

  4. ThinkCMF-首页Nav部分菜单配置详解

    Nav菜单代码放在了 /themes/simplebootx/Public/nav.html 具体代码: <?php $effected_id="main-menu"; $f ...

  5. Bootstrap源码分析之nav、collapse

    导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...

  6. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  7. nav布局 在线演示 DIVCSS5

    <!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...

  8. Yii2 menu navbar nav小部件的使用示例

    menu Menu::widget( [ [ 'label' => $menu['name'], 'url' => [$menu['route']], 'items' => [ [ ...

  9. Bootstarp: sub_menu 自定义改变nav样式

    <style> .nav > li > a { position: relative; display: block; padding: 5px 5px; } </sty ...

  10. 经典的nav导航

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HDU 1520 Anniversary party [树形DP]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 题目大意:给出n个带权点,他们的关系可以构成一棵树,问从中选出若干个不相邻的点可能得到的最大值为 ...

  2. 深入浅出node(4) 异步编程

    一)函数式编程基础 二)异步编程的优势和难点 2.1 优势 2.2 难点 2.2.1 异常处理 2.2.2 函数嵌套过深 2.2.3 阻塞 2.2.4 多线程编程 2.2.5 异步转同步 三)异步编程 ...

  3. linux —— 启动引导程序 lilo 与 grub

    目录:1.启动引导程序概要 2.lilo 的安装与配置 3.grub的安装与配置 4.两种引导程序的切换  5.附:编译内核时的lilo 设置 1.启动引导程序概要 2.lilo 的安装与配置 3.g ...

  4. 软中断与硬中断 & 中断抢占 中断嵌套

    参考了这篇文章:http://blog.csdn.net/zhangskd/article/details/21992933 从本质上来讲,中断是一种电信号,当设备有某种事件发生时,它就会产生中断,通 ...

  5. head first-----decorate design pattern

    浅谈设计模式之------装饰者模式     首先给出装饰者模式的定义吧:              动态的将责任附加到对象上,若是要扩展功能,装饰者提供了比继承更加具有弹性的替代方案.     其中 ...

  6. 在C#中使用InputBox

    以前用VB编程常用InputBox,现在学了C#,竟然找不到它了--后来到网上查到了,现在贡献给大家:1.首先要添加引用Microsoft.VisualBasic2.命名空间 Using Micros ...

  7. 数学之路-分布式计算-disco(4)

    第一个參数iter是一个迭代器,涉及被map函数产生的键和值.它们是reduce实例. 在本例中.单词随机被托付给不同的reduce实例.然后,要单词同样,处理它的reduce也同样.可确保终于合计是 ...

  8. Android 颜色渲染(五) LinearGradient线性渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染 相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...

  9. UML应用：业务内涵的分析抽象&amp;表达

    上一篇,架构设计的UML图形思考 ,简介了图形思考设计.表达设计对于架构师的重要意义,以及简介了使用统一建模语言UML描写叙述类以及类之间的继承关系,这样的描写叙述还停留在写代码,表达的但是说是怎样写 ...

  10. 转载：修改xshell中文乱码的问题（管用）

    执行echo $LANG命令输出的是当前的编码方式,执行locale命令得到系统中所有可用的编码方式.要让Xshell不显示乱码,则要将编码方式改为UTF-8. 在Xshell中[file]-> ...