Skip to content

G
Git2

茶陵後 / Git2
与 Fork 源项目一致

Fork自 gitcode_dev / 开源百科

通知 2
Star 0
Fork 0
G
Git2

体验新版 GitCode，发现更多精彩内容 >>

提交 11fadd63 编写于 作者: X XieJiaHe
浏览文件
操作

新增导航

上级 2633f882
隐藏空白更改
内联 并排
Showing with 55 addition and 9 deletion
README.md
浏览文件 @ 11fadd63
......@@ -47,7 +47,7 @@ link: 'https://github.com/xjh22222228/nav'
感谢为发现导航贡献过的每一个人！ [我要贡献](https://github.com/xjh22222228/nav/issues)
<a href="https://github.com/YutHelloWorld" target="_blank">
<a href="https://github.com/YutHelloWorld">
<img src="https://avatars1.githubusercontent.com/u/20860159?s=460&v=4" width="30px" height="30px" />
</a>
......@@ -59,7 +59,7 @@ link: 'https://github.com/xjh22222228/nav'
👍👍👍
### License
## License
[The MIT License](https://opensource.org/licenses/MIT)
css/style.css
浏览文件 @ 11fadd63
/*!
@author xiejiahe;
@link https://github.com/xjh22222228
*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:15px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 20px 10px 30px;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px}.container .main-nav{margin:20px 0 0 0}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;margin:0 30px 30px 0;width:200px;padding:15px;border:1px solid #eee;cursor:pointer;border-radius:5px;overflow:hidden;transform-origin:right bottom;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;top:-1000px;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:5px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 30px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover .mark{top:0}.footer a:hover{text-decoration:underline}}
*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:15px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 20px 10px 30px;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px}.container .main-nav{margin:20px 0 0 0}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;margin:0 30px 30px 0;width:200px;padding:15px;border:1px solid #eee;cursor:pointer;border-radius:5px;overflow:hidden;transform-origin:right bottom;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;top:-1000px;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:5px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 30px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover .mark{top:0}.footer a:hover{text-decoration:underline}}/*! Ripple.js v1.2.1
* The MIT License (MIT)
* Copyright (c) 2014 Jacob Kelley */.has-ripple{position:relative;overflow:hidden;-webkit-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.ripple{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0);background:#fff;opacity:1}.ripple-animate{-webkit-animation:ripple;-o-animation:ripple;animation:ripple}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2);transform:scale(2)}}@keyframes ripple{100%{opacity:0;transform:scale(2)}}
icon/icon-4x024.svg 0 → 100644
浏览文件 @ 11fadd63
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16">
<g
transform="scale(0.06)"
fill="#000">
<path
d="M7 18.848h22v146h87v18H7v-164z"/>
<path
d="M184.597 58.452c-22.5-.3-45 14-52 35.7-10 25-5.4 56.4 14.2 75.5 19 15.8 47.6 17 69 5.8 14.7-7.8 24-23.3 26-39.6 2.6-17 1.3-35.6-7-51-9.8-16.4-29-27-48-26.3l-2.2-.3zm2 17.4c16.5 0 31.3 12.6 34 28.8 5 18.3 2 40.7-13 53.6-14 11.4-36.5 9.8-48-4.3-14-15-14-38-6.8-56 5-13 18.3-22.3 32.3-22h1.8z"/>
<path
d="M7 206.152h236v25H7v-25z"/>
</g>
</svg>
index.html
浏览文件 @ 11fadd63
......@@ -41,8 +41,12 @@
<link rel="icon" href="./favicon.png" type="image/x-icon">
<link rel ="apple-touch-icon" href="./favicon.png">
<link rel="stylesheet" href="./css/style.css">
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://hm.baidu.com/hm.js?15a99cb1c1eea969bcc1da33d0d8763b"></script>
<script>
(function(){try {var b = navigator.appName,v = navigator.appVersion,vp = v.split(";"),t_v = vp[1].replace(/[ ]/g, ""),tvt = t_v.substr(4);if(b == "Microsoft Internet Explorer" && tvt <= 9){alert('当前浏览器存在安全隐患');}}catch(e){}})();
!function(a,b,c){a.ripple=function(d,e){var f=this,g=f.log=function(){f.defaults.debug&&console&&console.log&&console.log.apply(console,arguments)};f.selector=d,f.defaults={debug:!1,on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,rate:function(a){return a},easing:"linear"},f.defaults=a.extend({},f.defaults,e);var h=function(b){var d,e,h=a(this);if(h.addClass("has-ripple"),e=a.extend({},f.defaults,h.data()),e.multi||!e.multi&&0===h.find(".ripple").length){if(d=a("<span></span>").addClass("ripple"),d.appendTo(h),g("Create: Ripple"),!d.height()&&!d.width()){var i=c.max(h.outerWidth(),h.outerHeight());d.css({height:i,width:i}),g("Set: Ripple size")}if(e.rate&&"function"==typeof e.rate){var j=c.round(d.width()/e.duration),k=e.rate(j),l=d.width()/k;e.duration.toFixed(2)!==l.toFixed(2)&&(g("Update: Ripple Duration",{from:e.duration,to:l}),e.duration=l)}var m="auto"==e.color?h.css("color"):e.color,n={animationDuration:e.duration.toString()+"s",animationTimingFunction:e.easing,background:m,opacity:e.opacity};g("Set: Ripple CSS",n),d.css(n)}e.multi||(g("Set: Ripple Element"),d=h.find(".ripple")),g("Destroy: Ripple Animation"),d.removeClass("ripple-animate");var o=b.pageX-h.offset().left-d.width()/2,p=b.pageY-h.offset().top-d.height()/2;e.multi&&(g("Set: Ripple animationend event"),d.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){g("Note: Ripple animation ended"),g("Destroy: Ripple"),a(this).remove()})),g("Set: Ripple location"),g("Set: Ripple animation"),d.css({top:p+"px",left:o+"px"}).addClass("ripple-animate")};a(b).on(f.defaults.on,f.selector,h)}}(jQuery,document,Math);$.ripple.version = "1.2.1";
</script>
</head>
<body>
......@@ -110,9 +114,6 @@
</footer>
</section>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://hm.baidu.com/hm.js?15a99cb1c1eea969bcc1da33d0d8763b"></script>
<script>
document.body.addEventListener('touchstart', function(){});
var app = angular.module('app', []);
......@@ -377,9 +378,19 @@ app.controller('controller', function ($scope) {
},
{
icon: './icon/icon-1x002.svg',
name: 'React中文',
desc: 'react中文论坛',
name: 'React社区',
desc: 'React论坛社区',
link: 'http://react-china.org/',
language: [
'https://discuss.reactjs.org/',
'http://react-china.org/'
]
},
{
icon: './icon/icon-2x016.png',
name: '众成翻译',
desc: '中国最好的技术翻译社区，最懂译者的翻译平台，奇虎360最大前端团队“奇舞团”出品',
link: 'https://zcfy.cc/',
}
]
},
......@@ -582,6 +593,16 @@ app.controller('controller', function ($scope) {
name: 'CODEIF',
desc: '变量命名神器',
link: 'https://unbug.github.io/codelf/',
},
{
icon: './icon/icon-4x024.svg',
name: 'Lodash',
desc: 'Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库',
link: 'https://www.lodashjs.com/',
language: [
'https://lodash.com/',
'https://www.lodashjs.com/'
]
}
]
},
......@@ -710,12 +731,15 @@ app.controller('controller', function ($scope) {
});
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if( scrollTop > 1000 ) {
if( scrollTop > 300 ) {
elTop.fadeIn();
} else {
elTop.fadeOut();
}
});
$.ripple('.ng-binding', {
multi: true
});
});
});
</script>
......
scss/style.scss
浏览文件 @ 11fadd63
......@@ -521,3 +521,9 @@ img {
/*! Ripple.js v1.2.1
* The MIT License (MIT)
* Copyright (c) 2014 Jacob Kelley */
.has-ripple{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ripple{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0);background:#fff;opacity:1}.ripple-animate{-webkit-animation:ripple;-o-animation:ripple;animation:ripple}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2);transform:scale(2)}}@keyframes ripple{100%{opacity:0;transform:scale(2)}}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或