Tutorial - Menu Fallen

Olá, gente. Eu, sinceramente, não consigo achar a minha professora de matemática uma pessoa legal. Ela é tão brava e sei lá, mesmo fazendo brincadeiras, ela é má. q Imagino como serão as provas dela, já que hoje ela mandou três páginas do livro para temas. Vou desistir de querer ser engenheira eletrônica e focar em algo a ver com português. T﹏T Já que sou melhor e os professores da matéria sempre me amam, rere.

Então, pediram na ask da Débora o tutorial do menu que usamos aqui no blog. Ele não é de minha autoria, acho que foi pego no TTHY e eu editei algumas coisas. O nome não é Fallen mas o blog é quase meu e eu faço o que quiser, beijinhos. ○＾ω＾○ Não é muito complicado o tutorial, mas uma atenção a mais é sempre boa, até para quem já entende bastante de HTML. Quem não entende, atenção redobrada. Leiam mais e tal.

Se vocês não lerem tudo, nada vai dar certo e eu não vou tolerar gente que não lê e fica reclamando. Essa postagem vai ser bem grande, porque tenho que explicar bastante coisa. O código vocês verão abaixo. ~

o código é grande, então eu colei ele em um bloco de notas e hospedei. vejam-o aqui.

Observem ele. Vocês podem notar que as tags principais são ".caixasm{", ".navsm img{", ".navsm{" e ".navsm:hover {", não? Elas sempre se repitirão, mas com algumas mudanças. Por exemplo, se o seu menu só tiver uma imagem, só use ESSA parte do código que disponibilizei. Se quer duas, essa; três, essa e assim vai (o menu aqui do blog tem seis partes, mas vocês podem colocar mais).

Vocês devem estar se perguntando: Mas por quê eu não posso usar SÓ o primeiro código para uma, duas, três... imagens? PRESTEM ATENÇÃO:

Quando nós queremos usar só uma imagem, usamos somente ".caixasm{", ".navsm img{", ".navsm{" e ".navsm:hover {". Mas, com o acréscimo de mais imagens, isso muda. Para duas imagens em seu menu, adicione mais isso:  ".caixasm{", ".navsm2 img{", ".navsm2{" e ".navsm2:hover {" Viram? Devemos mudar o nome, pois senão o menu bugaria e muitas imagens ficariam uma em cima das outras.

(Mesmo assim, podem usar o código base que eu disponibilizei no primeiro blockquote. Só estava explicando para ajudar no futuro) Como uma explicação aqui na postagem ocuparia muito espaço, eu preparei uma bem detalhada para vocês em um bloco de notas. Para vê-la, cliquem aqui. Leiam tudo!!!

 Entenderam? Personalizem e salvem! Agora vem a parte legal. Faça as suas imagens e salve no formato PNG. No seu gadget, cole o código abaixo.

<div class="caixasm"><a href="LINK1"><div class="navsm"><img src="IMAGEM1" /></div></a>
<a href="LINK2"><div class="navsm2"><img src="IMAGEM2" /></div></a></div>

Você pode adicionar mais imagens, adicionando mais "<a href="LINK"><div class="navsm"><img src="IMAGEM" /></div></a>" antes do último </div>. Não se esqueça de (blábláblá) adicionar os números, de acordo com qual imagem vai ser.