Discover Top Posts Tagged with #menusimples

Menu Simples

Um menu bem simples mas gostei dele por que dependendo do theme um todo cheio de frufru não fica legal e é meu primeiro também então vamos ver né

Visualize

Bote esse código entre <style> e </style>

Aqui

E esse depois de body

Aqui

Espero que gostem

Se pegar/gostar dê like

/Leh

#leh #menu #menusimples #menu simples #hover #menu hover

Menu Horizontal Simples.

Bem eu estava procurando alguns tutoriais pra traduzir e achei esse menu super fofo, arrumei alguns códigos e resolvi postar pra vocês.

Ele tem hover, veja aqui.

Cole o seguinte código antes e </style>:

aqui.

Agora vamos mostrar nosso menu hehe. Cole esse outro código logo após <body>:

aqui.

Muito simples, mude apenas as cores, e NOME!

CREDITE AO HTML EXPRESS, NADA DE PLÁGIO!

Dê like se gostar.

Giu

#menusimples #tutoriais #giu #giuliana

Menu Cute

Visualize aqui -xx-

Cole isto entre <style> e </style>

/*Menu por Indesculpavel, se usar credita a mim ou ao season-html */

.menuzinho {position: fixed;font-family:calibri;font-size:10px;margin-left:210px;margin-top: 250px;width:250px;}

.menuzinho a {color: c0c0c0;text-transform: none;background-color:#ffffff;padding:3px;}

.menuzinho a:hover {box-shadow: inset 0px 43px #b7d6e7;}

E cole isso após </body>

<a href="{text:link3}">Texts</a>

<a href="{text:link4}">Themx</a>

</div>

Se utilizar ou gostar dê like.

Não repasse e nem reblogue.

Lembre-se de sempre creditar.

/Carol

#carolline #menucute #linkshover #menuhover #menusimples #season-html

Menu simples.

Geeeente é um menuzinho que eu ja vi por ai,maaaas os códigos DESTE são meus,nem sei como é o html do outro.Não plagiei ok?.É simplesinho,mais fica legaal,eu até uso no theme atual do HL ♥ ,pode conferir !Enfim:Preview aqui.

Antes de tudo,o CSS do menu :3 (Que todos sabemos:devemos colocá-lo antes de </style>,Ctrl+f pra achar :3)

/*** Menu simples *****/ .menu{margin:-6px;background:#229791;text-align: center;border-radius: 4px;font-size: 10px; overflow:hidden;padding:5px;} .menu a,.menu span {padding:4px;border-radius:4px;margin:2px;font-weight:bold;text-transform:uppercase;color:#fff;background:transparent;font-family: 'calibri'; width:auto; float: center; -webkit-transition-duration: .90s; text-shadow:1px 1px 1px #696969; } .menu a:hover,.menu span:hover {background:#fcc345;padding:4px;border-radius:4px;color:#696969;text-shadow:1px 1px 1px #fff;} /*** Fim do menu *****/

Agora modifique o que estiver em negrito,se precisar,use este post.Ah uma diquinha pra ficar mais fácil pra vocês modificarem:

.menu = A parte a ser modificada em que está na cor verde água no preview.

.menu a,.menu span = A parte personalizada,da fonte/letra etc.

.menu a:hover,.menu span:hover = A parte em que está destacada de amarelinho,quando você passa o mouse :3.

Voltando ao tutorial:

pegue o código HTML abaixo e cole após <body>:

Bom a "coisa" (rs) funciona mais ou menos assim:Pra cada trechinho desse 'de três links' acima é uma lista de menu (Como você pode ver no preview.)Portanto se quiser mais listas de três links vá repetindo os "trechinhos" (De <div class="menu"> á </div> <p>),mais um detalhe:Se aumentar as listas,ou seja,os links você terá de acrescentar isso: <p> após a última tag de fechamento: </div>)Entendeu?Parece meio complicadinho,mais é fácil.Se tiver dúvidas pode vir na ask sem problemas ♥ ,estou aqui pra isso mesmo amores :3.No mais é fácil,só modificar o NOME pelo nome do link,e LINK pelo link do mesmo !

Curtiu?Gostou?Dê um like,e credite ♥

Se eu ver meus códigos rondando por ai sem créditos,retiro o post.

Use a vontade hehe :3.

Bruna.

#menusimples #menu #simples #Bruna #like #credite

Menu simples .

Visualize o menu aqui.

Cole o seguinte código no seu css :

#menu {width:200px; float: bottom; margin-left:582px; margin-top: 200px; padding: 0px; text-align: center; position: fixed; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out;;;}

#menu a {display: inline-block;float: left; text-decoration: none;text-align:center;font-size:10px; ;text-transform: uppercase;font-family:verdana; background-color:#92999c; color:#FFF; height: 18px; width: 54px;;display: block;;-webkit-transition: all 1.9s ease-out; -moz-transition: all 2.4s ease-out;letter-spacing: 0px; text-decoration: none; margin-bottom:2px;margin-right:1px;line-height:15px;padding:2px;opacity:1.8;}

#menu a:hover{ - -webkit-transition: all 1.9s ease-out; background-color:#000; color:#fff;;}

E agora cole o seguinte código no seu html (depois de <body>).

->XCode

Se usar de like e credite,.

/isa

#menu #simples #isa #menusimples

e ah, obrigada se vc puder me ajudaar xD

CSS:

.mlateral {text-align: center; z-index: 10000; position: fixed; top: 45%; left: -212px; width: 200px; background: #fff; padding: 6px; border-right: solid #e4b8c5 9px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;}.mlateral:hover {position: fixed; top: 45%; left: 0px; width: 200px; background: #fff; padding: 6px; border-right: solid #e4b8c5 9px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 10000;}.mlateral a {color: #e8c9d2; display: inline-block; text-transform: uppercase; background: #f8e1e7; padding: 3px; width: 40px; margin-top: -6px; margin-bottom: -6px;}

Coloque depois de body:

{block:IndexPage}

HomeAskOldsubmit

{/block:IndexPage}

Esta igual ao do meu tumblr pessoal.

#menu #menusimples #askutil #css #tthy

Como fazer um menu?

Pra começar, você não deve ter o código NENHUM de menu no seu HTML. Vamos criar um agora, então, se tiver, apague-o.

Live Preview (eu fiz com o hover):

Aqui

Links úteis :

Cores

Certo, começando!

1° Copie…

esse código para só menu

esse código para o menu com hover

2° Entendendo e arrumando o código.

- 1ª Parte (sem hover)

Background - É o fundo do menu. Para mudar:

Transparente ponha

transparent

Alguma cor

pegue o site com o código no início do tuto

Alguma cor, pegue o site com os códigos de cores no início do tuto. As cores básicas:

Preto : #000000

Branco : #FFFFFF

Color - A cor da letra. Site dos códigos no início do post.

Letter-spacing - O espaço entre uma letra e outra.

(Repare - no preview, eu coloquei espaços diferentes pra letra diminuir no HOVER )

padding:0px 0 - No 1° zero (0), aumente o número pra aumentar o tamanho da “caixa” que o menu está em altura. No 2° zero NÃO MUDE NADA .

width - É a largura da caixa (de um lado e outro <>) em que o menu está. Aumente e vai aumentar, diminua e vai diminuir.

margin-top - distáncia entre uma caixa e outra

-webkit-transition-duration - a duração de transição da mudança de cor (do normal pro hover) . Portanto, se não quiser hover, apague isso.

- 2ª parte (hover)

* O que é hover? Hover é quando passa o mouse em cima de alguma parte, nesse caso, menu.

Letter-spacing - O espaço entre uma letra e outra.

background - A cor de fundo da caixa

color - A cor da letra.

3º Terminado de copiar o código acima, vá no HTML e cole antes de </style> .

4º Copie esse código.

5º Vá aonde você quer que o menu apareça (entre <body> e </body>) e cole.

6º Arrumando o código.

Aonde está “LINKAQUI” você vai por o link(ava ¬¬)

Aonde está “Descrição” é aquela caixinha em que aparece como se fosse a descrição do conteúdo do menu quando passa o mouse por cima. No Preview, eu coloquei… Vai aparecer “Refresh” , “Dolikespongebob” …

Agora, onde tem “Nome do Conteúdo do menu aqui” é o nome do menu (nome que vai aparecer na caixa)

Pra adicionar mais alguma caixa, é só ir copiando o código do passo 4 e ir editando…

Tutorial feito por: Marih

Base dos códigos por: DicasTumblr

P.S.: Eu não os plagiei, eu me baseei nos códigos deles -.-‘

Dúvidas/Avisos são bem vindas na Ask

#menusimples #tutos

Menu simples

1- Cole esse código no seu css,poderá modificar somente o COLOR e o BACKGROUND,substituindo as cores,pelas quais você deseja .

#menusimples #tutoriais

Como fazer um menu?

Pra começar, você não deve ter o código NENHUM de menu no seu HTML. Vamos criar um agora, então, se tiver, apague-o.

Live Preview (eu fiz com o hover):

Aqui

Links úteis :

Cores

Certo, começando!

1° Copie…

esse código para só menu

esse código para o menu com hover

2° Entendendo e arrumando o código.

- 1ª Parte (sem hover)

Background - É o fundo do menu. Para mudar:

Transparente ponha

transparent

Alguma cor

pegue o site com o código no início do tuto

Alguma cor, pegue o site com os códigos de cores no início do tuto. As cores básicas:

Preto : #000000

Branco : #FFFFFF

Color - A cor da letra. Site dos códigos no início do post.

Letter-spacing - O espaço entre uma letra e outra.

(Repare - no preview, eu coloquei espaços diferentes pra letra diminuir no HOVER )

padding:0px 0 - No 1° zero (0), aumente o número pra aumentar o tamanho da “caixa” que o menu está em altura. No 2° zero NÃO MUDE NADA .

width - É a largura da caixa (de um lado e outro <>) em que o menu está. Aumente e vai aumentar, diminua e vai diminuir.

margin-top - distáncia entre uma caixa e outra

-webkit-transition-duration - a duração de transição da mudança de cor (do normal pro hover) . Portanto, se não quiser hover, apague isso.

- 2ª parte (hover)

* O que é hover? Hover é quando passa o mouse em cima de alguma parte, nesse caso, menu.

Letter-spacing - O espaço entre uma letra e outra.

background - A cor de fundo da caixa

color - A cor da letra.

3º Terminado de copiar o código acima, vá no HTML e cole antes de </style> .

4º Copie esse código.

5º Vá aonde você quer que o menu apareça (entre <body> e </body>) e cole.

6º Arrumando o código.

Aonde está “LINKAQUI” você vai por o link(ava ¬¬)

Agora, onde tem “Nome do Conteúdo do menu aqui” é o nome do menu (nome que vai aparecer na caixa)

Pra adicionar mais alguma caixa, é só ir copiando o código do passo 4 e ir editando…

Tutorial feito por: Marih

Base dos códigos por: DicasTumblr

P.S.: Eu não os plagiei, eu me baseei nos códigos deles -.-‘

Dúvidas/Avisos são bem vindas na Ask

#menusimples #tutos

#menusimples

Trending Tags

Recently Viewed Tags

#menusimples