Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fabio Macedo

Efeito em link com css

Por , em Desenvolvimento frontend

Recommended Posts

Fabio Macedo    0

Fabio Macedo
Postado

Olá a todos,

 

Estou com um problema, seria de ter o link ativo em destaque em relação a página que estou presente, não sei qual código utilizar, o active do css só funciona com o mouse presionado.

Para ser mais claro seria assim:

 

( estou na página Home, o link está sendo indicado )

Home Portifólio Contato

 

( estou na página Portifólio, o link está sendo indicado )

Home Portifólio Contato

 

Pretendo utilizar imagem para o efeito, seria o mesmo que é utilizado aqui no forum,logo lá em cima que indica Fóruns, e é alterado a posição da imagem a ir em Membros ou Atualizações de status.

 

Como eu não sei qual nome teria esse efeito e se funciona apenas com css e html, só me restou postar a dúvida,agradeço desde já pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Então, que eu saiba isso até se consegue no css, mas é necesário um pouco de trabalho braçal e nao sei se adianta o esforço, até adianta porque quandi você precisar mudar basta mudar o estilo, é assim, em cada pagina você faz uma tag <style> um pouco antes do </head>, vou exemplificar aqui e colocar o seguinte codigo:

 

<!-- no html você cria a estrutura dos menus -->
<ul>
<li id="menu1"><a href="index.html">menu 1</a></li>
<li id="menu2"><a href="empresa.html">menu 2</a></li>
<li id="menu3"><a href="contato.html">menu 3</a></li>
</ul>

<!-- entao em cada pagina pertecente a cada menu você coloca isso antes de fechar o <head> -->
<style type="text/css">
#menu1 {
  font-weight:bold
}
</style>

 

Nesse caso eu simulei a página index.html, quando estiver nela o menu 1, oqual linka pro index.html, vai ficar com o texto em negrito, dai a estilizacao fica ao seu gosto, você pode fazer com imgs tb, fica ao seu critério.

 

É isso ai, espero que nao tenha ficado confuso e espero ter te ajudado :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Bom, a minha sugestão, para não ter que criar a mesma estilização para diversos "ID's", seria criar uma classe que corresponde ao menu ativo.

 

Exemplo:

 

 

CSS


.menu_ativo{
  font-weight:bold;
}

 

HTML


<ul>
<li><a href="#" class="menu_ativo">Home</a></li>
<li><a href="#">Portifólio</a></li>
<li><a href="#">Contato</a></li>
</ul>

 

Assim, sempre que for destacar um item do menu como ativo, jogar a classe.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Verdade, dessa forma tb dá, nem tinha pensado nisso :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

oi @Fabio,

 

de uma forma mais abrangente, eu colocaria essa class no body

http://wbruno.com.br/2012/03/01/elemento-body-nos-nossos-sites-como-melhor-aproveita-lo/

 

 

Tutorial do maujor:

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

HTML


<ul>
<li><a href="#" class="menu_ativo">Home</a></li>
<li><a href="#">Portifólio</a></li>
<li><a href="#">Contato</a></li>
</ul>

 

Dessa forma dá até pra trabalhar com Javascript, identificando a página atual e jogando só a classe (class="menu_ativo") no link :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Macedo    0

Fabio Macedo
Postado

Olá mais uma vez \o/

 

Galera, agradeço muito a ajuda de todos, só que eu acabei não pondo um ponto relevante na minha questão.Acontece é que eu utilizo um blog do Blogger e estou estilizando ele,sou um amador no mundo web e ainda não passei a utilizar verdadeiramente um site, estou a desenvolver meus conhecimentos com o estudo do jeito mais simples ( pelo menos, eu me familiarizei deste jeito )logo eu não tenho o código para cada página apenas o link interno para visualização.

 

Eu já havia utilizado a marcação no html, impondo a classe no link, fica ativo realmente, so que apenas onde eu declaro, se eu declarar a todos os links, esses ficaram ativos em qualquer página.

 

Peço desculpas por não ter sido mais claro, mas será que teria solução quanto a utilização no blogger ?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito