Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


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

 » Programação » Hypertext Markup Language (HTML) » Arquivo: Resolvido » 

Pagina inicial HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar
Novato

em Sex Fev 19, 2016 12:46 am
Minha questão:
Bom gostaria de colocar uma pagina de acesso HTML em meu fórum, onde eu possa colocar títulos clicáveis para redirecionar as pessoas para o fórum ou para acessar ip do servidor entre outros.
Exemplo


Endereço do meu fórum:
http://mmsaoficial.forumeiros.com/

Ver perfil do usuário
avatar
Usuário ativo

em Sex Fev 19, 2016 12:50 am
Olá, @STR!

Código:

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Baixa Cidade RPG</title>
 <meta name="description" content="Baixa Cidade RPG" />
 <meta name="keywords" content="SA:MP - RPG" />
 <meta name="author" content="Codrops" />
 <link rel="shortcut icon" href="[url=view-source:http://asusgames.esy.es/cloud.ico]http://asusgames.esy.es/cloud.ico[/url]">
 <link rel="stylesheet" href="[url=view-source:http://asusgames.esy.es/MyCSS.css]http://asusgames.esy.es/MyCSS.css[/url]" type="text/css" media="screen"/>
 <script src="[url=view-source:http://asusgames.esy.es/CSS/modernizr.custom.js]http://asusgames.esy.es/CSS/modernizr.custom.js[/url]"></script>
 </head>
<style>
 /* General styles for all menus */
.cbp-spmenu {
 background: #163c52;
 position: fixed;
}

.cbp-spmenu h3 {
 color: #afdefa;
 font-size: 1.9em;
 padding: 20px;
 margin: 0;
 font-weight: 300;
 background: #0d77b6;
}

.cbp-spmenu a {
 display: block;
 color: #fff;
 font-size: 1.1em;
 font-weight: 300;
}

.cbp-spmenu a:hover {
 background: #1c5f85;
}

.cbp-spmenu a:active {
 background: #afdefa;
 color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
 width: 240px;
 height: 100%;
 top: 0;
 z-index: 1000;
}

.cbp-spmenu-vertical a {
 border-bottom: 1px solid #1c5f85;
 padding: 1em;
 -webkit-transition:background 0.5s ease-out;
 -moz-transition:background 0.5s ease-out;
 -o-transition:background 0.5s ease-out;
 -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
 width: 100%;
 height: 150px;
 left: 0;
 z-index: 1000;
 overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
 height: 100%;
 width: 20%;
 float: left;
}

.cbp-spmenu-horizontal a {
 float: left;
 width: 20%;
 padding: 0.8em;
 border-left: 1px solid #1c5f85;
 -webkit-transition:background 0.5s ease-out;
 -moz-transition:background 0.5s ease-out;
 -o-transition:background 0.5s ease-out;
 -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
 left: -240px;
}

.cbp-spmenu-right {
 right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
 left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
 right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
 top: -150px;
}

.cbp-spmenu-bottom {
 bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
 top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
 bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
 overflow-x: hidden;
 position: relative;
 left: 0;
}

.cbp-spmenu-push-toright {
 left: 240px;
}

.cbp-spmenu-push-toleft {
 left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

 .cbp-spmenu-horizontal {
 font-size: 75%;
 height: 110px;
 }

 .cbp-spmenu-top {
 top: -110px;
 }

 .cbp-spmenu-bottom {
 bottom: -110px;
 }

}

@media screen and (max-height: 26.375em){

 .cbp-spmenu-vertical {
 font-size: 90%;
 width: 190px;
 }

 .cbp-spmenu-left,
 .cbp-spmenu-push-toleft {
 left: -190px;
 }

 .cbp-spmenu-right {
 right: -190px;
 }

 .cbp-spmenu-push-toright {
 left: 190px;
 }
}
 /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'fontawesome';
 src:url('../fonts/fontawesome.eot');
 src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
 url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
 url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
 url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}
#lixo {
display:none;
}
body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #0f354b;
 background: #273749 url("http://i.imgur.com/cW2QBtL.jpg?1") top no-repeat;
}

a {
 color: #f0f0f0;
 text-decoration: none;
}


.main,
.container > header {
 width: 90%;
 max-width: 69em;
 margin: 0 auto;
 padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
 padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
 font-size: 2.125em;
 line-height: 1.3;
 margin: 0;
 float: left;
 font-weight: 400;
}

.container > header span {
 display: block;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5em;
 padding: 0 0 0.6em 0.1em;
}

.container > header nav {
 float: right;
}

.container > header nav a {
 display: block;
 float: left;
 position: relative;
 width: 2.5em;
 height: 2.5em;
 background: #fff;
 border-radius: 50%;
 color: transparent;
 margin: 0 0.1em;
 border: 4px solid #0f354b;
 text-indent: -8000px;
}

.container > header nav a:after {
 content: attr(data-info);
 color: #0f354b;
 position: absolute;
 width: 600%;
 top: 120%;
 text-align: right;
 right: 0;
 opacity: 0;
 pointer-events: none;
}

.container > header nav a:hover:after {
 opacity: 1;
}

.container > header nav a:hover {
 background: #0f354b;
}

.main > section {
 max-width: 260px;
 width: 90%;
 margin: 0 auto;
}

.main > section h2 {
 font-weight: 300;
 color: #ccc;
}

.main > section button {
 border: none;
 background: #0f354b;
 color: #fff;
 padding: 1.5em;
 display: block;
 width: 100%;
 cursor: pointer;
 margin: 10px 0;
 font-size: 0.8em;
 -webkit-transition:background 0.5s ease-out;
 -moz-transition:background 0.5s ease-out;
 -o-transition:background 0.5s ease-out;
 -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
 background: #1c5f85;
 -webkit-transition:background 0.5s ease-out;
 -moz-transition:background 0.5s ease-out;
 -o-transition:background 0.5s ease-out;
 -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
 background: #0d77b6;
}

.main > section button.disabled {
 background: #aaa;
 pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
 font-family: 'fontawesome';
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 speak: none;
 font-style: normal;
 font-weight: normal;
 line-height: 2;
 text-align: center;
 color: #0f354b;
 -webkit-font-smoothing: antialiased;
 text-indent: 8000px;
 padding-left: 8px;
}

.container > header nav a:hover:before {
 color: #fff;
}

.icon-drop:before {
 content: "\e000";
}

.icon-arrow-left:before {
 content: "\f060";
}
span.eddyeowna{
 background: #0f354b;
 position:fixed;
 right:0px;
 bottom:30px;
 font-size:12px;
 -webkit-animation-name: bounceInDown;
 animation-name: bounceInDown;
}
 span.eddyeowna a{
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 margin-right:30px;
}
 span.eddyeowna a:hover{
 color:#000;
}
 </style>
 <embed src="[url=view-source:https://www.youtube.com/v?v=jVrB_vfS3AQ&autoplay=1]https://www.youtube.com/v?v=jVrB_vfS3AQ&autoplay=1[/url]" style="width: 1px; height: 1px;"/>
 <body class="cbp-spmenu-push">
 <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
 <h3>Fórum</h3>
 <a href="[url=view-source:http://baixacidade.forumeiros.com/forum]/forum[/url]">Acessar</a>
 <a href="[url=view-source:http://baixacidade.forumeiros.com/login]/login[/url]">Logar</a>
 <a href="[url=view-source:http://baixacidade.forumeiros.com/register]/register[/url]">Registrar-se</a>
 </nav>
 <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
 <h3>Servidores</h3>
 <a href="[url=samp://192.95.52.45:7777]samp://192.95.52.45:7777[/url]">SA-MP</a>
 <a href="[url=ts3server://192.99.241.220:7134]ts3server://192.99.241.220:7134[/url]">TeamSpeak3</a>
 
 </nav>
 <div class="container">
 <header class="clearfix">
 <center><h3><span class="animated BounceInUp">BEM-VINDO AO FÓRUM DO SERVIDOR BAIXA CIDADE RPG</span></h3></center>
 </header>
 <div class="main">
 <section class="buttonset">
 <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
 <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
 <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
 <button id="showRightPush" class="animated bounceInDown">Servidores</button>
 <button id="showRightPush" class="animated bounceInUp"><a href="[url=view-source:http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html]http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html[/url]" target="blank">Download GTA</a></button>
 </section>
 </div>
 </div>
 <span class="eddyeowna">
 
 <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
 <script src="[url=view-source:http://asusgames.esy.es/CSS/classie.js]http://asusgames.esy.es/CSS/classie.js[/url]"></script>
 <script>
 var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
 menuRight = document.getElementById( 'cbp-spmenu-s2' ),
 menuTop = document.getElementById( 'cbp-spmenu-s3' ),
 menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
 showLeft = document.getElementById( 'showLeft' ),
 showRight = document.getElementById( 'showRight' ),
 showTop = document.getElementById( 'showTop' ),
 showBottom = document.getElementById( 'showBottom' ),
 showLeftPush = document.getElementById( 'showLeftPush' ),
 showRightPush = document.getElementById( 'showRightPush' ),
 body = document.body;
 showLeftPush.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( body, 'cbp-spmenu-push-toright' );
 classie.toggle( menuLeft, 'cbp-spmenu-open' );
 disableOther( 'showLeftPush' );
 };
 showRightPush.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( body, 'cbp-spmenu-push-toleft' );
 classie.toggle( menuRight, 'cbp-spmenu-open' );
 disableOther( 'showRightPush' );
 };

 function disableOther( button ) {
 if( button !== 'showLeft' ) {
 classie.toggle( showLeft, 'disabled' );
 }
 if( button !== 'showRight' ) {
 classie.toggle( showRight, 'disabled' );
 }
 if( button !== 'showTop' ) {
 classie.toggle( showTop, 'disabled' );
 }
 if( button !== 'showBottom' ) {
 classie.toggle( showBottom, 'disabled' );
 }
 if( button !== 'showLeftPush' ) {
 classie.toggle( showLeftPush, 'disabled' );
 }
 if( button !== 'showRightPush' ) {
 classie.toggle( showRightPush, 'disabled' );
 }
 }
 </script>
 <div id="lixo">
 <a href="[url=view-source:http://www.forumeiros.com/]http://www.forumeiros.com[/url]" target="_blank">forumeiros.com</a>
 </div>
 <script type="text/javascript" src="[url=view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js[/url]"></script>
 <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
 <script language="JavaScript">
 function protegercodigo() {
 if (event.button==2||event.button==3){
 }
 document.onmousedown=protegercodigo
</script>
 </body>
</html>

Até mais! Cool

Edite tudo, para que não fique igual ao meu! Muito feliz (rindo)

Ver perfil do usuário
avatar
Novato

em Sex Fev 19, 2016 1:08 am
@PaladinoS Como faço pra tornar clicável o ''Fórum Servidor, etc'' e abrir aquela janela lateral com as opções?

Ver perfil do usuário
avatar
Usuário ativo

em Sex Fev 19, 2016 1:16 am
Deveria estar funcionando. Mude para esse HTML

Código:
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Baixa Cidade RPG</title>
      <meta name="description" content="Baixa Cidade RPG" />
      <meta name="keywords" content="SA:MP - RPG" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 150px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 0.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }

  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://i.imgur.com/cW2QBtL.jpg?1") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
        <embed src="https://www.youtube.com/v?v=jVrB_vfS3AQ&autoplay=1" style="width: 1px; height: 1px;"/>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Fórum</h3>
                  <a href="/forum">Acessar</a>
                  <a href="/login">Logar</a>
                  <a href="/register">Registrar-se</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://192.95.52.45:7777">SA-MP</a>
        <a href="ts3server://192.99.241.220:7134">TeamSpeak3</a>
   
      </nav>
      <div class="container">
        <header class="clearfix">
          <center><h3><span class="animated BounceInUp">BEM-VINDO AO FÓRUM DO SERVIDOR BAIXA CIDADE RPG</span></h3></center>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
              <button id="showRightPush" class="animated bounceInUp"><a href="http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html" target="blank">Download GTA</a></button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">
 
      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>
          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>

Ver perfil do usuário
avatar
Novato

em Sex Fev 19, 2016 1:20 am
@PaladinoS agora está funcionando, é como mudo a imagem de fundo?

Ver perfil do usuário
avatar
Usuário ativo

em Sex Fev 19, 2016 1:21 am
Procure no CSS
Código:
http://i.imgur.com/cW2QBtL.jpg?1

Ver perfil do usuário
avatar
Novato

em Sex Fev 19, 2016 3:10 am
@PaladinoS, uma ultima coisa como mudo aquele ícone que fica ali na aba da internet, o chat verdinho?
Outra coisa o que devo usar para modificar as fonte, mudei o banner e onde tá escrito ''Acesso Rápido'' ficou bem no branco, sendo que a fonte é branca, como faço pra mudar cor colocar em negrito, enfim...
-
@edit
E também como faço pra colocar um novo botão, porque estou tentando assim vai não fica clicável e não abre para lateral:
Código:
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores2</h3>
        <a href="samp://167.114.133.208:7778">SA-MP</a>
        <a href="ts3server://mmsa.ts3play.com">TeamSpeak3</a>

 
Código:
<button id="showRightPush" class="animated bounceInDown">Servidores2</button>

Estou tentando assim de exemplo, ele cria o botão mais não fica clicavel e nem abre para lateral..

Ver perfil do usuário
avatar
Administrador

em Sex Fev 19, 2016 11:05 pm
Eu vejo que o senhor já conseguiu deixar o botão do Teamspeak clicável, a sua dúvida persiste?

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Fev 20, 2016 3:53 am
Persiste sim, pois que eu quero coloca um novo botão, usei ali de teste um existente...
Quero criar um com ''Mídias sociais'' e arrumar o ''Download GTA'', mas não estou conseguindo, eu crio o botão mais não fica clicável.
-
Queria aprender 100% para futuras alterações.

Ver perfil do usuário
avatar
Administrador

em Sab Fev 20, 2016 6:54 pm
Olá!

Veja, se assim está bom:

Código:
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MMSA OFICIAL™</title>
      <meta name="description" content="MMSA OFICIAL™" />
      <meta name="keywords" content="SA:MP - DM" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 85px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 1.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}
  .cbp-spmenu-push-down {
      top: 100px;
  }
/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }
  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://i.imgur.com/9eLbrQE.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
      <embed src="https://www.youtube.com/v?v=_DzAI9QrkWU&autoplay=1" style="width: 1px; height: 1px;"/>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Servidores 2</h3>
                  <a href="/f">SERVER 2</a>
                  <a href="/l">SERVER 2</a>
                  <a href="/r">SERVER 2</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://167.114.133.208:7778">SA-MP 0.3.7-R2</a>
        <a href="ts3server://mmsa.ts3play.com">TeamSpeak3</a>
      </nav>
          <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
        <h3>Fórum</h3>
                  <a href="/f">Acessar</a>
                  <a href="/l">Logar</a>
                  <a href="/r">Registrar-se</a>
      </nav>
      <div class="container">
        <header class="clearfix">
          <center><h3><span class="animated BounceInUp">BEM-VINDO(a) AO FÓRUM DO MATA MATA SAN ANDREAS OFICIAL™</span></h3></center>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showTop" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
              <button id="showLeftPush" class="animated bounceInDown">Servidores 2</button>
              <button class="animated bounceInUp"><a href="http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html" target="blank">Download GTA</a></button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">

      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };
        showTop.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-down' );
            classie.toggle( menuTop, 'cbp-spmenu-open' );
            disableOther( 'showBottom');
        };
        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>
          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>

Eu tive de fazer desse jeito, para seguir a estrutura do código!

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Fev 20, 2016 7:38 pm
Bom Rafael, você colocou pra funcionar, mas agora preciso de uma explicação pra eu mesmo colocar pra funcionar...
Bom pelo que vi você colocou:
Código:
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Servidores 2</h3>
                  <a href="/f">SERVER 2</a>
                  <a href="/l">SERVER 2</a>
                  <a href="/r">SERVER 2</a>
      </nav>

Código:
<button id="showLeftPush" class="animated bounceInDown">Servidores 2</button>

Código:
menuTop = document.getElementById( 'cbp-spmenu-s3' ),

Colocou essas coisas para poder criar, foi apenas isso ou tem mais alguma coisa, vou pegar o HTML antigo e tentar fazer igual a esse, para ver se consigo chegar no mesmo resultado...

Ver perfil do usuário
avatar
Administrador

em Sab Fev 20, 2016 7:45 pm
Olá!

Infelizmente, é um pouco mais complexo que isso. Na verdade essa aba onde eu coloquei o Servidor 2, já existia. Era onde apareciam as opções de conexão, certo? Apenas achei mais lógico deixar os servidores nas laterais e a conexão ao fórum na parte superior.

Eu analisei o código, e como pode ver eu alterei a class de [codebox]nav[/codebox]. Eu as encontrei no código e apliquei as.

Código:
         <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
        <h3>Fórum</h3>
                  <a href="/f">Acessar</a>
                  <a href="/l">Logar</a>
                  <a href="/r">Registrar-se</a>
      </nav>

Depois criei a seguinte função, me baseando nas outras e nas variáveis já definidas:

Código:
       showTop.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-down' );
            classie.toggle( menuTop, 'cbp-spmenu-open' );
            disableOther( 'showBottom');
        };

E por fim adicionei o botão:

Código:
             <button id="showTop" class="animated bounceInUp">Fórum</button>

O que restaria agora também, caso quisesse adicionar outra aba seria a aba inferior. Para a criar, terá de proceder de forma lógica, como eu o fiz. Caso precise de mais explicações, não hesite.

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Fev 20, 2016 7:55 pm
Era por causa do maldito showTop.oneclick que eu não estava dando conta de fazer, o resto estava fazendo tudo certo...
-
Poderia dar uma ultima ajuda aqui:
Código:
<button id="showRightPush" class="animated bounceInUp"><a href="http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html" target="blank">Download GTA</a></button>
Queria mudar isso, porque ele não está clicável, e na verdade queria colocar ele para abrir para lateral ou no superior, (tempo como colocar no inferior?) porque queria colocar nome de ''Info GTA'' ai dentro disso o download pro SA-MP no site original, e o link de pesquisa para download do GTA SA no google.

Ver perfil do usuário
avatar
Administrador

em Sab Fev 20, 2016 8:04 pm
Veja assim:

Código:
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MMSA OFICIAL™</title>
      <meta name="description" content="MMSA OFICIAL™" />
      <meta name="keywords" content="SA:MP - DM" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 85px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 1.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}
  .cbp-spmenu-push-down {
      top: 100px;
  }
/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }
  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://i.imgur.com/9eLbrQE.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
      <embed src="https://www.youtube.com/v?v=_DzAI9QrkWU&autoplay=1" style="width: 1px; height: 1px;"/>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Servidores 2</h3>
                  <a href="/f">SERVER 2</a>
                  <a href="/l">SERVER 2</a>
                  <a href="/r">SERVER 2</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://167.114.133.208:7778">SA-MP 0.3.7-R2</a>
        <a href="ts3server://mmsa.ts3play.com">TeamSpeak3</a>
      </nav>
          <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
        <h3>Fórum</h3>
                  <a href="/f">Acessar</a>
                  <a href="/l">Logar</a>
                  <a href="/r">Registrar-se</a>
      </nav>
              <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
        <h3>INFO GTA</h3>
                  <a href="/f">Acessar</a>
      </nav>
      <div class="container">
        <header class="clearfix">
          <center><h3><span class="animated BounceInUp">BEM-VINDO(a) AO FÓRUM DO MATA MATA SAN ANDREAS OFICIAL™</span></h3></center>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showTop" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
              <button id="showLeftPush" class="animated bounceInDown">Servidores 2</button>
              <button id="showBottom" class="animated bounceInUp">Info GTA</button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">

      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };
        showTop.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-down' );
            classie.toggle( menuTop, 'cbp-spmenu-open' );
            disableOther( 'showBottom' );
        };
                showBottom.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuBottom, 'cbp-spmenu-open' );
            disableOther( 'showTop' );
        };
        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>
          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </body>
</html>

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Fev 20, 2016 8:10 pm
Nossa Rafael, você é realmente bom.. Deu certo.
-
Não fecha o tópico ainda, vou dar uma estudada no cod aqui, caso tenha dúvida, eu pergunto aqui, caso contrario eu edito o post dizendo que pode fechar.

Ver perfil do usuário
avatar
Administrador

em Sab Fev 20, 2016 8:12 pm
Tudo certo amigo, o tópico será fechado quando você desejar!

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Fev 20, 2016 10:48 pm
Rafael, é possivel fazer isso;
Quando clico no acesso rápido em ''Servidores'' o acesso vem para esquerda.. normal
Se eu clico em ''Fórum'' com o ''Servidores'' não selecionado o centro ''acesso'' vai para direita.. normal
Porém quando eu clico em ''Fórum'' ele vai para direita mas quando clico em ''Servidor'' com ''Fórum'' selecionado ele volta pra esquerda ficando assim desalinhado do centro.

Gostaria se possível um modo de quando estiver com o ''Servidor'' selecionado e for clicar em ''Fórum'' ele ficar no centro por atualmente está ficando assim
-
Onde posso mudar o ícone que fica na aba da internet?
É possível acionar um botão pequeno onde possa para a música?

Ver perfil do usuário
avatar
Administrador

em Dom Fev 21, 2016 9:24 pm
Eu estarei analisando melhor o código e quando tiver novidades, postarei aqui.

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Administrador

em Seg Fev 22, 2016 6:44 pm
Troque por este:

Código:
<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MMSA OFICIAL™</title>
     <meta name="description" content="MMSA OFICIAL™" />
     <meta name="keywords" content="SA:MP - DM" />
     <meta name="author" content="Codrops" />
     <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
               <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
     <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
 </head>
<style>
 /* General styles for all menus */
.cbp-spmenu {
 background: #163c52;
 position: fixed;
}

.cbp-spmenu h3 {
 color: #afdefa;
 font-size: 1.9em;
 padding: 20px;
 margin: 0;
 font-weight: 300;
 background: #0d77b6;
}

.cbp-spmenu a {
 display: block;
 color: #fff;
 font-size: 1.1em;
 font-weight: 300;
}

.cbp-spmenu a:hover {
 background: #1c5f85;
}

.cbp-spmenu a:active {
 background: #afdefa;
 color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
 width: 240px;
 height: 100%;
 top: 0;
 z-index: 1000;
}

.cbp-spmenu-vertical a {
 border-bottom: 1px solid #1c5f85;
 padding: 1em;
   -webkit-transition:background 0.5s ease-out;
     -moz-transition:background 0.5s ease-out;
     -o-transition:background 0.5s ease-out;
     -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
 width: 100%;
 height: 85px;
 left: 0;
 z-index: 1000;
 overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
 height: 100%;
 width: 20%;
 float: left;
}

.cbp-spmenu-horizontal a {
 float: left;
 width: 20%;
 padding: 1.8em;
 border-left: 1px solid #1c5f85;
   -webkit-transition:background 0.5s ease-out;
     -moz-transition:background 0.5s ease-out;
     -o-transition:background 0.5s ease-out;
     -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
 left: -240px;
}

.cbp-spmenu-right {
 right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
 left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
 right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
 top: -150px;
}

.cbp-spmenu-bottom {
 bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
 top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
 bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
 overflow-x: hidden;
 position: relative;
 left: 0;
}

.cbp-spmenu-push-toright {
 left: 240px;
}

.cbp-spmenu-push-toleft {
 left: -240px;
}
 .cbp-spmenu-push-down {
     top: 100px;
 }
/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

 .cbp-spmenu-horizontal {
     font-size: 75%;
     height: 110px;
 }

 .cbp-spmenu-top {
     top: -110px;
 }

 .cbp-spmenu-bottom {
     bottom: -110px;
 }

}

@media screen and (max-height: 26.375em){

 .cbp-spmenu-vertical {
     font-size: 90%;
     width: 190px;
 }

 .cbp-spmenu-left,
 .cbp-spmenu-push-toleft {
     left: -190px;
 }
 .cbp-spmenu-right {
     right: -190px;
 }

 .cbp-spmenu-push-toright {
     left: 190px;
 }
}
 /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'fontawesome';
 src:url('../fonts/fontawesome.eot');
 src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
 url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
     url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
     url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}
#lixo {
display:none;
}
body {
   font-family: 'Lato', Calibri, Arial, sans-serif;
   color: #0f354b;
   background: #273749 url("http://i.imgur.com/9eLbrQE.jpg") top no-repeat;
}

a {
 color: #f0f0f0;
 text-decoration: none;
}


.main,
.container > header {
 width: 90%;
 max-width: 69em;
 margin: 0 auto;
 padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
 padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
 font-size: 2.125em;
 line-height: 1.3;
 margin: 0;
 float: left;
 font-weight: 400;
}

.container > header span {
 display: block;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5em;
 padding: 0 0 0.6em 0.1em;
}

.container > header nav {
 float: right;
}

.container > header nav a {
 display: block;
 float: left;
 position: relative;
 width: 2.5em;
 height: 2.5em;
 background: #fff;
 border-radius: 50%;
 color: transparent;
 margin: 0 0.1em;
 border: 4px solid #0f354b;
 text-indent: -8000px;
}

.container > header nav a:after {
 content: attr(data-info);
 color: #0f354b;
 position: absolute;
 width: 600%;
 top: 120%;
 text-align: right;
 right: 0;
 opacity: 0;
 pointer-events: none;
}

.container > header nav a:hover:after {
 opacity: 1;
}

.container > header nav a:hover {
 background: #0f354b;
}

.main > section {
 max-width: 260px;
 width: 90%;
 margin: 0 auto;
}

.main > section h2 {
 font-weight: 300;
 color: #ccc;
}

.main > section button {
 border: none;
 background: #0f354b;
 color: #fff;
 padding: 1.5em;
 display: block;
 width: 100%;
 cursor: pointer;
 margin: 10px 0;
 font-size: 0.8em;
   -webkit-transition:background 0.5s ease-out;
     -moz-transition:background 0.5s ease-out;
     -o-transition:background 0.5s ease-out;
     -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
 background: #1c5f85;
   -webkit-transition:background 0.5s ease-out;
     -moz-transition:background 0.5s ease-out;
     -o-transition:background 0.5s ease-out;
     -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
 background: #0d77b6;
}

.main > section button.disabled {
 background: #aaa;
 pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
 font-family: 'fontawesome';
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 speak: none;
 font-style: normal;
 font-weight: normal;
 line-height: 2;
 text-align: center;
 color: #0f354b;
 -webkit-font-smoothing: antialiased;
 text-indent: 8000px;
 padding-left: 8px;
}

.container > header nav a:hover:before {
 color: #fff;
}

.icon-drop:before {
 content: "\e000";
}

.icon-arrow-left:before {
 content: "\f060";
}
span.eddyeowna{
           background: #0f354b;
                               position:fixed;
           right:0px;
           bottom:30px;
           font-size:12px;
             -webkit-animation-name: bounceInDown;
                 animation-name: bounceInDown;
}
       span.eddyeowna a{
           color:#fff;
           text-transform:uppercase;
           text-decoration:none;
           margin-right:30px;
}
       span.eddyeowna a:hover{
           color:#000;
}
                 </style>
      <embed src="https://www.youtube.com/v?v=_DzAI9QrkWU&autoplay=1" style="width: 1px; height: 1px;"/>
 <body class="cbp-spmenu-push">
     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
       <h3>Servidores 2</h3>
                 <a href="/f">SERVER 2</a>
                 <a href="/l">SERVER 2</a>
                 <a href="/r">SERVER 2</a>
     </nav>
     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
       <h3>Servidores</h3>
       <a href="samp://167.114.133.208:7778">SA-MP 0.3.7-R2</a>
       <a href="ts3server://mmsa.ts3play.com">TeamSpeak3</a>
     </nav>
         <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
       <h3>Fórum</h3>
                 <a href="/f">Acessar</a>
                 <a href="/l">Logar</a>
                 <a href="/r">Registrar-se</a>
     </nav>
             <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
       <h3>INFO GTA</h3>
                 <a href="/f">Acessar</a>
     </nav>
     <div class="container">
       <header class="clearfix">
         <center><h3><span class="animated BounceInUp">BEM-VINDO(a) AO FÓRUM DO MATA MATA SAN ANDREAS OFICIAL™</span></h3></center>
       </header>
       <div class="main">
           <section class="buttonset">
                                 <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
             <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
             <button id="showTop" class="animated bounceInUp">Fórum</button>
             <button id="showRightPush" class="animated bounceInDown">Servidores</button>
             <button id="showLeftPush" class="animated bounceInDown">Servidores 2</button>
             <button id="showBottom" class="animated bounceInUp">Info GTA</button>
             <button id="stopMusic" class="animated bounceInDown">Parar Musica</button>
           </section>
       </div>
     </div>
           <span class="eddyeowna">

     <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
     <script src="http://asusgames.esy.es/CSS/classie.js"></script>
             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
     <script>
       var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
           menuRight = document.getElementById( 'cbp-spmenu-s2' ),
           menuTop = document.getElementById( 'cbp-spmenu-s3' ),
           menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
           showLeft = document.getElementById( 'showLeft' ),
           showRight = document.getElementById( 'showRight' ),
           showTop = document.getElementById( 'showTop' ),
           showBottom = document.getElementById( 'showBottom' ),
           showLeftPush = document.getElementById( 'showLeftPush' ),
           showRightPush = document.getElementById( 'showRightPush' ),
           body = document.body;
       showLeftPush.onclick = function() {
           classie.toggle( this, 'active' );
           classie.toggle( body, 'cbp-spmenu-push-toright' );
           classie.toggle( menuLeft, 'cbp-spmenu-open' );
           disableOther( 'showLeftPush' );
       };
       showRightPush.onclick = function() {
           classie.toggle( this, 'active' );
           classie.toggle( body, 'cbp-spmenu-push-toleft' );
           classie.toggle( menuRight, 'cbp-spmenu-open' );
           disableOther( 'showRightPush' );
       };
       showTop.onclick = function() {
           classie.toggle( this, 'active' );
           classie.toggle( body, 'cbp-spmenu-push-down' );
           classie.toggle( menuTop, 'cbp-spmenu-open' );
           disableOther( 'showBottom' );
       };
               showBottom.onclick = function() {
           classie.toggle( this, 'active' );
           classie.toggle( menuBottom, 'cbp-spmenu-open' );
           disableOther( 'showTop' );
       };
       function disableOther( button ) {
           if( button !== 'showLeft' ) {
             classie.toggle( showLeft, 'disabled' );
           }
           if( button !== 'showRight' ) {
             classie.toggle( showRight, 'disabled' );
           }
           if( button !== 'showTop' ) {
             classie.toggle( showTop, 'disabled' );
           }
           if( button !== 'showBottom' ) {
             classie.toggle( showBottom, 'disabled' );
           }
           if( button !== 'showLeftPush' ) {
             classie.toggle( showLeftPush, 'disabled' );
           }
           if( button !== 'showRightPush' ) {
             classie.toggle( showRightPush, 'disabled' );
           }
       }
       $('#stopMusic').click(function() { $(this).fadeOut(); $('embed').remove(); });
     </script>
         <div id="lixo">
     <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
     </div>
 </body>
</html>

No código procure por:

Código:
<link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">

E substitua o conteúdo dentro do [codebox]href[/codebox] para o link da imagem desejada.

Até mais.

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Ter Fev 23, 2016 1:16 am
Rafel, muito obrigado, está tudo indo tudo nos conformes, caso tenha dúvidas futuras crio outro tpc.
-
Thanks!

Ver perfil do usuário
avatar
Administrador

em Ter Fev 23, 2016 9:23 pm
[sucesso="Questão Resolvida"]O autor considerou sua dúvida resolvida e a mesma será arquivada![/sucesso]

Ver perfil do usuário http://techmais.forumeiros.com
Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum