html and css js 制作汉堡切换分页平面导航条兼容手机端显示cid1114

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  7. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. body {
  13. background-image: url(https://code.5g-o.com/wp-content/uploads/2020/11/shadow-bottom.png);
  14. min-height: 100vh;
  15. background: #8404fa;
  16. font-family: 'Roboto Condensed', sans-serif;
  17. color: white;
  18. line-height: 1.5;
  19. -webkit-font-smoothing: antialiased;
  20. overflow: hidden;
  21. background-image:url(https://code.5g-o.com/wp-content/uploads/2020/10/67.jpeg);
  22. background-size: cover;
  23. }
  24. .header {
  25. position: fixed;
  26. z-index: 5;
  27. width: 100%;
  28. }
  29. .burger {
  30. position: absolute;
  31. z-index: 10;
  32. right: 25px;
  33. top: 25px;
  34. cursor: pointer;
  35. transform: rotateY(0);
  36. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  37. }
  38. .burger__patty {
  39. width: 28px;
  40. height: 2px;
  41. margin: 0 0 4px 0;
  42. background: white;
  43. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  44. }
  45. .burger__patty:last-child {
  46. margin-bottom: 0;
  47. }
  48. .burger--close {
  49. transform: rotate(180deg);
  50. }
  51. .burger--close .burger__patty:nth-child(1) {
  52. transform: rotate(45deg) translate(4px, 4px);
  53. }
  54. .burger--close .burger__patty:nth-child(2) {
  55. opacity: 0;
  56. }
  57. .burger--close .burger__patty:nth-child(3) {
  58. transform: rotate(-45deg) translate(5px, -4px);
  59. }
  60. .menu {
  61. position: fixed;
  62. top: 0;
  63. width: 100%;
  64. visibility: hidden;
  65. }
  66. .menu--active {
  67. visibility: visible;
  68. }
  69. .menu__brand, .menu__list {
  70. display: flex;
  71. flex-flow: column wrap;
  72. align-items: center;
  73. justify-content: center;
  74. float: left;
  75. width: 50%;
  76. height: 100vh;
  77. overflow: hidden;
  78. }
  79. .menu__list {
  80. margin: 0;
  81. padding: 0;
  82. background: #158cdf;
  83. list-style-type: none;
  84. transform: translate3d(0, -100%, 0);
  85. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  86. }
  87. .menu__list--active {
  88. transform: translate3d(0, 0, 0);
  89. }
  90. .menu__brand {
  91. background: #fff;
  92. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  93. transform: translate3d(0, 100%, 0);
  94. }
  95. .menu__brand--active {
  96. transform: translate3d(0, 0, 0);
  97. }
  98. .menu__item {
  99. transform: translate3d(500px, 0, 0);
  100. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  101. }
  102. .menu__item--active {
  103. transform: translate3d(0, 0, 0);
  104. }
  105. .menu__link {
  106. display: inline-block;
  107. position: relative;
  108. font-size: 30px;
  109. padding: 15px 0;
  110. font-weight: 300;
  111. color: white;
  112. text-decoration: none;
  113. color: white;
  114. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  115. }
  116. .menu__link:before {
  117. content: "";
  118. position: absolute;
  119. bottom: 0;
  120. left: 50%;
  121. width: 10px;
  122. height: 2px;
  123. background: white;
  124. transform: translateX(-50%);
  125. transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  126. }
  127. .menu__link:hover:before {
  128. width: 100%;
  129. }
  130. .menu .menu__item:nth-child(1) {
  131. transition-delay: 0.1s;
  132. }
  133. .menu .menu__item:nth-child(2) {
  134. transition-delay: 0.2s;
  135. }
  136. .menu .menu__item:nth-child(3) {
  137. transition-delay: 0.3s;
  138. }
  139. .menu .menu__item:nth-child(4) {
  140. transition-delay: 0.4s;
  141. }
  142. .menu .menu__item:nth-child(5) {
  143. transition-delay: 0.5s;
  144. }
  145. .menu .menu__item:nth-child(6) {
  146. transition-delay: 0.6s;
  147. }
  148. @media screen and (max-width: 768px) {
  149. ul.menu__list, div.menu__brand {
  150. float: none;
  151. width: 100%;
  152. min-height: 0;
  153. }
  154. ul.menu__list--active, div.menu__brand--active {
  155. transform: translate3d(0, 0, 0);
  156. }
  157. .menu__list {
  158. height: 75vh;
  159. transform: translate3d(-100%, 0, 0);
  160. }
  161. .menu__link {
  162. font-size: 24px;
  163. }
  164. .menu__brand {
  165. height: 25vh;
  166. transform: translate3d(100%, 0, 0);
  167. }
  168. .menu__brand .logo {
  169. width: 90px;
  170. height: 90px;
  171. }
  172. }
  173. .logo {
  174. width: 200px;
  175. height: 200px;
  176. background-image: url(owu.png);
  177. background-size: cover;
  178. border-radius: 50%;
  179. }
  180. h1, h2, h3, p {
  181. margin: 0;
  182. font-weight: 400;
  183. }
  184. main {
  185. height: 100vh;
  186. display: flex;
  187. flex-flow: column wrap;
  188. justify-content: center;
  189. padding: 8vw;
  190. }
  191. main h1 > a {
  192. color: white;
  193. text-decoration: none;
  194. font-size: 48px;
  195. font-weight: 300;
  196. }
  197. .support {
  198. position: fixed;
  199. bottom: 24px;
  200. color: rgba(0, 0, 0, 0.6);
  201. }
  202. </style>
  203. </head>
  204. <body>
  205. <header class="header">
  206. <div class="burger">
  207. <div class="burger__patty"></div>
  208. <div class="burger__patty"></div>
  209. <div class="burger__patty"></div>
  210. </div>
  211. <nav class="menu">
  212. <div class="menu__brand">
  213. <a href=""><div class="logo"></div></a>
  214. </div>
  215. <ul class="menu__list">
  216. <li class="menu__item"><a href="" class="menu__link">HOME</a></li>
  217. <li class="menu__item"><a href="" class="menu__link">ABOUT</a></li>
  218. <li class="menu__item"><a href="" class="menu__link">GALLERY</a></li>
  219. <li class="menu__item"><a href="" class="menu__link">CONTACT</a></li>
  220. <li class="menu__item"><a href="" class="menu__link">LOCATIONS</a></li>
  221. <li class="menu__item"><a href="" class="menu__link">TESTIMONIALS</a></li>
  222. </ul>
  223. </nav>
  224. </header>
  225. <main>
  226. <h1><a href="http://ettrics.com" target="_blank">NAVBAR</a></h1>
  227. <h2>WITH CREATIVE SPLIT SCREEN USING HTML AND CSS 3</h2>
  228. </main>
  229. <script>
  230. (function() {
  231. var Menu = (function() {
  232. var burger = document.querySelector('.burger');
  233. var menu = document.querySelector('.menu');
  234. var menuList = document.querySelector('.menu__list');
  235. var brand = document.querySelector('.menu__brand');
  236. var menuItems = document.querySelectorAll('.menu__item');
  237. var active = false;
  238. var toggleMenu = function() {
  239. if (!active) {
  240. menu.classList.add('menu--active');
  241. menuList.classList.add('menu__list--active');
  242. brand.classList.add('menu__brand--active');
  243. burger.classList.add('burger--close');
  244. for (var i = 0, ii = menuItems.length; i < ii; i++) {
  245. menuItems[i].classList.add('menu__item--active');
  246. }
  247. active = true;
  248. } else {
  249. menu.classList.remove('menu--active');
  250. menuList.classList.remove('menu__list--active');
  251. brand.classList.remove('menu__brand--active');
  252. burger.classList.remove('burger--close');
  253. for (var i = 0, ii = menuItems.length; i < ii; i++) {
  254. menuItems[i].classList.remove('menu__item--active');
  255. }
  256. active = false;
  257. }
  258. };
  259. var bindActions = function() {
  260. burger.addEventListener('click', toggleMenu, false);
  261. };
  262. var init = function() {
  263. bindActions();
  264. };
  265. return {
  266. init: init
  267. };
  268. }());
  269. Menu.init();
  270. }());
  271. </script>
  272. </body>
  273. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <style>
    
    
     * {
  box-sizing: border-box;
}
body {
  background-image: url(https://code.5g-o.com/wp-content/uploads/2020/11/shadow-bottom.png);
  min-height: 100vh;
  background: #8404fa;
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
   overflow: hidden;
            background-image:url(https://code.5g-o.com/wp-content/uploads/2020/10/67.jpeg);
            background-size: cover;
}
.header {
  position: fixed;
  z-index: 5;
  width: 100%;
}
.burger {
  position: absolute;
  z-index: 10;
  right: 25px;
  top: 25px;
  cursor: pointer;
  transform: rotateY(0);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty {
  width: 28px;
  height: 2px;
  margin: 0 0 4px 0;
  background: white;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty:last-child {
  margin-bottom: 0;
}
.burger--close {
  transform: rotate(180deg);
}
.burger--close .burger__patty:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.burger--close .burger__patty:nth-child(2) {
  opacity: 0;
}
.burger--close .burger__patty:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -4px);
}
.menu {
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
}
.menu--active {
  visibility: visible;
}
.menu__brand, .menu__list {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: left;
  width: 50%;
  height: 100vh;
  overflow: hidden;
    
}
.menu__list {
  margin: 0;
  padding: 0;
  background: #158cdf;
  list-style-type: none;
  transform: translate3d(0, -100%, 0);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__list--active {
  transform: translate3d(0, 0, 0);
}
.menu__brand {
  background: #fff;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translate3d(0, 100%, 0);
}
.menu__brand--active {
  transform: translate3d(0, 0, 0);
}
.menu__item {
  transform: translate3d(500px, 0, 0);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__item--active {
  transform: translate3d(0, 0, 0);
}
.menu__link {
  display: inline-block;
  position: relative;
  font-size: 30px;
  padding: 15px 0;
  font-weight: 300;
  color: white;
  text-decoration: none;
  color: white;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__link:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 2px;
  background: white;
  transform: translateX(-50%);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__link:hover:before {
  width: 100%;
}
.menu .menu__item:nth-child(1) {
  transition-delay: 0.1s;
}
.menu .menu__item:nth-child(2) {
  transition-delay: 0.2s;
}
.menu .menu__item:nth-child(3) {
  transition-delay: 0.3s;
}
.menu .menu__item:nth-child(4) {
  transition-delay: 0.4s;
}
.menu .menu__item:nth-child(5) {
  transition-delay: 0.5s;
}
.menu .menu__item:nth-child(6) {
  transition-delay: 0.6s;
}
@media screen and (max-width: 768px) {
  ul.menu__list, div.menu__brand {
    float: none;
    width: 100%;
    min-height: 0;
  }
  ul.menu__list--active, div.menu__brand--active {
    transform: translate3d(0, 0, 0);
  }
  .menu__list {
    height: 75vh;
    transform: translate3d(-100%, 0, 0);
  }
  .menu__link {
    font-size: 24px;
  }
  .menu__brand {
    height: 25vh;
    transform: translate3d(100%, 0, 0);
       
  }
  .menu__brand .logo {
    width: 90px;
    height: 90px;
  }
}
.logo {
  width: 200px;
  height: 200px;
  background-image: url(owu.png);
    background-size: cover;
  border-radius: 50%;
}
h1, h2, h3, p {
  margin: 0;
  font-weight: 400;
}
main {
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  padding: 8vw;
}
main h1 > a {
  color: white;
  text-decoration: none;
  font-size: 48px;
  font-weight: 300;
}
.support {
  position: fixed;
  bottom: 24px;
  color: rgba(0, 0, 0, 0.6);
}

    </style>
</head>
<body>
    <header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">HOME</a></li>
      <li class="menu__item"><a href="" class="menu__link">ABOUT</a></li>
      <li class="menu__item"><a href="" class="menu__link">GALLERY</a></li>
      <li class="menu__item"><a href="" class="menu__link">CONTACT</a></li>
      <li class="menu__item"><a href="" class="menu__link">LOCATIONS</a></li>
      <li class="menu__item"><a href="" class="menu__link">TESTIMONIALS</a></li>
      
       
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">NAVBAR</a></h1>
  <h2>WITH CREATIVE SPLIT SCREEN USING HTML AND CSS 3</h2>
  
</main>
<script>
    (function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());
    
    
</script>
</body>
</html>

在线演示


让链接同时具备两种打开方式
获取源码: Nya
下载数:82人次, 文件大小: 136.2 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,428 人查阅

类似文章