1 Star 0 Fork 1

Alex/geek-navigation

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 24.79 KB
一键复制 编辑 原始数据 按行查看 历史
geekape 提交于 2018-04-12 21:24 . css3手机菜单动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>猿梦极客导航-很有范的导航站</title>
<link rel="shortcut icon" href="favcion.ico" />
<link rel="stylesheet" href=" css/iconfont.css">
<link rel="stylesheet" href="../plug-in/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" id="container">
<aside class="left-bar" id="leftBar">
<div class="title">
<p>猿梦极客导航</p>
</div>
<nav class="nav">
<div class="item active"><a href=""><i class="iconfont icon-daohang2"></i>极客导航</a><i class="line"></i></div>
<ul class="nav-item" id="navItem">
<li><a href="#bbs" class="active"><i class="iconfont icon-shequ"></i>开发社区</a></li>
<li><a href="#sill"><i class="iconfont icon-blogger"></i>技术博客</a></li>
<li><a href="#docs"><i class="iconfont icon-wendangdocument78"></i>开发文档</a></li>
<li><a href="#tools"><i class="iconfont icon-tool"></i>实用工具</a></li>
<li><a href="#design"><i class="iconfont icon-designer"></i>设计资源</a></li>
<li><a href="#study"><i class="iconfont icon-xuexi1"></i>学无止境</a></li>
<li><a href="#operation"><i class="iconfont icon-yunying"></i>网络运营</a></li>
<li class="download"><a href=""><i class="iconfont icon-github"></i>源码下载</a></li>
</ul>
<div class="item comment"><a target="_blank" href="http://www.zcbboke.com/liuyan.html"><i class="iconfont icon-liuyan"></i>留言</a></div>
</nav>
</aside>
<section class="main">
<div id="mainContent">
<!-- 手机端菜单 -->
<div id="menu-box">
<div id="menu">
<input type="checkbox" id="menu-form">
<label for="menu-form" class="menu-spin">
<div class="line diagonal line-1"></div>
<div class="line horizontal"></div>
<div class="line diagonal line-2"></div>
</label>
</div>
</div>
<!-- 开发社区 -->
<div class="box">
<a href="#" name="bbs"></a>
<div class="sub-category">
<div><i class="iconfont icon-shequ"></i>开发社区</div>
</div>
<div>
<a target="_blank" href="http://blog.csdn.net/">
<div class="item">
<div class="logo"><img src="img/csdn.ico" alt="CNDS"> CNDS</div>
<div class="desc">中国最大的IT社区和服务平台</div>
</div>
</a>
<a href="https://juejin.im/">
<div class="item">
<div class="logo"><img src="img/gold-favicon.png" alt="掘金"> 掘金</div>
<div class="desc">只有高手分享的中文技术社区</div>
</div>
</a>
<a target="_blank" href="https://github.com/">
<div class="item">
<div class="logo"><img src="img/github.ico" alt="github"> github</div>
<div class="desc">面向开源及私有软件项目的git托管平台</div>
</div>
</a>
<a target="_blank" href="http://stackoverflow.com/">
<div class="item">
<div class="logo"><img src="img/stackoverflow.ico" alt="stackoverflow"> stackoverflow</div>
<div class="desc">国外编程相关的IT技术问答网站</div>
</div>
</a>
<a target="_blank" href="https://segmentfault.com/">
<div class="item">
<div class="logo"><img src="img/segmentfault.ico" alt="segmentfault"> segmentfault</div>
<div class="desc">一个专注于解决编程问题,提高开发技能的社区。</div>
</div>
</a>
<a target="_blank" href="https://www.zhihu.com/">
<div class="item">
<div class="logo"><img src="img/zhihu.ico" alt="知乎"> 知乎</div>
<div class="desc">与世界分享你的知识、经验和见解与世界分享你的知识、经验和见解</div>
</div>
</a>
<a target="_blank" href="https://www.cnblogs.com/">
<div class="item">
<div class="logo"><img src="img/cnblogs.ico" alt="博客园"> 博客园</div>
<div class="desc">博客模式的技术分享社区</div>
</div>
</a>
<a target="_blank" href="https://www.oschina.net/">
<div class="item">
<div class="logo"><img src="img/oschina.ico" alt="开源中国"> 开源中国</div>
<div class="desc">
<div class="info">
目前中国最大的开源技术社区
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.v2ex.com/">
<div class="item">
<div class="logo"><img src="img/v2ex.png" alt="V2EX"> V2EX</div>
<div class="desc">一个关于分享和探索的地方。</div>
</div>
</a>
<a target="_blank" href="https://coding.net/">
<div class="item">
<div class="logo"><img src="img/coding.png" alt=" Coding"> Coding</div>
<div class="desc">中国最大的git平台。</div>
</div>
</a>
</div>
</div>
<!-- 技术博客 -->
<div class="box">
<a href="#" name="sill"></a>
<div class="sub-category">
<div><i class="iconfont icon-blogger"></i>技术博客</div>
</div>
<div>
<a target="_blank" href="http://www.alloyteam.com/">
<div class="item">
<div class="logo"><img src="img/alloyteam-favicon.jpg" alt="腾讯 AlloyTeam 团队"> 腾讯 AlloyTeam 团队</div>
<div class="desc">腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究</div>
</div>
</a>
<a target="_blank" href="https://isux.tencent.com/">
<div class="item">
<div class="logo"><img src="img/isux-favicon.jpg" alt="ISUX"> ISUX</div>
<div class="desc">腾讯社交用户体验设计,简称ISUX,腾讯设计团队网站</div>
</div>
</a>
<a target="_blank" href="http://fex.baidu.com/">
<div class="item">
<div class="logo">
<img src="img/fex-favicon.png"> FEX
</div>
<div class="desc">
百度Web前端研发部出品
</div>
</div>
</a>
<a target="_blank" href="http://taobaofed.org/">
<div class="item">
<div class="logo">
<img src="img/fed-favicon.png"> 淘宝前端团队(FED)
</div>
<div class="desc">
用技术为体验提供无限可能
</div>
</div>
</a>
<a target="_blank" href="https://aotu.io/">
<div class="item">
<div class="logo">
<img src="img/aotu-favicon.png"> 凹凸实验室
</div>
<div class="desc">
京东用户体验设计部出品
</div>
</div>
</a>
<a target="_blank" href="https://75team.com/">
<div class="item">
<div class="logo">
<img src="img/75team-favicon.png"> 奇舞团
</div>
<div class="desc">
奇虎360旗下前端开发团队出品
</div>
</div>
</a>
<a target="_blank" href="http://efe.baidu.com/">
<div class="item">
<div class="logo">
<img src="img/efe-favicon.png"> EFE
</div>
<div class="desc">
由百度多个遵循统一技术体系的前端团队所组成
</div>
</div>
</a>
</div>
</div>
<!-- 参考文档 -->
<div class="box">
<a href="" name="docs"></a>
<div class="sub-category">
<div><i class="iconfont icon-wendangdocument78"></i>参考文档</div>
</div>
<div>
<a target="_blank" href="http://jquery.cuishifeng.cn/index.html">
<div class="item">
<div class="logo"><img src="img/jquery.png" alt="jQuery"> jQuery</div>
<div class="desc">优秀的JavaScript代码库</div>
</div>
</a>
<a target="_blank" href="http://v3.bootcss.com/">
<div class="item">
<div class="logo"><img src="img/bootstrap-favicon.png" alt="Bootstrap"> Bootstrap</div>
<div class="desc">基于HTML/CSS/Javscript的前端框架</div>
</div>
</a>
<a target="_blank" href="http://v3.bootcss.com/">
<div class="item">
<div class="logo"><img src="img/vue-favicon.png" alt="Vue.js"> Vue.js</div>
<div class="desc">构建数据驱动的web界面的渐进式框架</div>
</div>
</a>
</div>
</div>
<!-- 实用工具 -->
<div class="box">
<a href="" name="tools"></a>
<div class="sub-category">
<div><i class="iconfont icon-tool"></i>实用工具</div>
</div>
<div>
<a target="_blank" href="http://www.ibootstrap.cn/">
<div class="item">
<div class="no-logo">bootstrap可视化布局</div>
</div>
</a>
<a target="_blank" href="http://www.peise.net/tools/web/">
<div class="item">
<div class="no-logo">网页配色工具</div>
</div>
</a>
<a target="_blank" href="http://www.uupoop.com/">
<div class="item">
<div class="no-logo">在线PS</div>
</div>
</a>
<a target="_blank" href="https://dummyimage.com/">
<div class="item">
<div class="no-logo">动态图像生成器</div>
</div>
</a>
<a target="_blank" href="http://xiuxiu.web.meitu.com/main.html">
<div class="item">
<div class="no-logo">美图秀秀在线图片处理</div>
</div>
</a>
<a target="_blank" href="https://cli.im/deqr">
<div class="item">
<div class="no-logo">二维码在线生成</div>
</div>
</a>
<a target="_blank" href="https://www.zybuluo.com/mdeditor">
<div class="item">
<div class="no-logo">Markdown在线编辑器</div>
</div>
</a>
<a target="_blank" href="http://dwz.wailian.work/">
<div class="item">
<div class="no-logo">短网址生成</div>
</div>
</a>
</div>
</div>
<!-- 设计资源 -->
<div class="box">
<a href="" name="design"></a>
<div class="sub-category">
<div><i class="iconfont icon-wendangdocument78"></i>设计资源</div>
</div>
<div>
<a target="_blank" href="http://www.uigreat.com/">
<div class="item">
<div class="logo">
<img src="img/uigreat-favicon.jpg"> UIGREAT
</div>
<div class="desc">
优秀设计师的贴心伴侣。
</div>
</div>
</a>
<a target="_blank" href="http://huaban.com/">
<div class="item">
<div class="logo">
<img src="img/huaban-favicon.png"> 花瓣
</div>
<div class="desc">
花瓣,陪你做生活的设计师。
</div>
</div>
</a>
<a target="_blank" href="https://dribbble.com/">
<div class="item">
<div class="logo">
<img src="img/dribbble-favicon.png"> Dribbble
</div>
<div class="desc">
设计作品的交流平台
</div>
</div>
</a>
<a target="_blank" href="https://www.behance.net/">
<div class="item">
<div class="logo">
<img src="img/behance-favicon.png"> Behance
</div>
<div class="desc">
系列设计作品开放平台
</div>
</div>
</a>
<a target="_blank" href="https://www.pinterest.com/">
<div class="item">
<div class="logo">
<img src="img/pinterest-favicon.png"> Pinterest
</div>
<div class="desc">
图片分享类的社交网站
</div>
</div>
</a>
<a target="_blank" href="http://www.zcool.com.cn/">
<div class="item">
<div class="logo">
<img src="img/zcool-favicon.jpg"> 站酷
</div>
<div class="desc">
打开站酷,发现更好的设计!
</div>
</div>
</a>
<a target="_blank" href="https://thefwa.com/">
<div class="item">
<div class="logo">
<img src="img/thefwa-favicon.png"> FWA
</div>
<div class="desc">
互动多媒体网站收录平台
</div>
</div>
</a>
</div>
</div>
<!-- 学无止境 -->
<div class="box">
<a href="#" name="study"></a>
<div class="sub-category">
<div><i class="iconfont icon-xuexi1"></i>学无止境</div>
</div>
<div>
<a target="_blank" href="https://www.w3cschool.cn/">
<div class="item">
<div class="no-logo">w3cschool</div>
<div class="desc">学编程,从W3cschool开始</div>
</div>
</a>
<a target="_blank" href="https://www.imooc.com/">
<div class="item">
<div class="no-logo">慕课网</div>
<div class="desc">程序员的梦工厂</div>
</div>
</a>
<a target="_blank" href="http://study.163.com/">
<div class="item">
<div class="no-logo">网易云课堂</div>
<div class="desc">网易公司研发的一款大型在线教育平台服务</div>
</div>
</a>
</div>
</div>
<!-- 网络运营 -->
<div class="box">
<a href="" name="operation"></a>
<div class="sub-category">
<div><i class="iconfont icon-yunying"></i>网络运营</div>
</div>
<div>
<a target="_blank" href="https://mp.weixin.qq.com/">
<div class="item">
<div class="no-logo">微信公众平台</div>
</div>
</a>
<a target="_blank" href="https://www.toutiao.com/">
<div class="item">
<div class="no-logo">今日头条号</div>
</div>
</a>
<a target="_blank" href="https://www.jianshu.com/">
<div class="item">
<div class="no-logo">简书</div>
</div>
</a>
<a target="_blank" href="https://mp.dayu.com/">
<div class="item">
<div class="no-logo">UC大鱼号</div>
</div>
</a>
<a target="_blank" href="http://baijiahao.baidu.com/builder/author/register/index">
<div class="item">
<div class="no-logo">百度百家号</div>
</div>
</a>
<a target="_blank" href="https://www.weibo.com/login.php">
<div class="item">
<div class="no-logo">新浪微博</div>
</div>
</a>
<a target="_blank" href="https://om.qq.com/userAuth/index">
<div class="item">
<div class="no-logo">腾讯企鹅号</div>
</div>
</a>
<a target="_blank" href="https://www.douban.com/">
<div class="item">
<div class="no-logo">豆瓣</div>
</div>
</a>
</div>
</div>
<footer class="footer">
<div class="copyright">
<div>
Copyright © 2018- 2050
<a href="http://www.zcbboke.com">极客猿梦导航 钟储兵博客</a>
</div>
</div>
</footer>
<div id="fixedBar"><svg class="Zi Zi--BackToTop" title="回到顶部" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M16.036 19.59a1 1 0 0 1-.997.995H9.032a.996.996 0 0 1-.997-.996v-7.005H5.03c-1.1 0-1.36-.633-.578-1.416L11.33 4.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.005z"></path></svg></div>
</section>
<script src="js/jquery.js"></script>
<script>
var oMenu = document.getElementById('menu');
var oLeftBar = document.getElementById('leftBar');
var menuFrom = document.getElementById('menu-form');
oMenu.onclick = function() {
if (oLeftBar.offsetLeft == 0) {
oLeftBar.style.left = -249 + 'px';
}
else {
oLeftBar.style.left = 0;
}
}
// 监听页面宽度变化
window.onresize = function() {
judgeWidth();
// console.log(document.documentElement.clientWidth);
};
// 判断页面宽度
function judgeWidth() {
if (document.documentElement.clientWidth > 481) {
oLeftBar.style.left = 0;
} else {
oLeftBar.style.left = -249 + 'px';
}
}
var oNavItem = document.getElementById('navItem');
var aA = oNavItem.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
for (var j = 0; j < aA.length; j++) {
aA[j].className = '';
}
this.className = 'active';
if (oLeftBar.offsetLeft == 0) {
if (document.documentElement.clientWidth <= 481) {
oLeftBar.style.left = -249 + 'px';
menuFrom.checked = false;
}
}
}
}
$(window).scroll(function() {
if($(window).scrollTop() >= 200){
$('#fixedBar').fadeIn(300);
}else{
$('#fixedBar').fadeOut(300);
}
});
$('#fixedBar').click(function() {
$('html,body').animate({scrollTop:'0px'},800);
})
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/nidl/geek-navigation.git
git@gitee.com:nidl/geek-navigation.git
nidl
geek-navigation
geek-navigation
master

搜索帮助