seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Participe do fórum, é rápido e fácil

seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] menu bar em html/css/js - 1º parte

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

Ir para baixo  Mensagem [Página 1 de 1]

Kodo no Kami

Kodo no Kami
master
master

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  

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

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

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

Código:
<!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

Código:
<!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

Código:
<!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

Código:
<!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

Código:
<!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

Código:
<!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

Código:
<!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)

Código:
<!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"

Código:
<!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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

Código:
<!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)

Código:
<!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

Código:
<!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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

bom galera esse tuto continua em uma segunda parte ^^

by hfts315

https://endoffile.umforum.net

Ir para o topo  Mensagem [Página 1 de 1]

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] menu bar em html/css/js - 1º parte

Permissões neste sub-fórum
Não podes responder a tópicos