Menu fixo superiorE ae galerinha blz? Mais um tutorial atualizado aqui, neste tutorial você vai ter acesso a base de um menu superior que fica no topo do seu fórum, eu chamo de base por que através deste código você pode fazer muitas coisas legais.Descrição: Código totalmente personalizável que dispõe de links editável a seu gosto.

Versões de funcionamento: Todas as versões.

1º Passo - Instalar o código HTML
Os códigos #HTML são normalmente colocados em #Widgets ou então na página inicial, neste caso iremos utilizar um #módulo de Widget, para #adicionar um módulo, vá até Painel de Controle > Módulos > Portal & Widgets > Gestão de Widgets do fórum > ... Aqui você cria um Widget novo.

Preencha-o da seguinte forma:
Nome do widget: Menu fixo superior SGBR™
Utilizar um table type: Não
Título do widget: Menu fixo superior SGBR™
Fonte do widget * :

Código:

<div id="top-bar-menu">
  <img id="logo-do-sgbr" src="http://i31.servimg.com/u/f31/17/71/75/73/logo10.png" />
  <div id="lista-de-menus">
    <a id="mnu-home" href="/forum">HOME</a>
    <a id="menu-n1">menu1</a>
    <a id="menu-n1">menu2</a>
    <a id="menu-n1">menu3</a>
    <a id="menu-n1">menu4</a>
  </div>
</div>

Salve este módulo e vamos ao próximo passo.

2º Passo - Instalando o estilo com CSS
Os códigos CSS tem a função de determinar estilos e posições, e é exatamente esta a #função do código a baixo.
Para adicioná-lo ao seu fórum vá até a sua página de #estilos #CSS que se localiza em Painel de controle > Visualização > Imagens e Cores > Cores > Aba "Folha de estilo CSS" ...
Coloque o seguinte código bem em cima de todo o código desta página.

Código:

/* Menu fixo superior SGBR™ */
#textlogo {
    z-index: 1 !important;
}
#logo-do-sgbr {
    position: relative;
    float: left;
    margin-left: 60px;
    margin-top: 5px;
    height: 90px;
}
#top-bar-menu a:hover {
    transition: none;
    text-decoration: none !important;
    color: #fff;
}
#top-bar-menu a {
    transition: none;
    text-decoration: none !important;
    color: gray;
}
#lista-de-menus {
    top: 24%;
    position: relative;
    float: right;
    right: 100px;
}
#menu-n1:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.3) url(http://i83.servimg.com/u/f83/17/71/75/73/11_tra10.png);
    background-repeat: no-repeat;
    background-position: top 20% left 50%;
    background-size: 25px 25px;
}
#menu-n1 {
    font-weight: bold;
    margin-right: 3px;
    background-size: 25px 25px;
    float: left;
    background: transparent url(http://i83.servimg.com/u/f83/17/71/75/73/11_tra10.png);
    background-repeat: no-repeat;
    background-position: top 20% left 50%;
    background-size: 25px 25px;
    position: relative;
    padding: 30px 15px 5px 15px;
    border-radius: 3px;
    color: gray;
}
#mnu-home:hover {
    color: #fff;
}
#mnu-home {
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 6px rgba(0, 0, 0, 0.8) inset;
    margin-right: 3px;
    float: left;
    background: rgba(0, 0, 0, 0.3) url(http://i83.servimg.com/u/f83/17/71/75/73/12_tra10.png);
    position: relative;
    padding: 30px 15px 5px 15px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: top 20% left 50%;
    background-size: 25px 25px;
    color: gray;
}
#top-bar-menu {
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100%;
    background: url("http://i83.servimg.com/u/f83/17/71/75/73/brandi10.png") repeat-x scroll 0% 0% transparent;
}
/* TUTORIAL = ( http://staffergroupbr.stuning.net/t1574-menu-fixo-superior ) */

Clique em Salvar!

• Resultado:
  

---

© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: D'Leandro™ Site: http://staffergroupbr.stuning.net/t1574-menu-fixo-superior

Obrigado por compartir!

Obrigado pelo compartilhamento, estarei testando.