[代码样式]制作大小可调整的导航菜单

[代码样式]制作大小可调整的导航菜单

简介

最近出现了一些这样的网站,当用户往下滚动时,顶部的导航菜单会变小或消失,往上滚动时,导航菜单又会变大或出现。这样可以腾出更多的区域显示主要内容,同时也不影响导航菜单的操作。甚至可能会因为导航菜单的变大变小、忽隐忽现引起用户的注意,提示他们是否需要点击导航菜单,进而提高用户体验。今天我们就来制作这样的导航菜单。

浏览器兼容

[代码样式]制作大小可调整的导航菜单 [代码样式]制作大小可调整的导航菜单 [代码样式]制作大小可调整的导航菜单 [代码样式]制作大小可调整的导航菜单 [代码样式]制作大小可调整的导航菜单
IE7+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

我们会用到 CSS2 的 display: fiexd 和 CSS3 的 transition 等属性,所以不兼容 IE6,而 IE7 – IE9 无动画效果。

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>

2、HTML

<div class="header large">
    <div class="inner">
        <h1><a href="https://www.dowebok.com/"><img src="https://www.dowebok.com/images/logo.png" alt="logo"></a></h1>
        <ul class="nav">
            <li><a class="cur" href="https://www.dowebok.com/" title="首页">首页</a></li>
            <li><a href="https://www.dowebok.com/code" title="代码">代码</a></li>
            <li><a href="https://www.dowebok.com/material" title="素材">素材</a></li>
            <li><a href="https://www.dowebok.com/template" title="模板">模板</a></li>
        </ul>
    </div>
</div>

默认是 large 样式,当用户往下滚动一段距离时,把 large 换成 small。

3、css

* {
    margin: 0;
    padding: 0;
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #323436;
}
.inner {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    zoom: 1;
}
.header h1 {
    float: left;
}
.header h1 img {
    display: block;
    border: 0;
}
.nav {
    float: right;
    list-style-type: none;
    font-family: "Microsoft Yahei";
}
.nav li {
    float: left;
    margin-left: 5px;
}
.nav a {
    float: left;
    color: #cecece;
    text-decoration: none;
}
.nav a: hover {
    background-color: #555;
}
.large .inner {
    padding: 20px 0;
}
.large h1 img {
    height: 64px;
}
.large .nav {
    padding-top: 10px;
}
.large .nav a {
    height: 44px;
    padding: 0 20px;
    line-height: 44px;
    font-size: 18px;
}
.small .inner {
    padding: 10px 0;
}
.small h1 img {
    height: 34px;
}
.small .nav {
    padding-top: 3px;
}
.small .nav a {
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 14px;
}
.header, .header .inner, .header a, .header img, .header li {
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}

large 和 small 分别是变大和变小的样式,最后还有一个动画过度。

4、JavaScript

$(function(){
    $(window).on('scroll', function(){
        if($(window).scrollTop() > 100){
            $('.header').removeClass('large').addClass('small');
        } else {
            $('.header').removeClass('small').addClass('large');
        }
    });
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]让IE7 IE8支持CSS3 background-size属性

2020-9-10 17:14:57

脚本代码

[代码样式]AutoScroll.js – jQuery页面自动滚动插件

2020-9-10 17:14:59

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索