[tutorial] menu bar em html/css/js - 1º parte

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] menu bar em html/css/js - 1º parte

Post by Kodo no Kami » Sun May 03, 2015 9:14 am

bom galera ultimamente nem to fazendo tantos tutoriais devido eu esta terminando o ebook c/c++ que logo logo irei postar pra vcs, nesse tutorial vou ensinar como criar uma barra de menu que vai seguir o scroll, nessa barra vai ter um botao para abrir e fechar ela (sera o mesmo botao abrir/fechar), o titulo e outros botões para alternar as opçao, vamos usar html/css e js, ele vai ser muito parecido com esse que eu tinha feito  

Image

para começar usamos uma pagina basica onde vamos fazer o codigo (no caso vc poderia fazer em seu site ou forum), no caso vou usar essa em branco para ficar facil a leitura do codigo

Code: Select all

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
criamos a tag script para receber os codigos js

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
</head>
<body>
</body>
</html>
agora criamos a tag style para receber o css

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
  </style>
</head>
<body>
</body>
</html>
agora criamos um div para dividir o nosso menu bar da pagina colocamos um id para manipular mais tarde

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
  </style>
</head>
<body>
  <div id="fts_bar">
  </div>
</body>
</html>
agora criamos um botao la dentro o trabalho dele vai ser abrir e fechar o menu, tambem colocamos um id nele

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
  </div>
</body>
</html>
abaixo do botao criamos outro div, que sera necessario por ocultar os outros botõe, nao se esqueça do id

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
    </div>
  </div>
</body>
</html>
criamos outro div para manipular o titulo com um id, tambem colocamos um texto que sera um titulo

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
    </div>
  </div>
</body>
</html>
por padrao queremos que esse ultimo div que criamos seja ocultado para isso vamos para parte css um pouco, na tag style que criamos antes colocamos o seletor do id que seria sharps seguido do nome e criamos um escopo para o codigo

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
    </div>
  </div>
</body>
</html>
agora usamos o codigo "display: none" la dentro para ocultar

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 display: none;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
    </div>
  </div>
</body>
</html>
vamos mudar a cor do fundo do div para ficar legal, usando o css no seletor do div colocamos o codigo "background-color: " seguida do nome da cor (red,blue,black etc), no meu caso mudei a cor do primeiro div ai mudo tudo (tambem desativei o comando que oculta o div comentando ele para poder ver como ta ficando)

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 /*display: none;*/
 }
 
#fts_bar{
 background-color: black;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
    </div>
  </div>
</body>
</html>
devido a cor do titulo ser preto e a cor do fundo ser preto nao da para ver, entao mudei a cor do texto do div do titulo usando "color: red"

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 /*display: none;*/
 }
 
#fts_bar{
 background-color: black;
 }
 
#fts_titulo{
 color: red;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
    </div>
  </div>
</body>
</html>
Image

depois do div do titulo criamos mais uma div que sera os botao com as opção, nesse meu menu vou criar apenas dois botao um vai ser para exibir o ip da pessoa logada (tipo o myip) e o outro sera um info do menu

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 /*display: none;*/
 }
 
#fts_bar{
 background-color: black;
 }
 
#fts_titulo{
 color: red;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP">
        <input type="button" value="Info">
        </div>
    </div>
  </div>
</body>
</html>
criamos mais um div onde vai ser criado o codigo (nessa parte o codigo sera gerado dinamicamente pelo js quando apertamos no botao, como sera dinamicamente sempre e bom ter cuidado com a entrada de dados para evitar xss)

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 /*display: none;*/
 }
 
#fts_bar{
 background-color: black;
 }
 
#fts_titulo{
 color: red;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP">
        <input type="button" value="Info">
        </div>
        <div id="fts_opcao">
        </div>
    </div>
  </div>
</body>
</html>
vou alterar a cor de fundo do div dos botões para da um visual melhor

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 /*display: none;*/
 }
 
#fts_bar{
 background-color: black;
 }
 
#fts_titulo{
 color: red;
 }
 
#fts_botao_opcao{
 background-color: gray;
 }
  </style>
</head>
<body>
  <div id="fts_bar">
    <input type="button" id="fts_botao_abrir" value="abrir">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP">
        <input type="button" value="Info">
        </div>
        <div id="fts_opcao">
        </div>
    </div>
  </div>
</body>
</html>
Image

bom galera esse tuto continua em uma segunda parte ^^

by kodo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”