Painel do usuário

por iHeloadd Ter 23 Out 2012 - 21:20

Qual é minha questão:
Olá, eu coloquei este código para ter um painel do usuário em cima do logo:

CSS:

#conectFor * {
font-size: 12px;
}
#conectFor{
padding: 13px;
padding-right : 20px;
text-align: right;
background: #323232;
border-bottom: 1px solid #000;
font: 15px Tahoma;
height: 10px;
display: block;
color: #F1F1F1;
position: relative;
top: 0;
left: 0;
right: 0;
}
#conectFor a{
color:#f1f1f1;
font-family:Arial;
padding:8px 5px ;
margin:0 1px;
text-decoration:none;
}
#conectFor a:hover{
color:#111;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-o-border-radius:5px 5px 0 0;
background:#f1f1f1;
}
#conectFor a:hover ul{display:inline;}
#conectFor ul {
margin-top: -1px;
z-index:1;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
top: 100%;
width: 390px;
padding:20px 13px;
color: #333;
background: #F1F1F1 url(https://i.servimg.com/u/f42/17/32/13/00/letrei10.png) no-repeat bottom right;
list-style: none;
display: none;
float: left;
right: 0em;
position: absolute;
}
#conectFor ul li{
float: left;
width: 47%;
display: inline;
text-align:left;
margin:5px;
}
#conectFor ul li a{color:#3689D1; background-image:none !important;}
#conectFor ul li a:hover{color:#111; background:transparent;}

#conectFor a[href="/profile?mode=editprofile"] {
background-position: right;
background-repeat: no-repeat;
padding-right: 10px;
background-image: url(https://i.servimg.com/u/f42/17/32/13/00/dropdo10.png);
}

#conectFor a[href="/profile?mode=editprofile"]:hover {
background-image: url(https://i.servimg.com/u/f42/17/32/13/00/dropdo11.png);
}

/*----- Retirar imagens no final do forum -------*/
ul#picture_legend {
display: none;
}

JavaScript:

$(document).ready(function(){
var nick = ($('#logout').length) ? $('#logout img').attr('alt').replace('Sair', '').replace('[', '').replace(']', '') : '' ;
var con=($('#logout').length)?'<a href="/profile?mode=editprofile" style="position: relative;">Conectado como '+nick+'<ul></ul></a><a href="/login?logout=1">Sair</a>' : 'Bem vindo ao BR-Design!<a href="/login"style="position: relative;">Login</a><a href="/register">Criar Conta</a>';$('body').prepend(' '+con+'');$('#conectFor ul').prepend('<li><a href="/profile?mode=editprofile">Informações</a></li><li><a href="/profile?mode=editprofile&page_profil=preferences">Preferencias</a></li><li><a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a></li><li><a href="/search?search_id=draftsearch">Rascunhos</a></li><li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a></li><li><a href="/profile?mode=editprofile&page_profil=attachments">Anexos</a></li><li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li><li><a href="/search?search_id=watchsearch"class="offp">Topicos Supervisionados</a></li><li><a href="/search?search_id=favouritesearch"target="_blank">Tópicos favoritos</a></li><li><a href="/search?search_id=newposts"target="_blank">Novas mensagens</a></li>')});

Mais tem 2 problemas, quando se passa o mouse em cima do painel do usuario ja aparece o menu, eu gostaria de que tivesse como clicar para aparecer e tem outro problema, tem la as opções, mais quando o mouse não esta em cima de uma opção ele ainda fica tipo quando ta em cima de um link, tem como mudar para quando clicar apenas em cima das opções para ele ir em uma pagina?

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://brdesign.forumeiro.com/

Versão do meu fórum:
PHPBB3

por Hyouki Ter 23 Out 2012 - 21:28

Olá amigo , substitua o JS , por este .

Código:: $(document).ready(function(){ var nick = ($('#logout').length) ? $('#logout img').attr('alt').replace('Sair', '').replace('[', '').replace(']', '') : '' ; var con=($('#logout').length)?'<a href="/profile?mode=editprofile" style="position: relative;">Conectado como '+nick+'<ul></ul></a><a href="/login?logout=1">Sair</a>' : 'Bem vindo Visitante!<a href="/login"style="position: relative;">Login</a><a href="/register">Criar Conta</a>';$('body').prepend(' '+con+'');$('#conectFor ul').prepend('<li><a href="/profile?mode=editprofile">Informações</a></li><li><a href="/profile?mode=editprofile&page_profil=preferences">Preferencias</a></li><li><a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a></li><li><a href="/search?search_id=draftsearch">Rascunhos</a></li><li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a></li><li><a href="/profile?mode=editprofile&page_profil=attachments">Anexos</a></li><li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li><li><a href="/search?search_id=watchsearch"class="offp">Topicos Supervisionados</a></li><li><a href="/search?search_id=favouritesearch"target="_blank">Tópicos favoritos</a></li><li><a href="/search?search_id=newposts"target="_blank">Novas mensagens</a></li>')});

por Hyouki Ter 23 Out 2012 - 21:30

Olá , ia esquecendo ! adiciona a sua css .

Código:: /*---Barra IPB [ Lucasxd111 ]----*/ #conectFor * { font-size: 12px; } #conectFor{ padding: 13px; padding-right : 20px; text-align: center; background: #111; font: 15px Tahoma; height: 10px; display: block; color: #F1F1F1; position: absolute; top: 0; left: 66%; width:18em; border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; box-shadow:inset 0 0px 5px #000; -moz-box-shadow:inset 0 0px 5px #000; -webkit-box-shadow:inset 0 0px 5px #000; -o-box-shadow:inset 0 0px 5px #000; border: 1px solid #111; border-top: none !important; } #conectFor a{ color:#f1f1f1; font-family:Arial; padding:8px 5px ; margin:0 1px; text-decoration:none; } #conectFor a:hover{ color:#111; border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -o-border-radius:5px 5px 0 0; background:#f1f1f1; } #conectFor a:hover ul{display:inline;} #conectFor ul { margin-top: -1px; z-index:1; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); top: 100%; width: 390px; padding:20px 13px; color: #333; background: #F1F1F1 url(http://i31.servimg.com/u/f31/17/61/45/85/barra10.png) no-repeat bottom right; list-style: none; display: none; float: left; right: 0em; position: absolute; } #conectFor ul li{ float: left; width: 47%; display: inline; text-align:left; margin:5px; } #conectFor ul li a{color:#3689D1; background-image:none !important;} #conectFor ul li a:hover{color:#111; background:transparent;} #conectFor a[href="/profile?mode=editprofile"] { background-position: right; background-repeat: no-repeat; padding-right: 10px; background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo10.png); } #conectFor a[href="/profile?mode=editprofile"]:hover { background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo11.png); }