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 - 2º parte

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

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

Kodo no Kami

Kodo no Kami
master
master

bom galera continuando o tutorial anterior o codigo que paramos foi esse

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>
na parte que sera gerada dinamicamente vou colocar um codigo para iniciar com ele que sera um iframe para mostra o ip quando apertar em outro botao sera apagado e inserido outro codigo

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">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

agora vamos mexer um pouco com javascript, na tag script criamos uma função para alterar o div com a parte dinamica

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 }
  </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">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
dentro da funçao usamos document.getElementById para achar o id do div e manipular, usamos o atributo innerHTML e passamos para ele uma string que seria o codigo (no meu caso o iframe), agora so falta chamar essa funçao pelo evento onclick no botao

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
  </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" onclick="fts_botao_ip()">
        <input type="button" value="Info">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
fazemos o mesmo com o outro botao criamos a função e pegamos o id e mudamos, e vuala ele ja vai esta alternando entre as duas opção

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
 
function fts_botao_info()
 {
 document.getElementById("fts_opcao").innerHTML = '<font color="yellow">Coder:</font><font color="white"> hfts315</font><br>';
 }
  </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" onclick="fts_botao_ip()">
        <input type="button" value="Info" onclick="fts_botao_info()">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

nosso menu bar ja esta quase pronto so falta arruamar o botao para ocultar e fixar ela em um canto, vamos ver primeiro a parte de ocultar criamos uma nova função em js que sera responsavel de ver ser vai ocultar ou desocultar e fazer, a melhor forma é o texto do botao que começa com "abrir" (se ele tiver abrir ele desoculta e tiver fechar ele oculta), pera pegar o texto usamos denovo o id so que dessa vez usamos o atributo .value e comparamos em uma condição if

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
 
function fts_botao_info()
 {
 document.getElementById("fts_opcao").innerHTML = '<font color="yellow">Coder:</font><font color="white"> hfts315</font><br>';
 }
 
function fts_botao_ocultar()
 {
 if(document.getElementById("fts_botao_abrir").value == "abrir")
 {
 }
 else
 {
 }
 }
  </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" onclick="fts_botao_ip()">
        <input type="button" value="Info" onclick="fts_botao_info()">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
dentro do if e else pegamos o id da onde vai ocultar e desocultar e usamos o atributo .style.display passando como argumento "none" para ocultar e "block" para desocultar (tambem descomentamos o "display: none" no css para começar oculto, tambem temos que colocar essa função no evento onclick do botao

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
 
function fts_botao_info()
 {
 document.getElementById("fts_opcao").innerHTML = '<font color="yellow">Coder:</font><font color="white"> hfts315</font><br>';
 }
 
function fts_botao_ocultar()
 {
 if(document.getElementById("fts_botao_abrir").value == "abrir")
 {
 document.getElementById("fts_menu_ocultar").style.display = "block";
 }
 else
 {
 document.getElementById("fts_menu_ocultar").style.display = "none";
 }
 }
  </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" onclick="fts_botao_ocultar()">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP" onclick="fts_botao_ip()">
        <input type="button" value="Info" onclick="fts_botao_info()">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
se a gente perceber ele so ta desocultando isso pq o titulo do botao nao muda entao temos que achar o id do botao e atribuir o outro titulo ao atributo .value dentro do if e else

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
 
function fts_botao_info()
 {
 document.getElementById("fts_opcao").innerHTML = '<font color="yellow">Coder:</font><font color="white"> hfts315</font><br>';
 }
 
function fts_botao_ocultar()
 {
 if(document.getElementById("fts_botao_abrir").value == "abrir")
 {
 document.getElementById("fts_menu_ocultar").style.display = "block";
 document.getElementById("fts_botao_abrir").value = "fechar";
 }
 else
 {
 document.getElementById("fts_menu_ocultar").style.display = "none";
 document.getElementById("fts_botao_abrir").value = "abrir";
 }
 }
  </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" onclick="fts_botao_ocultar()">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP" onclick="fts_botao_ip()">
        <input type="button" value="Info" onclick="fts_botao_info()">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
ta prontinho so falta fixar o primeiro div em um canto, para isso vamos usar o css "position: fixed" (isso vai redimesionar ele tambem), tambem podemos usar z-index para coloca ele por cima de tudo, e podemos manipula a direção dele com left, right, top e bottom (no caso eu vou deixar o meu no lado direto em baixo)

Código:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
   function fts_botao_ip()
 {
 document.getElementById("fts_opcao").innerHTML = '<iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>';
 }
 
function fts_botao_info()
 {
 document.getElementById("fts_opcao").innerHTML = '<font color="yellow">Coder:</font><font color="white"> hfts315</font><br>';
 }
 
function fts_botao_ocultar()
 {
 if(document.getElementById("fts_botao_abrir").value == "abrir")
 {
 document.getElementById("fts_menu_ocultar").style.display = "block";
 document.getElementById("fts_botao_abrir").value = "fechar";
 }
 else
 {
 document.getElementById("fts_menu_ocultar").style.display = "none";
 document.getElementById("fts_botao_abrir").value = "abrir";
 }
 }
  </script>
    
  <style type="text/css">
   #fts_menu_ocultar{
 display: none;
 }
 
#fts_bar{
 background-color: black;
 position: fixed;
 z-index: 999999;
 right: 0px;
 bottom: 0px;
 }
 
#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" onclick="fts_botao_ocultar()">
    <div id="fts_menu_ocultar">
     <div id="fts_titulo">
         FTS MENU BAR
        </div>
        <div id="fts_botao_opcao">
        <input type="button" value="Seu IP" onclick="fts_botao_ip()">
        <input type="button" value="Info" onclick="fts_botao_info()">
        </div>
        <div id="fts_opcao">
         <iframe src=http://fts315.xp3.biz/webtools/meuip.php width=300 height="250" frameborder=0>
        </div>
    </div>
  </div>
</body>
</html>
como podemos ver na imagem abaixo mesmo se movimentar o scroll ele vai acompanhar

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

para ver como fico segue o link abaixo ^^

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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 - 2º parte

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