São puro CSS,não pesam na paginas,deixam um aspecto excelente visualmente e alguns códigos podem ser aplicados em outras areas como um Double Border no Main Body,no header e onde a imaginação do programador preferir.
É claro,depende do programador testar e adicionar códigos e se aperfeiçoar,tudo depende do gráu de interesse a vivacidade e raciocinio junto com a criatividade.
Esses são apenas para CSS,não sou entusiasta de JAVA e nem Flashs com SubMenus levando a links interminaveis e dificultando a navegação do internauta e impedindo a validação para outros navegadores,mas é preciso preservar o minimo de beleza e cores do site.
Costumo usalos em templates para Mambo,mas são perfeitamentes aplicaveis em CSS,inclusive este site.
Este aqui foi para um template que validou mesmo com Flash,não tenho ele mais em nenhum host,mas serve de exemplo.
Veja que o Double border esta ativo no Layout.
Código de linha dupla do Layout:
border:8px double #112b4d;
#pagewidth{
width:740px;
text-align:left;
min-width: 500px;
margin-left:auto;
margin-right:auto;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
border:8px double #112b4d;
}
Em alguns casos,dependendo da escrita do código o Hover,e o display: block; não são nescessario,cabe ao programador verificar.
A troca de cores no cursor do mouse acionando os links.
Detalhe do código do menu:
a.mainlevel {
display: block;
color: #000000;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #ebebeb;
width: 116px;
padding: 0.25em 0.5em 0.4em 0.75em;
font-weight: bold;
text-align:center;
font-size: 10px;
}
a.mainlevel:hover {
display: block;
color:#FFFFFF;
background: #3c5a8b;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #39c;
width: 116px;
padding: 0.25em 0.5em 0.4em 0.75em;
font-weight: bold;
text-align:center;
font-size: 10px;
}
Resultado:
#active_menu {
color: blue;
}
Outro exemplo com imagem no menu,os gifs ou JPG tem que estar muito otimizados para não pesar para quem navega com modem.Se houver plobremas teste sem o display block,ele não é preciso em alguns casos.
Exemplo:
Código:
a.mainlevel {
display: block; float: center; text-decoration: none; border: 2px solid;
border-color: #5B5B5B #5B5B5B #5B5B5B #5B5B5B;
background: black url(../images/menu.png) 2px no-repeat;
color: #000000;
font-size: 10px;
font-weight: bold;
}
Um menu horizontal:a.mainlevel:hover {
display: block; float: center; text-decoration: none; border: 2px solid;
border-color: #5B5B5B #5B5B5B #5B5B5B #5B5B5B;
background: black url(../images/menu1.png) 2px no-repeat;
color: #E96414;
font-size: 10px;
font-weight: bold;
}
Em layouts sem tabelas eles são dificeis de domar e é preciso alguns hacks para funcionarem no CSS como foi o meu caso.
Detalhe e código:
a.mainlevel:link, a.mainlevel:visited {
display : block;
padding-left : 10px;
padding-right : 10px;
text-decoration : none;
color : #A2A2AF;
border:3px double #DEDEDE;
background-color:#EBEBEB; width: 150;
text-align : center;
font-weight : bold;
font-size : 12px;
}
Espero que sirva e seja utíl para alguem como experiencia,a partir disto entra em ação a criatividade e imaginação no mundo do CSS que é muito interessante.a.mainlevel:hover {
color : #fff;
text-decoration : none;
background-color:#A2A2A2;
border:3px double #DEDEDE;
}
Deixo claro,não sou programador,sou técnico em eletronica automotiva e tudo que sei foi aprendendo com outros colegas de internet que tem verdadeiro prazer em disseminar conhecimento e informação a todos que estejam interessados.
Um abraço e boas festas no Ano novo![:)]
Post antigo.
#################################################
Dois scripts para o menu no Mambo para dar uma aparencia mais bonita no menu.
Menu vertical(mainmenu e user menu).
Não sei o que acontece,mas parece que o pessoal não gosta muito de compartilhar códigos CSS com os outros,o que acho um absurdo.
Vamos compartilhar conhecimentos,aprender uns com os outros,não é não?
Se acontecer plobremas coloque linha por linha e vá salvando e dando reflesh até achar o ponto que vc quer.
Procure no CSS apague e cole e veja como ficou,se der errado desfaça,eu faço com World mesmo.
Procure o local certo do CSS,se estiver com duvida vá apagando e colando até achar.
Shot do código abaixo
Outro exemplo:/* --Menu principal mainmenu-- */
a.mainlevel:link, a.mainlevel:visited {
text-decoration: none;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #f40;
width: 120px;
padding: 0.25em 0.5em 0.4em 0.75em;
font-weight: bold;
text-align:center;
font-size: 10px;
}
a.mainlevel:hover {
text-decoration: none;
color: white;
background: #f40;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #39c;
width: 120px;
padding: 0.25em 0.5em 0.4em 0.75em;
font-weight: bold;
text-align:center;
font-size: 10px;
}
Shot do código abaixo:
O mesmo codigo com display-block,em alguns casos coisas estranhas acontecem com ele,mas não em todos os casos.Aconselho a não usar,os de cima são melhores./* --Menu principal mainmenu-- */
a.mainlevel:link, a.mainlevel:visited {
color: #454545;
font-size: 11px;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
background-color:#d8f1f3;
width: 130px;
border:3px double #1B8780;
text-align: center;
font-weight: bold;
}
a.mainlevel:hover {
color: #454545;
text-align: center;
font-size: 11px;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
background-color:#d8f155;
width: 130px;
border:3px double #1B8780;
font-weight: bold;
}
Se quiser fazer botões com GIF/PNG,JPEG o Codigo esta ai embaixo,as imagens é óbvio tem que estar na pasta image e o tamanho e cores é vc que que tem que se virar.{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
Deem opniões!a.mainlevel {
display: block; float: center; text-decoration: none; border: 2px solid;
border-color: #5B5B5B #5B5B5B #5B5B5B #5B5B5B;
background: black url(../images/menu.png) 2px no-repeat;
color: #000000;
font-size: 10px;
font-weight : bold;
}
a.mainlevel:hover {
display: block; float: center; text-decoration: none; border: 2px solid;
border-color: #5B5B5B #5B5B5B #5B5B5B #5B5B5B;
background: black url(../images/menu1.png) 2px no-repeat;
color: #E96414;
font-size: 10px;
font-weight : bold;
}
Postagem editada por: geeknews, a: 12/10/2004 13:19
Post edited by: geeknews, at: 2004/12/26 18:09
Post edited by: geeknews, at: 2004/12/26 18:11
