API tools faq
paste
Guguita

Problema com menu - CSS

Guguita
Feb 2nd, 2017
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>WEB5 - Desenvolvimento Web e Mobile.</title>
  5. <link rel="stylesheet" type="text/css" href="css/style.css">
  6. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9.  
  10.  
  11.  
  12.  
  13. <header>
  14. <nav class="nav-bar">
  15. <ul>
  16. <li><a href="#">Home</a></li>
  17. <li><a href="#">Nossos Serviços</a></li>
  18. <li><a href="#">Nosso time</a></li>
  19. <li><a href="#">Contato</a></li>
  20. </ul>
  21.  
  22. </nav>
  23.  
  24.  
  25. <div class="hamburguer-menu"><div class="holder"></div></div>
  26.  
  27.  
  28. </header>
  29.  
  30. <nav class="nav-mobile">
  31. <ul class="nav-content">
  32. <li><a href="#">Home</a></li>
  33. <li><a href="#">Nossos Serviços</a></li>
  34. <li><a href="#">Nosso time</a></li>
  35. <li><a href="#">Contato</a></li>
  36. </ul>
  37. </nav>
  38.  
  39. <div class="container">
  40. <div class="row">
  41. <div class="col-md-12 first-section" style="text-align:center; margin:0 auto;">
  42. <div class="text-content" style="text-align:center;">
  43. <h1 style="width:391px;">WE CODE</h1>
  44. <h1 style="width:475px">WE CREATE</h1>
  45. <h1 style="width:575px">WE ARE <span style="color:rgba(255, 235, 59,1.0);">WEB5</span></h1></h1>
  46. </div>
  47.  
  48. </div>
  49. </div>
  50. </div>
  51.  
  52.  
  53.  
  54.  
  55. <script
  56. src="https://code.jquery.com/jquery-3.1.1.min.js"
  57. integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  58. crossorigin="anonymous"></script>
  59.  
  60. <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  61.  
  62. <script type="text/javascript" src="js/app.js"></script>
  63. </body>
  64. </html>
  65.  
  66.  
  67.  
  68.  
  69.  
  70. *** CSS ***
  71.  
  72.  
  73. @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
  74. @import url('https://fonts.googleapis.com/css?family=Nunito:400,800');
  75.  
  76.  
  77.  
  78.  
  79.  
  80. *{
  81.  
  82. padding: 0px;
  83. margin: 0px;
  84. box-sizing: border-box;
  85. }
  86.  
  87. html, body{
  88. padding: 0px;
  89. margin: 0px
  90. }
  91.  
  92.  
  93. .container{
  94. min-width: 100%;
  95. position: relative;
  96. display: block;
  97.  
  98. }
  99.  
  100. header{
  101. width: 100%;
  102. background-color: black;
  103. position: fixed;
  104. height: 50px;
  105. z-index: 666;
  106. }
  107.  
  108. nav{
  109. min-width: auto;
  110. }
  111. ul li {
  112. display: inline-block;
  113. padding: 16px;
  114. top: -4px;
  115. font-size: 17px;
  116. font-family: 'Roboto Condensed', sans-serif;
  117. overflow: hidden;
  118. list-style-type: none;
  119. text-decoration: none;
  120. position: relative;
  121. }
  122.  
  123. li{
  124. left: 850px;
  125. }
  126. li a{
  127. color: white;
  128. text-decoration: none;
  129.  
  130. }
  131.  
  132. li a:hover{
  133. color: white;
  134. text-decoration: none;
  135. }
  136.  
  137. li a:active{
  138. color: white;
  139. text-decoration: none;
  140. }
  141.  
  142. li a:hover{
  143. color: white;
  144. text-decoration: none;
  145. }
  146.  
  147. li a:target{
  148. color: white;
  149. text-decoration: none;
  150. }
  151.  
  152. li a:link{
  153. color: white;
  154. text-decoration: none;
  155. }
  156.  
  157. li a:visited{
  158. color: white;
  159. text-decoration: none;
  160.  
  161. }
  162.  
  163. li a::after{
  164. content: '';
  165. display: block;
  166. position: relative;
  167. width: 0%;
  168. margin: 0 auto;
  169. background-color: transparent;
  170. height: 2px;
  171. transition: 0.75s ease;
  172. }
  173.  
  174.  
  175. li a:hover:after{
  176. width: 100%;
  177. background-color: rgba(255, 235, 59,1.0);
  178. }
  179.  
  180. .nav-mobile{
  181. width: auto;
  182. height: 0px;
  183. background-color: black;
  184. transition: 0.75s ease;
  185.  
  186.  
  187. }
  188. .nav-content{
  189. position: relative;
  190. top: 45px;
  191. width: auto;
  192.  
  193.  
  194. }
  195. .nav-content li a{
  196. color: white;
  197. top: 15px;
  198. position: relative;
  199. width: 50px;
  200.  
  201. }
  202.  
  203. .nav-content li{
  204. margin: 0 auto;
  205. display: block;
  206. left: 0px;
  207. text-align: center;
  208. position: relative;
  209. width: 150px;
  210. height: 0px;
  211. }
  212.  
  213.  
  214. .hamburguer-menu{
  215. width: 35px;
  216. height: 4px;
  217. background-color: #FFC107;
  218. float: right;
  219. right: 45px;
  220. position: relative;
  221. top: 3px;
  222. display: none;
  223. transition: 0.25s linear;
  224. cursor: pointer;
  225. z-index: 0;
  226.  
  227. }
  228.  
  229. .holder{ /*Elementy that contain the menu behind him. Used to not have "miss clicks" on the menu .*/
  230. width: 50px;
  231. height: 40px;
  232. cursor: pointer;
  233. position: absolute;
  234. top: -7px;
  235. right: -8px;
  236. float: right;
  237. z-index: 1;
  238. }
  239.  
  240. .hamburguer-menu::after{
  241. content: '';
  242. display: block;
  243. width: 35px;
  244. height: 4px;
  245. position: relative;
  246. top: 6px;
  247. background-color: #FFC107;
  248. transition: 0.25s linear;
  249. cursor: pointer;
  250.  
  251. }
  252.  
  253. .hamburguer-menu::before{
  254. content: '';
  255. display: block;
  256. width: 35px;
  257. height: 4px;
  258. position: relative;
  259. top: 20px;
  260. background-color: #FFC107;
  261. transition: 0.25s linear;
  262. cursor: pointer;
  263.  
  264. }
  265.  
  266.  
  267.  
  268. /*The class called "opened" changes the hamburguer menu into a "X" */
  269.  
  270. .opened.hamburguer-menu{
  271. transform: rotate(-45deg);
  272. position: relative;
  273. top: -25px;
  274. }
  275.  
  276. .opened.hamburguer-menu::after{
  277. transform: rotate(-95deg);
  278. position: relative;
  279. top: -3px;
  280. }
  281.  
  282. .opened.hamburguer-menu::before{
  283. background-color: transparent;
  284. }
  285.  
  286. .col-md-12{
  287. display: flex;
  288. }
  289. .first-section{
  290. width: 100%;
  291. height: 650px;
  292. position: relative;
  293. background: url('../images/photo02.jpg') no-repeat center center fixed;
  294. -webkit-background-size: cover;
  295. -moz-background-size: cover;
  296. -o-background-size: cover;
  297. background-size: cover;
  298. margin: 0 auto;
  299. display: table;
  300.  
  301.  
  302. }
  303.  
  304. .first-section h1{
  305. top: 135px;
  306. font-size: 75px;
  307. position: relative;
  308. padding: 15px;
  309. color: white;
  310. font-family: 'Nunito', sans-serif;
  311. font-style: bold;
  312. font-weight: 75px;
  313. background-color: black;
  314. display: table;
  315. margin-right: auto;
  316. margin-left: auto;
  317.  
  318.  
  319.  
  320. }
  321.  
  322.  
  323. .text-content h1{
  324.  
  325. height:105px;
  326. margin-top: 0 auto;
  327. display: block;
  328. position: relative;
  329. }
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341. /*configurations to mobile devices */
  342. @media (max-width: 1024px){
  343.  
  344. .nav-bar li{
  345. left: 0px;
  346. }
  347. .nav-bar li a{
  348. display: none;
  349. left: 0px;
  350. }
  351.  
  352. .hamburguer-menu{
  353. display: inherit;
  354. position: relative;
  355. top: -35px;
  356. z-index: 5000;
  357. }
  358. .nav-mobile{
  359. width: 100%;
  360. height: 0px;
  361. transition: 0.75s ease;
  362. z-index: 0;
  363. display: inherit;
  364.  
  365. }
  366.  
  367. .menu-opened.nav-mobile{ /*apply this class with jquery when the hamburguer-button is clicked*/
  368. width: 100%;
  369. height: 300px;
  370. z-index: 5;
  371. position: fixed;
  372.  
  373. }
  374.  
  375.  
  376. .menu-opened.nav-content li{
  377. height: 50px;
  378. transition: 0.55s linear;
  379. color: blue;
  380.  
  381.  
  382. }
  383.  
  384.  
  385. .first-section h1{
  386. font-size: 45px;
  387. text-align: center;
  388. display: table;
  389. margin-right: auto;
  390. margin-left: auto;
  391. height: 65px;
  392. width: 325px !important;
  393.  
  394. }
  395. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!