>

1. HTML
HTML
  1. <nav id="bt-menu" class="bt-menu">
  2. <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
  3. <ul>
  4. <li><a href="#" class="bt-icon icon-user-outline">About</a></li>
  5. <li><a href="#" class="bt-icon icon-sun">Skills</a></li>
  6. <li><a href="#" class="bt-icon icon-windows">Work</a></li>
  7. <li><a href="#" class="bt-icon icon-speaker">Blog</a></li>
  8. <li><a href="#" class="bt-icon icon-star">Clients</a></li>
  9. <li><a href="#" class="bt-icon icon-bubble">Contact</a></li>
  10. </ul>
  11. </nav>

2. CSS
CSS
  1. *,
  2. *:after,
  3. *::before {
  4. -webkit-box-sizing: border-box;
  5. -moz-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8.  
  9. body {
  10. background: #2980b9;
  11. }
  12.  
  13. .container {
  14. padding: 80px;
  15. text-align: center;
  16. }
  17.  
  18. a.title{ color:#fff; font-size:12px; }
  19.  
  20. .container h1 {color:white; text-align: center;}
  21.  
  22. .bt-menu {
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 0;
  28. border-width: 0px;
  29. border-style: solid;
  30. border-color: #333;
  31. background-color: rgba(0,0,0,0);
  32. -webkit-backface-visibility: hidden;
  33. -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
  34. transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
  35. }
  36.  
  37. .bt-menu.bt-menu-open {
  38. height: 100%;
  39. border-width: 30px 30px 90px 30px;
  40. background-color: rgba(0,0,0,0.3);
  41. -webkit-transition: border-width 0.3s, background-color 0.3s;
  42. transition: border-width 0.3s, background-color 0.3s;
  43. }
  44.  
  45. .bt-overlay {
  46. position: absolute;
  47. width: 100%;
  48. }
  49.  
  50. .bt-menu-open .bt-overlay {
  51. height: 100%;
  52. }
  53.  
  54. .bt-menu-trigger {
  55. position: fixed;
  56. bottom: 22px;
  57. left: 50%;
  58. z-index: 100;
  59. display: block;
  60. margin-left: -25px;
  61. width: 50px;
  62. height: 50px;
  63. cursor: pointer;
  64. }
  65.  
  66. .bt-menu-trigger span {
  67. position: absolute;
  68. top: 50%;
  69. left: 0;
  70. display: block;
  71. width: 100%;
  72. height: 8%;
  73. background-color: #fff;
  74. font-size: 0px;
  75. -webkit-transition: background-color 0.3s;
  76. transition: background-color 0.3s;
  77. -webkit-touch-callout: none;
  78. -webkit-user-select: none;
  79. -khtml-user-select: none;
  80. -moz-user-select: none;
  81. -ms-user-select: none;
  82. user-select: none;
  83. }
  84.  
  85. .bt-menu-open .bt-menu-trigger span {
  86. background-color: #2980b9;
  87. }
  88.  
  89. .bt-menu-trigger span:before,
  90. .bt-menu-trigger span:after {
  91. position: absolute;
  92. left: 0;
  93. width: 100%;
  94. height: 100%;
  95. background: #fff;
  96. content: '';
  97. -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
  98. transition: transform 0.3s, background-color 0.3s;
  99. }
  100.  
  101. .bt-menu-trigger span:before {
  102. -webkit-transform: translateY(-250%);
  103. transform: translateY(-250%);
  104. }
  105.  
  106. .bt-menu-trigger span:after {
  107. -webkit-transform: translateY(250%);
  108. transform: translateY(250%);
  109. }
  110.  
  111. .bt-menu-open .bt-menu-trigger span:before,
  112. .bt-menu-open .bt-menu-trigger span:after {
  113. background-color: #2980b9;
  114. }
  115.  
  116. .bt-menu-open .bt-menu-trigger span:before {
  117. -webkit-transform: translateY(-350%);
  118. transform: translateY(-350%);
  119. }
  120.  
  121. .bt-menu-open .bt-menu-trigger span:after {
  122. -webkit-transform: translateY(350%);
  123. transform: translateY(350%);
  124. }
  125.  
  126. .bt-menu ul {
  127. position: fixed;
  128. bottom: 0px;
  129. left: 0;
  130. margin: 0;
  131. padding: 0;
  132. width: 100%;
  133. list-style: none;
  134. text-align: center;
  135. white-space: nowrap;
  136. height: 0;
  137. -webkit-transition: height 0s 0.3s;
  138. transition: height 0s 0.3s;
  139. }
  140.  
  141. .bt-menu.bt-menu-open ul {
  142. height: 90px;
  143. -webkit-transition: none;
  144. transition: none;
  145. }
  146.  
  147. .bt-menu ul li,
  148. .bt-menu ul li a {
  149. text-align: center;
  150. }
  151.  
  152. .bt-menu ul li {
  153. display: inline-block;
  154. margin: 0 2%;
  155. width: 5%;
  156. height: 90px;
  157. line-height: 90px;
  158. opacity: 0;
  159. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  160. transition: transform 0.3s, opacity 0.3s;
  161. -webkit-transform: translate3d(0,100%,0);
  162. transform: translate3d(0,100%,0);
  163. }
  164.  
  165. .bt-menu ul li:nth-child(3) {
  166. margin-right: 70px;
  167. }
  168.  
  169. .bt-menu ul li:nth-child(4) {
  170. margin-left: 70px;
  171. }
  172.  
  173. .bt-menu.bt-menu-open ul li {
  174. opacity: 1;
  175. -webkit-transform: translate3d(0,0,0);
  176. transform: translate3d(0,0,0);
  177. }
  178.  
  179. .bt-menu.bt-menu-open ul li:first-child,
  180. .bt-menu.bt-menu-open ul li:last-child {
  181. -webkit-transition-delay: 0.15s;
  182. transition-delay: 0.15s;
  183. }
  184.  
  185. .bt-menu.bt-menu-open ul li:nth-child(2),
  186. .bt-menu.bt-menu-open ul li:nth-last-child(2) {
  187. -webkit-transition-delay: 0.1s;
  188. transition-delay: 0.1s;
  189. }
  190.  
  191. .bt-menu.bt-menu-open ul li:nth-child(3),
  192. .bt-menu.bt-menu-open ul li:nth-last-child(3) {
  193. -webkit-transition-delay: 0.05s;
  194. transition-delay: 0.05s;
  195. }
  196.  
  197. .bt-menu ul li a {
  198. display: block;
  199. outline: none;
  200. color: #fff;
  201. text-decoration: none;
  202. text-transform: uppercase;
  203. letter-spacing: 1px;
  204. font-size: 1.15em;
  205. -webkit-transition: color 0.2s;
  206. transition: color 0.2s;
  207. }
  208.  
  209. .bt-menu ul li a:before {
  210. display: none;
  211. font-size: 32px;
  212. }
  213.  
  214. .bt-menu ul li a:hover,
  215. .bt-menu ul li a:focus {
  216. color: #2980b9;
  217. }
  218.  
  219. @media screen and (max-width: 65.1em) {
  220. .bt-menu ul li a {
  221. font-size: 90%;
  222. }
  223. }
  224.  
  225. @media screen and (max-width: 55.5em) {
  226. .bt-menu ul li {
  227. margin: 0 15px;
  228. }
  229.  
  230. .bt-menu ul li a {
  231. font-size: 0px;
  232. }
  233.  
  234. .bt-menu ul li a:before {
  235. display: block;
  236. }
  237. }
  238.  
  239. @media screen and (max-width: 32em) {
  240. .bt-menu-trigger {
  241. width: 40px;
  242. margin-left: -20px;
  243. }
  244.  
  245. .bt-menu ul li {
  246. margin: 0 2%;
  247. }
  248.  
  249. .bt-menu ul li:nth-child(3) {
  250. margin-right: 50px;
  251. }
  252.  
  253. .bt-menu ul li:nth-child(4) {
  254. margin-left: 50px;
  255. }
  256.  
  257. .bt-menu ul li a:before {
  258. font-size: 24px;
  259. }
  260. }

3. JS
HTML
  1. <script src="http://www.isharecode.tk/code/cgi-bin/classie.js"></script>
  2. <script src="http://www.isharecode.tk/code/cgi-bin/borderMenu.js"></script>


- Xem demo tại đây.
- Nguồn: ThuThuatWeb, Bài viết được đăng bởi webmaster.

DMCA.com Protection Status
Cùng Chuyên Mục
Xem thêm
Comment
Tên bạn
Nội dung


Bình luận rỗng.

Close

ảnh cm Contact Facebook
ảnh cm Contact Google+
ảnh cm Blog Trương Minh Đức
Facebook Google+ YouTube
Được tài trợ bởi