1. $(document).ready(function() {
  2.     $(window).resize(function(){
  3.         var need=0;
  4.         var ul_max_width = $(window).width()*0.96-$("#nav #admin").width();
  5.         //alert(need + ', ul_max_width: ' + ul_max_width);
  6.         need=$('#nav ul').width();
  7.         if(ul_max_width<need){
  8.             $("#nav .logo_name").html('CZ');
  9.             $("#nav .logo_rear").html('');
  10.              $('#nav ul nav_classification').removeClass('csshide');
  11.              need=$('#nav ul').width();
  12.              if(ul_max_width<need){
  13.                 var len = $('#nav ul li').length;
  14.                 while(--len>=0){
  15.                     if($(this).attr('id') !='nav_classification'){
  16.                         need -= $('#nav ul li').eq(len).width();
  17.                         alert(need);
  18.                         $('#nav ul li').eq(len).addClass('csshide');
  19.                         if(need<ul_max_width){ break;}
  20.                     }
  21.                 }
  22.              }
  23.         } else {
  24.             $("#nav .logo_name").html('carlo-z');
  25.             $("#nav .logo_rear").html('.com');
  26.         }
  27.     });
  28.  
  29. });
  1. #nav
  2. {
  3.     background: #65666D;
  4.     padding-left: 2%;
  5.     padding-right: 2%;
  6.     margin: 0;
  7.     overflow:hidden;
  8. }
  9. #nav ul
  10. {
  11. }
  12. #nav ul li
  13. {
  14.     float: left;
  15.     height: 40px;
  16. }
  17. #nav a
  18. {
  19.     position: relative;
  20.     display: block;
  21.     outline: 0;
  22.     float: left;
  23.     color: #fff;
  24.     font-size: 16px;
  25.     height: 40px;
  26.     line-height: 40px;
  27.     _line-height: 40px\9;
  28.     overflow: hidden;
  29.     margin: 0 auto;
  30.     z-index: 1000;
  31.     zoom: 1;
  32.     padding: 0 22px 0 23px;
  33.     text-decoration: none;
  34. }
  35. #nav a:visited
  36. {
  37.     color: #fff;
  38. }
  39. #nav a:hover
  40. {
  41.     background: #55575c;
  42.     border-left: 1px solid #4e5155;
  43.     border-right: 1px solid #4e5155;
  44.     padding: 0 22px;
  45.     margin-right: -1px;
  46.     z-index: 1001;
  47. }
  48. #nav #admin
  49. {
  50.     display: inline-block;
  51.     width: auto;
  52.     height: 40px;
  53.     float: right;
  54.     background-color: #4DBE39;
  55. }
  56.  
  57. #nav .logo{padding: 0; margin: 0; border: 0; overflow: hidden;}
  58. #nav .logo_name{font-size: 32px; font-weight: bold; color: #FFFFFF;}
  59. #nav .logo_rear{font-size: 21px; font-weight: bold; color: #4DBE39;}
  60.  
  61. #nav .csshide{display:none;}
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>无标题页</title>
  5.     <link href="../base.css" rel="stylesheet" type="text/css" />
  6.     <link href="moudle_nav.css" rel="stylesheet" type="text/css" />
  7.  
  8.     <script src="../jquery-2.1.3.min.js" type="text/javascript"></script>
  9.     <script src="moudle_nav.js" type="text/javascript"></script>
  10.     <link href="../atb_mystyle/common_atb.css" rel="stylesheet" type="text/css" />
  11. </head>
  12. <body>
  13.     <div id="nav">
  14.         <ul>
  15.             <li id="nav_logo"><a href="">
  16.                 <span class="logo">
  17.                     <span class="logo_name">carlo-z</span> <span class="logo_rear">.com</span>
  18.                 </span>
  19.             </a></li>
  20.             <li><a href="">Android</a></li>
  21.             <li><a href="">Linux</a></li>
  22.             <li><a href="">Web</a></li>
  23.             <li><a href="">Cloud</a></li>
  24.             <li><a href="">Android</a></li>
  25.             <li><a href="">Linux</a></li>
  26.             <li><a href="">Web</a></li>
  27.             <li><a href="">Cloud Computing</a></li>
  28.             <li id="nav_classification" class="csshide"><a href="">Classification</a></li>
  29.         </ul>
  30.         <a id="admin" href="">Admin</a>
  31.     </div>
  32. </body>
  33. </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. BZOJ 3262 陌上花开 CDQ分治

    = =原来复杂度还是nlog^2(n) Orz 被喷了 #include<cstdio> #include<cstdlib> #include<algorithm> ...

  2. oracle恢复被覆盖的存储过程

    假设你不小心覆盖了之前的存储过程,那得赶紧闪回,时长越长闪回的可能性越小.原理非常easy,存储过程的定义就是数据字典,改动数据字典跟改动普通表的数据没有差别,此时会把改动前的内容放到undo中,我们 ...

  3. 使用gulp在开发过程中合理导出zip文件

    最近一段时间一直在做桌面混合应用,跟以往做web端不同的是,无法再通过在浏览器上输入内部的域名来随时跟踪开发版本的状况了,只能通过打包代码让产品或领导随时跟踪进度. 这里就涉及到一些问题了: 1,需要 ...

  4. Redhat 官方Performance_Tuning_Guide

    https://access.redhat.com/documentation/zh-CN/Red_Hat_Enterprise_Linux/6/html/Performance_Tuning_Gui ...

  5. 再回首，Java温故知新（九）：Java基础之流程控制语句

    流程控制语句分为条件语句.循环语句和中断语句. 中断语句包括break和continue,两者的区别在于break会跳出整个循环,而continue则是跳出此次循环,之后还会继续下一次循环. 条件语句 ...

  6. (转载)Java 1.7的新特性

    网上找了一下,整理了贴出来. 下面是Java 1.7 里新出现的功能的一些用法例子: 对集合的支持 摒弃了 Java 集合接口的实现类,如: ArrayList . HashSet 和 HashMap ...

  7. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  8. hdu 3450 Counting Sequences

    /* n*n暴力 这个很好想 */ #include<cstdio> #define maxn 100010 #define mod 9901 using namespace std; i ...

  9. U3D 脚本添加和获得对象

    有时候,一开始可能没有对象,而是由于某种触发,产生的一个对象,这里讲解下,如何通过脚本来创建一个对象: 这是通过脚本创建一个立方体: using UnityEngine; using System.C ...

  10. jquery-动态设置ul li a链接目标

    概述: 先上我的布局图: ul中的每一个li里面包含着一个'a'超链接,可以猜想到,我想没点击ul->li里面每个a,链接到不同的页面,在这里,我用iframe完成. html主要代码为: &l ...