查看: 1514|回复: 0

[UI界面设计] 前端学习使用必须收藏,带动画的动态下拉导航

[复制链接]
发表于 2021-3-25 15:32:42 | 显示全部楼层 |阅读模式


1.jpg


2.jpg


HTML:


  1. <link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
  2. <link href='style.css' rel='stylesheet' type='text/css'>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4.   
  5. <header class="main_h">

  6.     <div class="row">
  7.         <a class="logo" href="#">P/F</a>

  8.         <div class="mobile-toggle">
  9.             <span></span>
  10.             <span></span>
  11.             <span></span>
  12.         </div>

  13.         <nav>
  14.             <ul>
  15.                 <li><a href=".sec01">Section 01</a></li>
  16.                 <li><a href=".sec02">Section 02</a></li>
  17.                 <li><a href=".sec03">Section 03</a></li>
  18.                 <li><a href=".sec04">Section 04</a></li>
  19.             </ul>
  20.         </nav>

  21.     </div> <!-- / row -->

  22. </header>

  23. <div class="hero">

  24.     <h1><span>I'm a cool</span><br>Navigation</h1>

  25.     <div class="mouse">
  26.         <span></span>
  27.     </div>

  28. </div>

  29. <div class="row content">
  30.     <h1 class="sec01">Section 01</h1>
  31.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
  32.     <h1 class="sec02">Section 02</h1>
  33.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
  34.     <h1 class="sec03">Section 03</h1>
  35.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
  36.     <h1 class="sec04">Section 04</h1>
  37.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
  38. </div>
复制代码


CSS3:


  1. .main_h {
  2.   position: fixed;
  3.   top: 0px;
  4.   max-height: 70px;
  5.   z-index: 999;
  6.   width: 100%;
  7.   padding-top: 17px;
  8.   background: none;
  9.   overflow: hidden;
  10.   -webkit-transition: all 0.3s;
  11.   transition: all 0.3s;
  12.   opacity: 0;
  13.   top: -100px;
  14.   padding-bottom: 6px;
  15.   font-family: "Montserrat", sans-serif;
  16. }
  17. @media only screen and (max-width: 766px) {
  18.   .main_h {
  19.     padding-top: 25px;
  20.   }
  21. }

  22. .open-nav {
  23.   max-height: 400px !important;
  24. }
  25. .open-nav .mobile-toggle {
  26.   transform: rotate(-90deg);
  27.   -webkit-transform: rotate(-90deg);
  28. }

  29. .sticky {
  30.   background-color: rgba(255, 255, 255, 0.93);
  31.   opacity: 1;
  32.   top: 0px;
  33.   border-bottom: 1px solid gainsboro;
  34. }

  35. .logo {
  36.   width: 50px;
  37.   font-size: 25px;
  38.   color: #8f8f8f;
  39.   text-transform: uppercase;
  40.   float: left;
  41.   display: block;
  42.   margin-top: 0;
  43.   line-height: 1;
  44.   margin-bottom: 10px;
  45. }
  46. @media only screen and (max-width: 766px) {
  47.   .logo {
  48.     float: none;
  49.   }
  50. }

  51. nav {
  52.   float: right;
  53.   width: 60%;
  54. }
  55. @media only screen and (max-width: 766px) {
  56.   nav {
  57.     width: 100%;
  58.   }
  59. }
  60. nav ul {
  61.   list-style: none;
  62.   overflow: hidden;
  63.   text-align: right;
  64.   float: right;
  65. }
  66. @media only screen and (max-width: 766px) {
  67.   nav ul {
  68.     padding-top: 10px;
  69.     margin-bottom: 22px;
  70.     float: left;
  71.     text-align: center;
  72.     width: 100%;
  73.   }
  74. }
  75. nav ul li {
  76.   display: inline-block;
  77.   margin-left: 35px;
  78.   line-height: 1.5;
  79. }
  80. @media only screen and (max-width: 766px) {
  81.   nav ul li {
  82.     width: 100%;
  83.     padding: 7px 0;
  84.     margin: 0;
  85.   }
  86. }
  87. nav ul a {
  88.   color: #888888;
  89.   text-transform: uppercase;
  90.   font-size: 12px;
  91. }

  92. .mobile-toggle {
  93.   display: none;
  94.   cursor: pointer;
  95.   font-size: 20px;
  96.   position: absolute;
  97.   right: 22px;
  98.   top: 0;
  99.   width: 30px;
  100.   -webkit-transition: all 200ms ease-in;
  101.   -moz-transition: all 200ms ease-in;
  102.   transition: all 200ms ease-in;
  103. }
  104. @media only screen and (max-width: 766px) {
  105.   .mobile-toggle {
  106.     display: block;
  107.   }
  108. }
  109. .mobile-toggle span {
  110.   width: 30px;
  111.   height: 4px;
  112.   margin-bottom: 6px;
  113.   border-radius: 1000px;
  114.   background: #8f8f8f;
  115.   display: block;
  116. }

  117. .row {
  118.   width: 100%;
  119.   max-width: 940px;
  120.   margin: 0 auto;
  121.   position: relative;
  122.   padding: 0 2%;
  123. }

  124. * {
  125.   box-sizing: border-box;
  126. }

  127. body {
  128.   color: #8f8f8f;
  129.   background: white;
  130.   font-family: "Cardo", serif;
  131.   font-weight: 300;
  132.   -webkit-font-smoothing: antialiased;
  133. }

  134. a {
  135.   text-decoration: none;
  136. }

  137. h1 {
  138.   font-size: 30px;
  139.   line-height: 1.8;
  140.   text-transform: uppercase;
  141.   font-family: "Montserrat", sans-serif;
  142. }

  143. p {
  144.   margin-bottom: 20px;
  145.   font-size: 17px;
  146.   line-height: 2;
  147. }

  148. .content {
  149.   padding: 50px 2% 250px;
  150. }

  151. .hero {
  152.   position: relative;
  153.   background: url(http://www.philippefercha.com/cd/toggle-menu-bg.jpg) no-repeat center center fixed;
  154.   -webkit-background-size: cover;
  155.   -moz-background-size: cover;
  156.   background-size: cover;
  157.   text-align: center;
  158.   color: #fff;
  159.   padding-top: 110px;
  160.   min-height: 500px;
  161.   letter-spacing: 2px;
  162.   font-family: "Montserrat", sans-serif;
  163. }
  164. .hero h1 {
  165.   font-size: 50px;
  166.   line-height: 1.3;
  167. }
  168. .hero h1 span {
  169.   font-size: 25px;
  170.   color: #e8f380;
  171.   border-bottom: 2px solid #e8f380;
  172.   padding-bottom: 12px;
  173.   line-height: 3;
  174. }

  175. .mouse {
  176.   display: block;
  177.   margin: 0 auto;
  178.   width: 26px;
  179.   height: 46px;
  180.   border-radius: 13px;
  181.   border: 2px solid #e8f380;
  182.   position: absolute;
  183.   bottom: 40px;
  184.   position: absolute;
  185.   left: 50%;
  186.   margin-left: -26px;
  187. }
  188. .mouse span {
  189.   display: block;
  190.   margin: 6px auto;
  191.   width: 2px;
  192.   height: 2px;
  193.   border-radius: 4px;
  194.   background: #e8f380;
  195.   border: 1px solid transparent;
  196.   -webkit-animation-duration: 1s;
  197.   animation-duration: 1s;
  198.   -webkit-animation-fill-mode: both;
  199.   animation-fill-mode: both;
  200.   -webkit-animation-iteration-count: infinite;
  201.   animation-iteration-count: infinite;
  202.   -webkit-animation-name: scroll;
  203.   animation-name: scroll;
  204. }

  205. @-webkit-keyframes scroll {
  206.   0% {
  207.     opacity: 1;
  208.     -webkit-transform: translateY(0);
  209.     transform: translateY(0);
  210.   }

  211.   100% {
  212.     opacity: 0;
  213.     -webkit-transform: translateY(20px);
  214.     transform: translateY(20px);
  215.   }
  216. }
  217. @keyframes scroll {
  218.   0% {
  219.     opacity: 1;
  220.     -webkit-transform: translateY(0);
  221.     -ms-transform: translateY(0);
  222.     transform: translateY(0);
  223.   }

  224.   100% {
  225.     opacity: 0;
  226.     -webkit-transform: translateY(20px);
  227.     -ms-transform: translateY(20px);
  228.     transform: translateY(20px);
  229.   }
  230. }
复制代码
js:


  1. // Sticky Header
  2. $(window).scroll(function() {

  3.     if ($(window).scrollTop() > 100) {
  4.         $('.main_h').addClass('sticky');
  5.     } else {
  6.         $('.main_h').removeClass('sticky');
  7.     }
  8. });

  9. // Mobile Navigation
  10. $('.mobile-toggle').click(function() {
  11.     if ($('.main_h').hasClass('open-nav')) {
  12.         $('.main_h').removeClass('open-nav');
  13.     } else {
  14.         $('.main_h').addClass('open-nav');
  15.     }
  16. });

  17. $('.main_h li a').click(function() {
  18.     if ($('.main_h').hasClass('open-nav')) {
  19.         $('.navigation').removeClass('open-nav');
  20.         $('.main_h').removeClass('open-nav');
  21.     }
  22. });

  23. // navigation scroll lijepo radi materem
  24. $('nav a').click(function(event) {
  25.     var id = $(this).attr("href");
  26.     var offset = 70;
  27.     var target = $(id).offset().top - offset;
  28.     $('html, body').animate({
  29.         scrollTop: target
  30.     }, 500);
  31.     event.preventDefault();
  32. });
复制代码




源码下载:


wyshtc2a.zip (278.84 KB, 下载次数: 0, 售价: 3 蚂蚁币)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表