Created
June 1, 2013 05:00
-
-
Save valdiney/5689319 to your computer and use it in GitHub Desktop.
Menu estilo tipico de celulares! Reparei este menu em um celular com o windows Mobile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = function(){ | |
| // Resgatando Menu | |
| var menu = document.getElementById('menu'); | |
| // Aplica as funções após o click | |
| var show_menu = document.getElementById('show_menu').onclick = function(){ | |
| // Verifica o estado do menu e aplica o valor relevante a situação | |
| if(menu.style.display == 'none'){ | |
| ocultaMenu('block'); | |
| }else{ | |
| ocultaMenu('none'); | |
| } | |
| } | |
| // Função capaz de ablitar e desablitar o Menu | |
| function ocultaMenu(parametro){ | |
| return menu.style.display = parametro; | |
| } | |
| }//end window |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!Doctype html> | |
| <html> | |
| <head lang="pt-br"> | |
| <title>Menu estilo window Mobile</title> | |
| </head> | |
| <body> | |
| <div id="bigWhapper"> | |
| <div id="whapper"> | |
| <button type="button" id="show_menu"> = </button> | |
| <ul id="menu"> | |
| <li><a href="#" id="iniciar">Iniciar</a></li> | |
| <li><a href="#" id="mensagens">Nenhuma mensagem nova</a></li> | |
| <li><a href="#" id="chamadas">Nenhuma chamada perdida</a></li> | |
| <li><a href="#" id="email">Nenhum-email novo</a></li> | |
| </ul> | |
| </div><!--end whapper--> | |
| </div><!--end bigWhapper--> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| font-family:candara; | |
| background:#050505; | |
| } | |
| #bigWhapper{ | |
| width:330px; | |
| height:330px; | |
| padding:10px; | |
| margin:auto; | |
| background:gray; | |
| border:1px solid black; | |
| border-radius:5px; | |
| padding-top:20px; | |
| padding-bottom:20px; | |
| box-shadow:black 3px 3px 3px; | |
| } | |
| #whapper{ | |
| width:300px; | |
| height:300px; | |
| padding:10px; | |
| margin:auto; | |
| background:gray; | |
| background-image:url('img_config/fundo_whapper.jpg'); | |
| border:1px solid black; | |
| box-shadow:black 3px 3px 3px inset; | |
| } | |
| ul{ | |
| margin:0px; | |
| padding:0px; | |
| list-style:none; | |
| margin-top:30px; | |
| } | |
| #menu li a{ | |
| display:block; | |
| width:auto; | |
| padding:10px; | |
| background-color:black; | |
| background-color:rgba(0,0,0,.8); | |
| text-align:left; | |
| text-decoration:none; | |
| color:silver; | |
| margin-bottom:5px; | |
| border-radius:5px; | |
| box-shadow:black 1px 1px 2px; | |
| border:1px solid black; | |
| height:20px; | |
| padding-top:5px; | |
| -webkit-transition-duration:0.5s; | |
| -moz-transition-duration:0.5s; | |
| -o-transition-duration:0.5s; | |
| } | |
| #menu li a:hover{ | |
| background-color:rgba(225,225,225,.8); | |
| color:black; | |
| font-size:20px; | |
| height:20px; | |
| padding-top:5px; | |
| box-shadow:black 1px 1px 5px; | |
| -webkit-transition-duration:0.5s; | |
| -moz-transition-duration:0.5s; | |
| -o-transition-duration:0.5s; | |
| } | |
| #menu li a:active{ | |
| box-shadow:white 2px 2px 5px; | |
| -webkit-transition-duration:0.1s; | |
| color:#457c16; | |
| } | |
| #show_menu{ | |
| float:right; | |
| background:black; | |
| border:0px; | |
| color:white; | |
| border-radius:3px; | |
| cursor:pointer; | |
| box-shadow:black 1px 1px 2px; | |
| padding:5px; | |
| opacity:0.60; | |
| } | |
| #email:before{ | |
| content:url(img_config/email.png); | |
| margin-right:10px; | |
| } | |
| #chamadas:before{ | |
| content:url(img_config/chamada.png); | |
| margin-right:10px; | |
| } | |
| #iniciar:before{ | |
| content:url(img_config/inicio.png); | |
| margin-right:10px; | |
| } | |
| #mensagens:before{ | |
| content:url(img_config/mensagem.png); | |
| margin-right:10px; | |
| } |
Boas Valdiney.. Está super este trabalho..
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Visualização do menu postado no FACEBOOK!!
http://www.facebook.com/photo.php?fbid=369636269825621&set=gm.488167487923679&type=1&theater