Ir para conteúdo

POWERED BY:

Arquivado

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

deckards2bibi

[Resolvido] menu globoesporte

Por , em Desenvolvimento frontend

Recommended Posts

deckards2bibi    1

deckards2bibi
Postado

bom gente é um menu simples de efeitos mas que acho muito lindo e gostaria de fazer o mesmo

se alguem souber como desenvolver o mesmo e me da uma dica iria agradecer muito

 

o site e este

 

 

Clique aqui

 

ou este

 

Clique aqui

 

bom ele tem uma imagem e uns menu que o primeiro tem uma cor que nao muda e o resto modificar uma cor diferente e encima aparece uma linha achei muito legal sera que alquem sabe fazer

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Boa tarde,

 

Eu não acho ético copiar as coisas, porém, você pode observar o código deles e com base nisso criar o seu.

 

Caso você não saiba como fazer para ver o código do menu deles é só instalar esta extensão no firefox - Clique aqui

 

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

É um menu simples, como tu mesmo disse.

 

A linha superior dá para fazer facilmente com border-top, e para fazer o fade (como no menu da Id Interativa) é só utilizar a propriedade transition do CSS3 ou até mesmo jQuery.

 

HTML:

<ul id="menu">
	<li>iMasters Fórum</li>
	<li>iMasters code</li>
	<li>Portal iMasters</li>
</ul>

 

CSS:

ul#menu {
list-style:none; /* resetando estilo da lista não ordenada */
}

ul#menu li { 
float:left; /* lado a lado */
padding:5px; /* espaço entre os menus */
border-top:2px solid #fff; /* linha superior padrão */
}

ul#menu li:hover {
border-top:2px solid #000; /* linha superior preta */
}

 

:seta: http://www.w3schools.com/css3/css3_transitions.asp

 

:hover

-moz-transition: border-top 0.3s ease-in 0s;
-webkit-transition: border-top 0.3s ease-in 0s;
transition: border-top 0.3s ease-in 0s;

 

E não esquece de adicionar no retorno também. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

deckards2bibi    1

deckards2bibi
Postado

Boa tarde,

 

Eu não acho ético copiar as coisas, porém, você pode observar o código deles e com base nisso criar o seu.

 

Caso você não saiba como fazer para ver o código do menu deles é só instalar esta extensão no firefox - Clique aqui

 

Espero que ajude.

meu caro não quero copiar dele quero aprender pq achei um efeito bom bonito e acho que vale a pena aprender

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

meu caro não quero copiar dele quero aprender pq achei um efeito bom bonito e acho que vale a pena aprender

 

Eu apenas disse que EU não acho ético copiar as coisas, não disse e muito menos quis insinuar que VOCÊ copiou ou vá copiar, são coisas distintas, meu intuito é apenas ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

deckards2bibi    1

deckards2bibi
Postado

Eu apenas disse que EU não acho ético copiar as coisas, não disse e muito menos quis insinuar que VOCÊ copiou ou vá copiar, são coisas distintas, meu intuito é apenas ajudar.

entendo fera . mas achei bonito por isso que to pedindo ajuda mas obrigado viu

 

thanks me ajudo muito

 

Diéssica

 

como coloco como resolvido já

Compartilhar este post

Link para o post
Compartilhar em outros sites

deckards2bibi    1

deckards2bibi
Postado

fiz algo assim

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="teste.css" type="text/css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>
<div id="topo" align="center">

 <ul id="menu">
               <li>iMasters Fórum</li>
               <li>iMasters code</li>
               <li>Portal iMasters</li>
       </ul>

</ul>


</div>
<div id="base">aki será a base</div>
<div id="footer">aqui sera a footer</div>
</body>
</html>

 

 

css

*{
margin:0;
padding:0;
}

#topo{
background:#21638c;
background:url(0e52bccc6a11785a9a4a9b6388f8e96a.JPG) repeat-x repeat;
width:100%;
height:50px;
position:fixed;
}

#base{
margin:0 auto;
width:900px;
height:1500px;
background:#000000;

}



#menu {
float:right;
list-style:none; /* resetando estilo da lista não ordenada */
}

#menu li { 
float:left; /* lado a lado */
padding:5px; /* espaço entre os menus */
border-top:3px solid #fff; /* linha superior padrão */
}
#menu li:hover {
border-top:3px solid #000; /* linha superior preta */
-moz-transition: border-top 0.5s ease-in 0s;
-webkit-transition: border-top 0.5s ease-in 0s;
transition: border-top 0.5s ease-in 0s;
}

 

como vcs poderão ver a parte superior so fica com alguns partes brancas

queria saber se pra eu deixar tudo la em cima branco

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