Tech Mais
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

techadd

Entrar

descriptionResolvidoPagina inicial HTML

more_horiz
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/

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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)

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
@PaladinoS Como faço pra tornar clicável o ''Fórum Servidor, etc'' e abrir aquela janela lateral com as opções?

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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>

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
@PaladinoS agora está funcionando, é como mudo a imagem de fundo?

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
Procure no CSS

Código:

http://i.imgur.com/cW2QBtL.jpg?1

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
@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..

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
Eu vejo que o senhor já conseguiu deixar o botão do Teamspeak clicável, a sua dúvida persiste?

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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!

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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...

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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>

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
Tudo certo amigo, o tópico será fechado quando você desejar!

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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?

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
Eu estarei analisando melhor o código e quando tiver novidades, postarei aqui.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
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.

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
Rafel, muito obrigado, está tudo indo tudo nos conformes, caso tenha dúvidas futuras crio outro tpc.
-
Thanks!

descriptionResolvidoRe: Pagina inicial HTML

more_horiz
[sucesso="Questão Resolvida"]O autor considerou sua dúvida resolvida e a mesma será arquivada![/sucesso]

descriptionResolvidoRe: Pagina inicial HTML

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