Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Css menu maker
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Css menu maker
Qual é minha questão:
Bom eu fiz 2 menus mas não sei instalar.
Ai vai os códigos.
Css do meu fórum:
Html menu Logado:
Css Menu logado:
html Menu convidado:
css Menu convidado:
att.
@EDIT: Quero ele no topo, não em baixo do logo.
Endereço do meu fórum:
http://narutorpgorigens.forumeiros.com
Versão do fórum:
PHPBB3
Bom eu fiz 2 menus mas não sei instalar.
Ai vai os códigos.
Css do meu fórum:
- Código:
body#phpbb {
padding-top: 60px;
}
.forabg span.corners-top, #page-header .corners-top, #page-header .corners-bottom, #page-footer .corners-top, #page-footer .corners-bottom {
display: none;
}
#wrap {
padding: 0;
-moz-box-shadow: 0px 0px 3px #c5c7c7;
-webkit-box-shadow: 0px 0px 3px #c5c7c7;
box-shadow: 0px 0px 3px #c5c7c7;
}
.headerbar {
background: #1F1F1F url(http://i46.servimg.com/u/f46/17/46/69/50/header10.png) repeat-x top left;
margin-top: 0;
position: relative;
z-index: 100;
-moz-box-shadow: 0 -2px 3px #cacaca;
-webkit-box-shadow: 0 -2px 3px #cacaca;
box-shadow: 0 -2px 3px #cacaca;
margin-bottom: 0;
}
#logo-desc {
text-align: left;
}
#page-header .navbar {
position: relative;
height: 86px;
background: none repeat-x left bottom;
margin: 0px 0px 0px 0px;
color: white;
font: bold 11px 'Droid Sans',Arial, Calibri, Verdana, Geneva, sans-serif;
border: 0px solid white;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: url('http://i46.servimg.com/u/f46/17/46/69/50/nav10.png') repeat-x;
}
/*---navbar---*/
#page-body {
padding: 10px 20px 10px 20px;
background: #FFF;
width: 918px;
}
#search-box {
margin-top: 55px;
right: 1px;
position: absolute;
}
#search-box #keywords {
background: white;
border: 1px solid #E7E7E7;
-moz-box-shadow: inset 0px 0px 4px #f4f4f4;
-webkit-box-shadow: inset 0px 0px 4px #f4f4f4;
box-shadow: inset 0px 0px 4px #f4f4f4;
padding: 8px!important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 11px;
vertical-align: middle;
padding: 1px;
border: 1px solid #E7E7E7;
width: 130px;
}
#search-box .button2 {
background: url('http://i46.servimg.com/u/f46/17/46/69/50/search10.png') no-repeat;
color: transparent;
height: 25px;
width: 25px !important;
border: none;
box-shadow: none !important;
margin: 0 40px 0 10px;
}
#search_menu {
left: 500px !important;
top: 40px !important;
background: white;
}
.navbar li a {
color: #616161;
}
ul.topiclist li.header {
display: block;
padding: 5px;
background: #DFDFDF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 100%;
float: left;
}
li.header dl.icon, .post .inner .corners-top {
min-height: 0;
background: #232222 url(http://i46.servimg.com/u/f46/17/46/69/50/forumh10.png) repeat-x left top;
_background-image: none;
padding: 0;
font: normal 13px 'Droid Sans',Arial, Calibri, Verdana, Geneva, sans-serif;
color: white;
clear: both;
float: left;
border: 1px solid #0D0D0D;
width: 100%;
-moz-box-shadow: 0px 0px 3px #080808;
-webkit-box-shadow: 0px 0px 3px #080808;
box-shadow: 0px 0px 3px #080808;
padding: 4px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 23px;
}
.topiclist.forums, ul.topiclist.bg_none {
padding-top: 44px;
}
.topiclist.forums li.row {
margin-bottom: 1px;
border-bottom: 1px solid #EEE;
}
#tabs {
border-bottom: #165B6F 5px solid;
}
#tabs li.activetab {
text-align: center;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 25px;
min-width: 55px;
display: inline;
margin-left: -1;
margin-bottom: -1;
border-radius-topleft: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-style: solid;
border-width: 1px 1px 0px;
border-color: inherit;
color: white;
background-color: #165B6F;
border-color: #114857;
background-image: url('http://i46.servimg.com/u/f46/17/46/69/50/btn-bg10.png');
background-repeat: repeat-x;
}
#tabs li.activetab a span {
color: white !important;
}
a.button1, a.button2, input.button1, input.button2 {
background: #1E7D98 url(http://i46.servimg.com/u/f46/17/46/69/50/btn-bg11.png) top left repeat-x;
border: 1px solid #3b3b3b;
padding: 5px 12px;
cursor: pointer;
color: white;
font-weight: bold;
-moz-box-shadow: 0px 0px 3px #d3d3d3;
-webkit-box-shadow: 0px 0px 3px #d3d3d3;
box-shadow: 0px 0px 3px #d3d3d3;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
a.button1:hover, a.button2:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background-position: 0 100%;
border: 1px solid black;
color: white;
background: #3b3b3b url(http://i.imgur.com/apO52QN.gif) top left repeat-x;
}
#profile-advanced-layout {
float: right;
width: 100%;
position: relative;
}
#profile-advanced-right {
float: right;
width: 300px;
}
blockquote::before, blockquote::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #EEE, #EEE 35%, #F3A01E 35%, #F3A01E 45%, #D05D2A 45%, #D05D2A 55%, #9DC425 55%, #9DC425 65%, #EEE 65%, #EEE);
background-image: -moz-linear-gradient(left, #EEE, #EEE 35%, #F3A01E 35%, #F3A01E 45%, #D05D2A 45%, #D05D2A 55%, #9DC425 55%, #9DC425 65%, #EEE 65%, #EEE);
background-image: -ms-linear-gradient(left, #EEE, #EEE 35%, #F3A01E 35%, #F3A01E 45%, #D05D2A 45%, #D05D2A 55%, #9DC425 55%, #9DC425 65%, #EEE 65%, #EEE);
background-image: -o-linear-gradient(left, #EEE, #EEE 35%, #F3A01E 35%, #F3A01E 45%, #D05D2A 45%, #D05D2A 55%, #9DC425 55%, #9DC425 65%, #EEE 65%, #EEE);
}
/*---footer----*/
#page-footer {
background: none repeat scroll 0 0 tranparent;
border: 1px solid #DBDBDB;
min-height: 120px;
border-top: 0;
}
.footer-home {
background: url('http://i46.servimg.com/u/f46/17/46/69/50/home10.png') no-repeat;
width: 300px !important;
height: 50px !important;
}
.icon-home {
display: none;
}
.footer-home::before {
content: "Satinacious skin by DigitalvB";
display: block;
margin-top: 40px;
}
.footer-home::after {
content: "Converted to Fm by Ligerv";
display: block;
}
/*-----viewtopic----*/
.inner .corners-bottom {
background-image: none !important;
margin: 0 !important;
padding-top: 6px;
background: #F7F7F7;
height: 46px !important;
}
.inner span.corners-bottom span {
background-position: 0;
background: #F7F7F7 url(http://i46.servimg.com/u/f46/17/46/69/50/forumh11.png) top center no-repeat;
height: 46px;
}
.topic-actions ~ .post .inner span.corners-top span {
background: url(http://i46.servimg.com/u/f46/17/46/69/50/ibx8db10.png) no-repeat;
border-radius: 2px;
position: relative;
height: 12px;
width: 52px;
margin: 7px 4px 5px 10px;
}
.topic-actions ~ .post.online .inner span.corners-top span {
background: url(http://i46.servimg.com/u/f46/17/46/69/50/iniciu10.png) no-repeat;
border-radius: 2px;
position: relative;
height: 12px;
width: 52px;
margin: 7px 4px 5px 10px;
}
p.author {
margin-top: 10px;
}
.postbody h2.topic-title a {
font-size: 12px;
color: white;
}
.postbody h2.topic-title {
border: none;
margin: -27px 0 0 -20px !important;
position: absolute;
}
.postprofile {
background: transparent url(http://i46.servimg.com/u/f46/17/46/69/50/paper-10.png) no-repeat right top;
margin: 0;
padding-top: 15px;
}
/*----New Statistics for PHPbb3 by ligerv----*/
div.clear + div.h3 {
display: none;
}
div.h3 {
font-size: 12px;
font-weight: bold;
color: white;
background: #FF3300 url(http://i.imgur.com/BdJcxn4.png) repeat-x left top ;
_background-image: none;
border: 1px solid #114857;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 10px;
}
div.h3 a[href="/viewonline"] {color : transparent;}
div.h3 a[href="/viewonline"]::before {
content: "What's Going On?";
color : #fff;
}
#i_whosonline + p {
border-bottom: 1px solid #E3E3E3;
min-height: 50px;
padding: 15px 0 15px 60px;
background: url('http://i46.servimg.com/u/f46/17/46/69/50/users_10.png') no-repeat 15px center;
padding: 5px 0 5px 60px;
}
#i_whosonline + p br + br {
display: none;
}
#i_whosonline + p em {
display: block;
}
#page-body p.page-bottom {
margin: 0;
margin-left: 60px;
}
div.clear + div.h3 + p + p.page-bottom {
background: url('http://i46.servimg.com/u/f46/17/46/69/50/forum_12.png') no-repeat 15px center;
margin-left: 0 !important;
padding-left: 60px;
position: absolute;
height: 40px;
}
div.clear + div.h3 + p + p + p.page-bottom {
margin-top: 15px !important;
}
div.clear + div.h3 + p + p.page-bottom {
background: url('http://i46.servimg.com/u/f46/17/46/69/50/forum_13.png') no-repeat 15px top;
margin-left: 0 !important;
padding-left: 60px;
position: absolute;
height: 40px;
margin-top: -15px !important;
padding-top: 15px;
}
a[href="/u1"] span {text-shadow: 0px 0px 5px red;font-family: Jellyka BeesAntique Handwriting;}
h2.chatbox-title a.chat-title {color: #000000 !important;}
#chatbox_main_options a, h2.chatbox-title a.chat-title
{
color: #000000 !important;
}
.avatar-index { float: left; }
.avatar-index img { width: 40px; height: 40px; padding: 1px; border: 1px solid #cfcfcf; margin: 0 5px;padding: 1px;}
.table-title h2 {background: none repeat scroll 0% 0% rgb(69, 75, 77) !important;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2) inset;
font-size: 1,5em;
font-weight: 700;
margin-left: 35%;
margin-top: -2px;
padding: 5px;
text-align: center;
text-shadow: 0px 0px 5px rgb(0, 0, 0);
width: 200px;}
div.h3 {
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 3px #080808;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 0 3px #080808;
_background-image: none;
background: #232222 url(http://i46.servimg.com/u/f46/17/46/69/50/forumh10.png) repeat-x left top;
border: 1px solid #0D0D0D;
border-radius: 3px;
box-shadow: 0 0 3px #080808;
clear: both;
color: #fff;
float: left;
font-family: 'Droid Sans',Arial,Calibri,Verdana,Geneva,sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 23px;
min-height: 0;
padding: 4px 0;
width: 100%;
}
#chatbox_footer .right div[class][id]{height:20px;margin-right:0;border:0;border-right:1px solid #CFCFCF;background-color:#f5f5f5;padding:7px;cursor:default}#chatbox_footer .right div[class][id]:first-child{border-left:1px solid #CFCFCF}#chatbox_main_options span,#chatbox_main_options label,#chatbox_main_options a{height:34px;margin-right:0;border:0;border-right:1px solid #CFCFCF;background-color:#f5f5f5;padding:7px;color:#000;padding-top:14px}#chatbox_main_options{position:absolute;bottom:0;left:0;z-index:1;color:#818181!important;height:34px;font-size:0;margin:0;margin-bottom:-25px}#chatbox_main_options li a[onclick*="ajax_refresh_chatbox"]{font-size:0;background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) no-repeat center #f5f5f5;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #CFCFCF;cursor:default}#chatbox_main_options a[href="/chatbox/index.forum?archives=1"],#chatbox_main_options a[href="/chatbox/index.forum?archives"]{font-size:0;background:url(http://www.dreamtemplate.com/dreamcodes/web_icons/gray-archive-icon.png) no-repeat center whiteSmoke;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #CFCFCF;cursor:default}#chatbox_main_options a[href="/chatbox/index.forum?archives"]{background-color:#E6E6E6}#chatbox_main_options li a[onclick="CB_disconnect();"]{border-right:0;padding:0}#chatbox_main_options li a[onclick="CB_disconnect();"] span{font-size:0;background:url(http://i.imgur.com/xXA8w.gif) no-repeat 50% 50% #f5f5f5;padding-top:25px;padding-bottom:9px;padding-right:31px;border-top:1px solid #CFCFCF;cursor:default}#chatbox_footer{padding:0;background:url() #f5f5f5;border-top:1px solid #CFCFCF;display:block!important;border-radius:0}#chatbox_messenger_form .right {padding:0;font-size:0}#chatbox_messenger_form .right input#message{height:34px;font-weight:normal;background-color:white;background-image:url();border:0;height:34px;margin-bottom:0;font-size:16px;cursor:default;padding:0 0 0 5px;outline:none;width:304px}#chatbox_messenger_form .right input[name="submit_button"]{height:33px;font-size:15px;border:0;background-color:transparent;padding-left:10px;padding-right:11px;margin-left:-4px;cursor:default;font-weight:normal}#chatbox_messenger_form .right img[src="http://2img.net/i/fa/subsilver/wysiwyg/menupop.gif"],#chatbox_members h4.member-title,#chatbox_main_options li#chatbox_option_autorefresh,#chatbox p.clearfix span.date-and-time,#chatbox p.clearfix:hover span.date-and-time{display:none}#chatbox_header{height:0;font-size:0}#chatbox{top:32px;left:0}#chatbox p.clearfix:first-child{padding-top:8px}#chatbox_members{position:absolute;z-index:1;height:31px;left:0;top:0;width:100%;background:url(http://www.addthis.com/forum/styles/addthis2/theme/images/whosonline.gif) 8px -3px no-repeat white;overflow-y:hidden;border-bottom:1px solid #CFCFCF}#chatbox_members li{display:inline;margin-right:0}#chatbox_members a:last-child:after{content:', '}#chatbox_members li:last-child a:last-child:after{content:''}#chatbox_members ul{padding-top:8px;font-size:12px;margin:0;overflow-y:hidden;overflow-x:auto;margin-left:46px;padding-right:8px;padding-bottom:0;white-space:nowrap;height:23px;max-width:none}#chatbox_footer #chatbox_messenger_form .right .fontbutton:hover,#chatbox_header #chatbox_main_options.chatbox-options a:hover,#chatbox_header #chatbox_main_options.chatbox-options span:hover,#chatbox_messenger_form .right input[name="submit_button"]:hover{background-color:#CFCFCF!important}#chatbox_footer #chatbox_messenger_form .right .fontbutton.fontbutton_selected{background-color:#E6E6E6}#chatbox p.clearfix{background-color:#EDEFF4;margin:0;padding:5px;padding-left:0;margin-left:7px;margin-right:7px}#chatbox p.clearfix span.user,#chatbox p.clearfix .msg,#chatbox_main_options li{font-size:0}#chatbox p.clearfix .msg,#chatbox p.clearfix span.user *{font-family:Verdana;font-size:12px}.user a[href*="/u"]{margin-right:8px}.user span:first-child strong{margin-right:4px}.user span:last-child strong{margin-right:0}a[onclick*="ajax_refresh_chatbox"]:hover{background:url(http://www.arecontvision.com/cool_captcha/icon-reload.gif) 50% 50% no-repeat #000!important}#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"]{font-size:15px;font-style:normal!important;margin-left:-66px;background-color:#EDEFF4}#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child{font-size:0px}#chatbox p.chatbox_row_1.clearfix:first-child span[title]:first-child{visibility:hidden}#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child:before{margin-left:7px;background:url(http://i.imgur.com/xXA8w.gif) top left no-repeat;background-size:20px;padding-left:22px;content:'Entre para conversar';font-size:15px}#chatbox_contextmenu{z-index:1}#chatbox_messenger_form{margin-top:0px}.user-msg{display:inline-block;padding-left:38px;background:url(http://i.imgur.com/BMdww.gif) no-repeat top left;background-size:32px 32px;min-height:32px}.user-msg .msg{display:block}.user-msg .msg span{border-image-width:0px;border:0px;border-image-source:url(http://i.imgur.com/BMdww.gif)}
div.postprofile dl dt img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
div.postprofile dl dt img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
Html menu Logado:
- Código:
<div id='cssmenu'>
<ul>
<li><a href='http://narutorpgorigens.forumeiros.com/forum'><span>Fórum</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/portal'><span>Portal</span></a></li>
<li class='has-sub'><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a>
<ul>
<li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=preferences'><span>Preferências</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=signature'><span>Assinatura</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li>
<li class='last'><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=friendsfoes'><span>Amigos e Ignorados</span></a></li>
</ul>
</li>
<li><a href='http://narutorpgorigens.forumeiros.com/memberlist'><span>Membros</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/privmsg?folder=inbox'><span>Mensagens Privadas</span></a></li>
<li class='last'><a href='http://narutorpgorigens.forumeiros.com/login?logout'><span>Sair</span></a></li>
</ul>
</div>
Css Menu logado:
- Código:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background: url(highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background: url(highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: url(hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
border-left: 4px solid #d64e34;
background: url(hover.png) repeat;
}
#cssmenu > ul ul li a:active{
background: url(menu-bg.png) repeat;
}
html Menu convidado:
- Código:
<div id='cssmenu'>
<ul>
<li><a href='http://narutorpgorigens.forumeiros.com/forum'><span>Fórum</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/portal'><span>Portal</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/memberlist'><span>Membros</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/groups'><span>Grupos</span></a></li>
<li><a href='http://narutorpgorigens.forumeiros.com/register'><span>Registre-se</span></a></li>
<li class='last'><a href='http://narutorpgorigens.forumeiros.com/login'><span>Login</span></a></li>
</ul>
</div>
css Menu convidado:
- Código:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background: url(highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background: url(highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: url(hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
border-left: 4px solid #d64e34;
background: url(hover.png) repeat;
}
#cssmenu > ul ul li a:active{
background: url(menu-bg.png) repeat;
}
att.
@EDIT: Quero ele no topo, não em baixo do logo.
Endereço do meu fórum:
http://narutorpgorigens.forumeiros.com
Versão do fórum:
PHPBB3
Última edição por Legollas em 06.03.13 18:40, editado 2 vez(es) (Motivo da edição : @EDIT: Quero ele no topo, não em baixo do logo.)
Re: Css menu maker
Vá em:
<blockquote>
Módulos > Portal e Widgets > Gestão dos Widgets do Forúm >> Criar um Widget personalizado.</blockquote>
Nome do widget : Coloque Menu convidado;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Siga os passos abaixo:
Podemos ver quando estamos montando o menu, que tem 3 abas na área de visualização:
Vamos primeiro montar o menu para quem está logado. Em Fonte do widget * : cole o código abaixo:
Salve o Widjet
Após salvar clique no botão destacado na img:
Marque apenas 'Convidado'
Agora, crie um novo widget. Com o seguinte conteúdo.
Nome do widget : Coloque Menu logado;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Siga os passos abaixo:
Após salvar clique no botão destacado na img:
Desmarque 'Convidados' e marque todas as outras opções.
<blockquote>
Módulos > Portal e Widgets > Gestão dos Widgets do Forúm >> Criar um Widget personalizado.</blockquote>
Nome do widget : Coloque Menu convidado;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Siga os passos abaixo:
Podemos ver quando estamos montando o menu, que tem 3 abas na área de visualização:
Vamos primeiro montar o menu para quem está logado. Em Fonte do widget * : cole o código abaixo:
- Clique para ver o codigo:
- Código:
<script>$(document).ready(function(){
$('body').prepend("<div id='backgroundmenu'><div id='cssmenu'><ul><li><a href='http://narutorpgorigens.forumeiros.com/forum'><span>Fórum</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/portal'><span>Portal</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/memberlist'><span>Membros</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/groups'><span>Grupos</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/register'><span>Registre-se</span></a></li><li class='last'><a href='http://narutorpgorigens.forumeiros.com/login'><span>Login</span></a></li></ul></div></div>");});</script><style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background: url(highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background: url(highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: url(hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
border-left: 4px solid #d64e34;
background: url(hover.png) repeat;
}
#cssmenu > ul ul li a:active{background: url(menu-bg.png) repeat; }
#backgroundmenu {position: relative; width: 100%;}
</style>
Salve o Widjet
Após salvar clique no botão destacado na img:
Marque apenas 'Convidado'
Agora, crie um novo widget. Com o seguinte conteúdo.
Nome do widget : Coloque Menu logado;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Siga os passos abaixo:
- Clique para ver o codigo:
- Código:
<script>$(document).ready(function(){
$('body').prepend("<div id='backgroundmenu'><div id='cssmenu'><ul><li><a href='http://narutorpgorigens.forumeiros.com/forum'><span>Fórum</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/portal'><span>Portal</span></a></li><li class='has-sub'><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a><ul><li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=preferences'>]<span>Preferências</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=signature'><span>Assinatura</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=avatars'><span>Avatar</span></a></li><li class='last'><a href='http://narutorpgorigens.forumeiros.com/profile?mode=editprofile&page_profil=friendsfoes'><span>Amigos e Ignorados</span></a></li></ul></li><li><a href='http://narutorpgorigens.forumeiros.com/memberlist'><span>Membros</span></a></li><li><a href='http://narutorpgorigens.forumeiros.com/privmsg?folder=inbox'><span>Mensagens Privadas</span></a></li><li class='last'><a href='http://narutorpgorigens.forumeiros.com/login?logout='><span>Sair</span></a></li></ul></div></div>");});</script>
<style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background: url(highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background: url(highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: url(hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
border-left: 4px solid #d64e34;
background: url(hover.png) repeat;
}
#cssmenu > ul ul li a:active{
background: url(menu-bg.png) repeat;
}
#backgroundmenu {position: relative; width: 100%;}
</style>
Após salvar clique no botão destacado na img:
Desmarque 'Convidados' e marque todas as outras opções.
Re: Css menu maker
Saudações!
O senhor deseja coloca-lo no menu? Se sim, infelizmente não há como amigo, apenas por edições de Templates. Perdoe-me se entendi errado, ou simplifique mais.
Até mais!
O senhor deseja coloca-lo no menu? Se sim, infelizmente não há como amigo, apenas por edições de Templates. Perdoe-me se entendi errado, ou simplifique mais.
Até mais!
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos