nav

$(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的更多相关文章

trigger() --工作中问题nav样式
自动执行某元素的某个事件 $("#div").trigger("click"); //让系统自动执行单击事件适用于nav样式中,下面横线绝对定位于nav.o ...
设置导航栏nav全透明
设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...
HTML5 中的Nav元素详解
什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...
ThinkCMF-首页Nav部分菜单配置详解
Nav菜单代码放在了 /themes/simplebootx/Public/nav.html 具体代码: <?php $effected_id="main-menu"; $f ...
Bootstrap源码分析之nav、collapse
导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...
Fixed Responsive Nav – 响应式的单页网站导航插件
Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...
nav布局在线演示 DIVCSS5
<!doctype html> nav布局在线演示 DIVCSS5 传统 div ul li布局导航条效果网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...
Yii2 menu navbar nav小部件的使用示例
menu Menu::widget( [ [ 'label' => $menu['name'], 'url' => [$menu['route']], 'items' => [ [ ...
Bootstarp: sub_menu 自定义改变nav样式
<style> .nav > li > a { position: relative; display: block; padding: 5px 5px; } </sty ...
经典的nav导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

linux —— 编译linux内核
目录: 0.测试环境 1.获得最新内核源代码 2.编译源代码 3.运行新的内核 0.测试环境: 我的系统 : ubuntu 16.04 LTS (内核版本:4.4.0-36-generic ...
Windows 服务卸载之后重新安装提示 “指定的服务已标记为删除”
背景: 将一个项目做成一个windows服务,在调试的时候,需要卸载.安装该服务,但提示下面的错误:“指定的服务已标记为删除”,进入服务管理界面,启动自己注册的服务,无法手动更改成启用模 ...
PPT 学习总结
PPT高效制作流程1.把word导入PPT2.在PPT里实现随机抽奖3.逻辑的调整:给PPT增加小节,来增强PPT的逻辑性4.设计PPT的母板,并可保存为自己的母板供以后使用数据收集中国宏观经济统计 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（33）-数据验证共享
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力一直以来表单的验证都是不可 ...
屏蔽全部统计代码（51.la cnzz 百度统计谷歌分析师adsense、屏蔽淘宝客广告代码）的方法
支持百度统计 .51.la统计.cnzz统计.51yes统计.谷歌分析师.阿里妈妈淘宝客广告.chinaz弹窗.假设有很多其它的须要屏蔽的,欢迎联系 default7#zbphp.com 改动etc的 ...
OCCI处理CHAR类型字符串变量的不同
问题背景: 一个旧应用,原先应用是用proc写的,9i的库,如今应用须要改为使用OCCI,当中有一段查询逻辑:select ... where upper(state)=upper(:1). (此处请 ...
ColorComboBox
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...
[置顶] Codeforces Round #198 (Div. 1)(A,B,C,D)
http://codeforces.com/contest/341 赛后做的虚拟比赛,40分钟出了3题,RP爆发. A计数问题我们可以对每对分析,分别对每对<a, b>(a走到b)进行统 ...
agentzh --春哥--调试专家
https://github.com/agentzh/perl-systemtap-toolkit https://github.com/openresty http://openresty.org/ ...
spring mvc DispatcherServlet详解之三---request通过ModelAndView中获取View实例的过程
整个spring mvc的架构如下图所示: 上篇文件讲解了DispatcherServlet第二步:通过request从Controller获取ModelAndView.现在来讲解第三步:reques ...

nav

nav的更多相关文章

随机推荐

热门专题