Discover Top Posts Tagged with #menu simples

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 Smples

Preview: (xxx)

Bom, eu não sou nada boa com CSS, porém fiz esse menu e achei bonitinho, vou disponibilizar pra vocês, espero que gostem.

Primeiro coloque isso no seu CSS:

.nots {background:#ffc361;display: inline-block; text-align: center; color:#fff;font-size:9px; float: center;font-family:verdana; padding:5px; height:auto;width:290px;margin-left:-6px;-webkit-border-radius: 5px; -moz-border-radius: -WEBKIT-BOX-SHADOW: 0 5PX 6PX -6PX BLACK; -MOZ-BOX-SHADOW: 0 5PX 6PX -6PX BLACK; BOX-SHADOW: 0 5PX 6PX -6PX BLACK; }

.menu a{background:#ffc361; padding 5px; margin:3px;font-family:"PLAY", small fonts; font-size:12px; color: #7e6d8a; padding-left:5px; padding-right:6px; padding-top:3px; padding-bottom:2px; border-radius:2px;-webkit-transition: all ease-out 0.99s; }

.menu a:hover{background:#7e6d8a; font-family:"PLAY", small fonts; font-size:12px; color: #ffc361; }

Explicando: Esse nots é a parte de trás do menu, você pode mudar a cor dele, o tamanho conforme a sua side ou o lugar onde você vai colocar.

no menu é a parte onde você pode mudar as cores dos "links", nesse os links só vão mudar no houver, mais da pra deixar eles de uma cor e o houver de outra.

Agora a parte de HTML:

É bom deixar o <center></center> quando for colocar em uma sidebar pra ficar certinho. a parte do html é fácil é só colocar seus links.

Se usar de like (♥)

#menu simples #tutos #menu #Lary

Menu simples de link

Sabe esses menus bem simples tipo esse:

Ele é só o link, ele serve pra você fazer várias coisas, eu prefiro usar esse menu do que vários outros que tem por ai.

então vamos lá, a unica coisa que você precisa fazer é colocar esse código aonde você quer que o menu apareça:

Você pode ir copiando e colando até colocar quantos quiser, você também pode dar uma enfeitada.

Se não funcionar reponha as aspas. Se for útil dê like.

#isa #menu #menu simples

Menu simples

Copie o código abaixo e cole no seu css.

.menu {text-align:center; text-transform:uppercase}.menu a{font-family:Tahoma, Geneva, sans-serif; font-size:24px;color:#C06;text-decoration:none}.menu a:hover {color:#966;

}

Agora copie o outro código abaixo e cole onde você quer que fique seu menu entre <body> e </body>.

<div class="menu"> <a href="/">Home | </a> <a href="/">Ask | </a><a href="/">about | </a> <a href="/">link | </a><a href="/">link</a></div>

Qualquer dúvida vem na ask.

/Vick

#tutorial #tutoriais #menu simples #menu de links #menu simples de links #tutos #vick

Menu Simples:

É um menu super simples e fácil! Exemplo:

Coloca isso no seu css:

.menusimples {float: center; font: 8px "Alterebro Pixel Font", small fonts; color:#fff !important; text-align: center; text-transform: uppercase; background-color: #969E57; padding: 6px; border-radius: 1px; text-shadow: 0 1px 0 #878f49;margin-bottom: 5px; margin-top:5px; letter-spacing:0px; display: inline-block; width: auto; align: center; text-align: center;}

E no local onde você quiser:

<div class="menusimples">Conteúdo aqui</div>

Credite ao htmluv;

Tutorial por Giovanna C.;

Dê like se for útil.

#por gi #menu #menu simples #menus #menusdiversos

Menu fofo/simples de coração.

Bem, este menu é bem simples, mas vocês pediram muito que resolvi ensinar. Pode ser usado em menu falso i-frame também, mas acho que fica mais fofo apenas com links. Vocês que sabem! Vamos lá?

Coloque o código abaixo dentro do seu CSS, ou seja, antes de </style>:

.menu{width: 170px; margin: 2px 1px 2px 2px;} .menu a, .menu span{font-size: 13px; color: #fff; background: #90c0bf; text-shadow: 1px 1px 1px #85b1b0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; display: inline-block; padding: 4px 2px; text-align: center;text-align:center; margin: 0 -1px 0 0; width: 22px;} .menu p{margin: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; font-size: 13px;} .menu a:hover p, .menu span:hover p{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; font-size: 13px;}

Muita gente faz menus começando por .menu, então veja se não há nada no seu CSS que seja parecido com isso, se não vai dar errado. Se houver, apague. Em .menu, eu coloquei um width que é o espaço total do menu, dou este espaço pra que as abas não ultrapassem o espaço da caixa em que vou por o menu. Os margins ali servem para deixar seu menu alinhado a sua caixa também, então deves modificar de acordo com seu gosto pra que fique bom no seu theme. Em .menu a, .menu span é onde eu personalizei cada link, ou seja, cada aba. Vejam que adicionei um span também pra que possa usar em falso i-frame ^^ Aí vocês personalizam como quiserem. O meu está bem simples, coloquei apenas um fundo colorido, sombra na fonte e deixei o padding num tamanho legal, mas vocês podem por bordas ou sei lá rs. Em .menu p, eu apenas coloquei um transition pra fazer ficar lentinho na hora do hover. E no final temos o hover, que é a parte que todo mundo curtiu no menu. Mas é simples. Eu só adicionei um rotation ao código, que faz com que o coração gire ao passar o mouse. Esse código é bem legal, dá pra fazer várias coisas.

E depois, aonde quiser que seu menu apareça, coloque:

E é isso. Eu disse que era simples :3 Credite se usar. Beijos, A.

#menu #menu fofo #menu simples #tthy #css #tuto

Menu Simple por Angel

Veja xx

Coloque isto no seu CSS:

/** Menu por Angel Designs não retirar os créditos,obrigada **/

#menupora{width: 200px;padding: 2px;display: block;background-color: #Cordobg;color: #Cordaletra;padding-left: 10px;font-size: 12px;font-family: verdana;text-decoration: none;}

#menupora:hover{width: 200px;padding: 2px;display: block;background-color: #Cordobghover;color: #Cordaletrahover;padding-left: 10px;font-size: 12px;font-family: verdana;text-decoration: none;}

/** Fim do Menu **/

Agora após <body> coloque o seguinte código:

<a id="menupora" href="#LINK">Título</a>

Menu por Angel,se usar credite e dê like :3 Beijos

#menu #menu para tumblr #menu simples #menus #tutoriais

MENU BUCKS

ignorem esse nome okayy?

live preview

Gostou? Quer fazer? Bem simples, só seguir o tutorial, vamos lá. Primeiro cole esse código antes de </style>

.menu1 {position:fixed;padding:4px;width:105px;height:8px; background-color: #COR DO BG;opacity:0.7; font-family: 'tahoma'; font-size:8px; color: #COR DA LETRA; text-align:center; -webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;opacity:0.7;} .menu1:hover {position:fixed;padding:4px;width:105px;height:8px; background-color: #COR DO BG AO PASSAR O MOUSE; font-family: 'tahoma'; font-size:8px; color: #COR AO PASSAR O MOUSE; text-align:center; -webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}

Prontinho, agora você coloca as cores e cola o código a seguir onde quer que o menu bucks apareça:

Agora é só creditar ao htmllicious pelo tutorial! Bjs

#menu #menus #menu simples #menu fofo #menu tumblr #menu para theme