页面悬浮导航

├── _config.yml ├── README.md ├── page1 ├── style.css └── index.html └── page2 ├── style.css ├── script.js └── index.html /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #页面特效 2 | 3 | [demo1](http://calamus0427.github.io/page/page1) 4 | 5 | [demo2](http://calamus0427.github.io/page/page2) 6 | -------------------------------------------------------------------------------- /page1/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | *{margin:0px;padding:0px;} 4 | a{text-decoration:none;} 5 | #suspendNav{ 6 | position:relative; 7 | float:left; 8 | height:30px; 9 | text-align:center; 10 | ling-height:30px; 11 | } 12 | #suspendNav div{ 13 | width:250px; 14 | border:#333 1px solid; 15 | height:30px; 16 | line-height:30px; 17 | text-align:center; 18 | float:left; 19 | } 20 | .box{ 21 | width:100%; 22 | height:3000px; 23 | background-color:#dadada; 24 | } 25 | -------------------------------------------------------------------------------- /page2/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | *{margin:0px;padding:0px;} 4 | a{ 5 | text-decoration:none; 6 | color:#F39; 7 | } 8 | 9 | h2{text-align:center;color:#96C;padding:20px;} 10 | #pullDownNav .navigation{ 11 | position:relative; 12 | float:left; 13 | border:#333 1px solid; 14 | width:19%; 15 | height:30px; 16 | text-align:center; 17 | } 18 | .pullDownNav{ 19 | position:relative; 20 | float:left; 21 | top:-1px; 22 | overflow:hidden; 23 | height:80px; 24 | text-align:center; 25 | width:99%; 26 | border:#333 1px solid; 27 | border-top:0px; 28 | display:none; 29 | } 30 | .navigation .nav{ 31 | height:32px; 32 | line-height:30px; 33 | } 34 | -------------------------------------------------------------------------------- /page2/script.js: -------------------------------------------------------------------------------- 1 | // JavaScript Document 2 | window.onload=function(){ 3 | var getTypeElement=function(es,type){ 4 | var esLen=es.length,i=0,eArr=[],esl=null; 5 | for(;i 2 | 3 | 4 | 5 | 页面悬浮导航 6 | 7 | 14 | 15 | 16 | 17 |

18 |

页面悬浮导航

19 |

20 |

21 |

22 |

23 |

24 |

25 |
26 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /page2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 下拉菜单 6 | 7 | 8 | 9 | 10 |

下拉菜单

11 |

12 | 22 | 32 | 42 | 52 | 62 | 63 | 64 | 65 | --------------------------------------------------------------------------------