Início
Galeria
Procurar
Registar
EntrarUsando list-menu
2 participantes
Beyond Imagination :: Programação :: CSS
Página 1 de 1
Usando list-menu
Yuki 14.04.08 16:39
um tutorial sobre o famoso list-menu vertical xD
relembrando! os códigos de CSS vão sempre entre as tags <head> e </head>
Começamos pelo código, que é o que está abaxo, coloque ele entre as tags <head> e </head> do seu blog:
<STYLE type="text/css">
#st-menu a{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-align: left;
padding-left: 2px;
width: 168px;
line-height: 18px;
font-size: 15px;
font-family: times new roman;
}
#st-menu {width: 50px;}
#st-menu li {margin:0;}
#st-menu ul {margin:0;
text-list-type: none;}
#st-menu a:link, #mh-menu a:visited{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
#st-menu a:active{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
#st-menu a:hover{border-bottom: 1px solid #ffffff;
background-color: #000000;
color: #000000;
text-decoration: none;
text-align: right;
}
</STYLE>
Agora, como configurá-lo:
border-bottom: 1px dashed #ffffff; - configura a borda de baixo, e pode ser configurado da seguinte forma: 1px é a largura, dashed o estilo (tb pode ser solid, dotted, double) e a cor! Além da borda de baixo, se quiser colocar em cima ou na esquerda ou na direita é só substituir o"bottom" por "top" ou "left" ou "right" e o resto é configurado da mesma forma!
background-color: #d7e2ba; - a cor do fundo
color: #ffffff; - cor das letras, mas aqui nao precisa mexer
text-align: left; - alinhamento dos links, que pode ser na esquerda (left), ao centro (center) e a direita (right)
padding-left: 2px; - define os espaçamentos, que podem ser: left (defone a espaçamento esquerda), top (define a espaçamento superior), direita (define a espçamento direita) e bottom (define a espaçamento inferior)
width: 168px; - largura do menu
line-height: 18px; - altura da célula (sempre coloque 2px a mais do tamanho da fonte)
font-size: 15px; - tamanho da fonte
font-family: times new roman; - tipo de fonte
#st-menu {width: 50px;}
#st-menu li {margin:0;}
#st-menu ul {margin:0;
text-list-type: none;}
nessa parte acima nao precisa mexer
abaixo, está a parte para configuar o link e o link visitado
#st-menu a:link, a-visited{border-bottom: 1px dashed #ffffff; - configuração das bordas
background-color: #d7e2ba; - cor do fundo (se nao quiser nenhuma cor, pode por transparent)
color: #ffffff; - cor do link
text-decoration: none; - aqui pode ser italic ou oblique
}
abaixo, está a parte para configurar o link ativo
#st-menu a:active{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
abaixo, está a parte para configurar o estado do link quando o mouse passa por cima dele
#st-menu a:hover{border-bottom: 1px solid #ffffff;
background-color: #000000; - aqui da pra por imagem no fundo também, é só usar: background-image: url('url da imagem')
color: #000000;
text-decoration: none;
text-align: right; - alinhamento do link quando o mouse passa por cima dele
agora que já vimos como configurá-lo, o código abaixo é pra fazer com que ele funcione, é só colocá-lo entre as tags <body> e </body>, onde quer que o menu apareça:
<div id="st-menu" style="width: 50; height: 73">
<ul>
<li><b>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
</a></li></b></div>
</ul>
</ul>
pronto, aí está o seu list-menu^^
relembrando! os códigos de CSS vão sempre entre as tags <head> e </head>
Começamos pelo código, que é o que está abaxo, coloque ele entre as tags <head> e </head> do seu blog:
<STYLE type="text/css">
#st-menu a{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-align: left;
padding-left: 2px;
width: 168px;
line-height: 18px;
font-size: 15px;
font-family: times new roman;
}
#st-menu {width: 50px;}
#st-menu li {margin:0;}
#st-menu ul {margin:0;
text-list-type: none;}
#st-menu a:link, #mh-menu a:visited{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
#st-menu a:active{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
#st-menu a:hover{border-bottom: 1px solid #ffffff;
background-color: #000000;
color: #000000;
text-decoration: none;
text-align: right;
}
</STYLE>
Agora, como configurá-lo:
border-bottom: 1px dashed #ffffff; - configura a borda de baixo, e pode ser configurado da seguinte forma: 1px é a largura, dashed o estilo (tb pode ser solid, dotted, double) e a cor! Além da borda de baixo, se quiser colocar em cima ou na esquerda ou na direita é só substituir o"bottom" por "top" ou "left" ou "right" e o resto é configurado da mesma forma!
background-color: #d7e2ba; - a cor do fundo
color: #ffffff; - cor das letras, mas aqui nao precisa mexer
text-align: left; - alinhamento dos links, que pode ser na esquerda (left), ao centro (center) e a direita (right)
padding-left: 2px; - define os espaçamentos, que podem ser: left (defone a espaçamento esquerda), top (define a espaçamento superior), direita (define a espçamento direita) e bottom (define a espaçamento inferior)
width: 168px; - largura do menu
line-height: 18px; - altura da célula (sempre coloque 2px a mais do tamanho da fonte)
font-size: 15px; - tamanho da fonte
font-family: times new roman; - tipo de fonte
#st-menu {width: 50px;}
#st-menu li {margin:0;}
#st-menu ul {margin:0;
text-list-type: none;}
nessa parte acima nao precisa mexer
abaixo, está a parte para configuar o link e o link visitado
#st-menu a:link, a-visited{border-bottom: 1px dashed #ffffff; - configuração das bordas
background-color: #d7e2ba; - cor do fundo (se nao quiser nenhuma cor, pode por transparent)
color: #ffffff; - cor do link
text-decoration: none; - aqui pode ser italic ou oblique
}
abaixo, está a parte para configurar o link ativo
#st-menu a:active{border-bottom: 1px dashed #ffffff;
background-color: #d7e2ba;
color: #ffffff;
text-decoration: none;
}
abaixo, está a parte para configurar o estado do link quando o mouse passa por cima dele
#st-menu a:hover{border-bottom: 1px solid #ffffff;
background-color: #000000; - aqui da pra por imagem no fundo também, é só usar: background-image: url('url da imagem')
color: #000000;
text-decoration: none;
text-align: right; - alinhamento do link quando o mouse passa por cima dele
agora que já vimos como configurá-lo, o código abaixo é pra fazer com que ele funcione, é só colocá-lo entre as tags <body> e </body>, onde quer que o menu apareça:
<div id="st-menu" style="width: 50; height: 73">
<ul>
<li><b>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
<a href="http://" >link</a></li>
</a></li></b></div>
</ul>
</ul>
pronto, aí está o seu list-menu^^
Yuki- Admin
- Número de Mensagens : 110
Idade : 33
Localização : Rio Grande do Sul 8D
Data de inscrição : 12/04/2008 -
Re: Usando list-menu
soraa 23.04.08 21:45
nyaaa o.o
nunca ouvi falar em 'list-menu'... o q eh e pra q q serve? ^^"
nunca ouvi falar em 'list-menu'... o q eh e pra q q serve? ^^"
soraa- Número de Mensagens : 70
Idade : 32
Localização : estudante/webdesign/cantora de animekê/fanfic writer
Data de inscrição : 23/04/2008 -
Re: Usando list-menu
Yuki 24.04.08 11:10
naaaaah, eh o jeito q eu chamo "menu vertical" xDDDD! eh um menu o__o, serve pras pessoas navegarem no teu blog? 8D
Yuki- Admin
- Número de Mensagens : 110
Idade : 33
Localização : Rio Grande do Sul 8D
Data de inscrição : 12/04/2008 -
Re: Usando list-menu
soraa 25.04.08 23:12
aaaaaaah, eh o 'menu vertical' ... o.o esse termo eu jah ouvi falar... mas 'list-menu' nunca 8D
LOL
vlw pela resposta =D
LOL
vlw pela resposta =D
soraa- Número de Mensagens : 70
Idade : 32
Localização : estudante/webdesign/cantora de animekê/fanfic writer
Data de inscrição : 23/04/2008 -
Beyond Imagination :: Programação :: CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|