Post sobre |Dicas blog, Pc windows

Fazer menu css online, muda cor, Drop-Down

Nesse site é possível fazer vários modelos de menus, de forma fácil, não usa java, com css bem bolado ele possui muitos efeitos, passa o mouse muda a cor e o menu desce.

Eu já estava a vários dias querendo fazer esse post, estava tentando eu mesmo fazer um manualmente, usando os mesmos princípios de aumentar imagem com css, mas acabei descobrindo esse site pra fazer menus online, "guardei", e hoje eu vi uma busca aqui no blog "crie um menu online quando passa o mouse muda a cor ", e decidi que já estava passando da hora de postar sobre um menu css com efeito Drop-Down e outros.

cssmenumaker.com

A implementação do código é simples, depois de pronto o menu, basta baixar o código e colocar o css(está num arquivo .css) entre as tags HEAD(ou deixar em arquivo externo) e a outra parte entre as tags BODY.

Ou no blogspot Painel; clique em LayoutDesign, em seguida em Editar HTML

<HEAD>

<STYLE type=text/css>

Css aqui

</STYLE>

ou endereço do arquivo css aqui:
<link href='http://SuaPagina.com/stilo.css' rel='stylesheet' type='text/css'/>


</HEAD>

<BODY>

A outra parte do código do Menu aqui, ou, no blogspot em Design , Elementos da página

</BODY>
É necessário saber um pouco sobre css e como usar as imagens que "estão incluídas no css", ou seja, no css vai ter um código que diz algo como: background: URL(images/nav_right.png) Essa imagem deve estar hospedada em um local na web, e, dentro do css, é melhor que, no local onde tem images/nav_right.png tenha o endereço completo da imagem.

Atualização:

São menus muito bonitos, e, tudo que é excelente exige muito esforço, não poderia ser diferente com a implementação do menu.

Percebi que alguns estão tendo problemas, eu vou tentar mostrar uma forma de usar o css em arquivo externo, usando o pages.google.com porém vocês devem, além de fazer o menu, fazer o download da pasta com o arquivo, e as imagens e hospedar ambos na web, e todos no mesmo local, eu escolhi o pages.google por ser fácil, rápido, seguro e grátis para todos.

Terão também que mexer no arquivo style.css que será baixado no site que faz o menu.

Implementar o menu com uso de arquivo externo

A primeira coisa após baixar a pasta.zip com o menu é fazer uma cópia da pasta que está dentro dela para seu computador, e, manter a pasta que você baixou intacta, caso de algo errado, vamos trabalhar com a cópia.
  1. Com um editor de texto, o mais simples possível(bloco de notas, se possível) Abra o arquivo style.css e procure pelos nomes images/ e retire todas as palavras images/ Depois de retirar Salve o arquivo, veja apenas um dos Exp:

    Antes, background: url(images/item-primary-bg.gif)

    Depois, background: url(item-primary-bg.gif)

    Isso porque quando você transferir o arquivo style.css e as imagens para a pagina do google, ambos irão ficar lado a lado(na mesma pasta ou diretório) e a pasta images não vai, só podemos mandar arquivos, então tudo que se refere a ela dentro do arquivo deve ser retirado.

Atualização: O serviço pages.google Será desativado, não usem para isso.

Não será possível usar esse serviço, então esse procedimento abaixo fica inviável, a menos que você encontre um similar.
    Transferir(upload) todas as imagens e o arquivo style.css para pages.google, caso nunca tenha feito observe:
  1. Clique em Uploaded Stuff para expandir o menu, fica no canto direito superior. O link Uploaded Stuff expandi ou esconde esse menu, ele precisa estar expandido.
  2. Clique no botão Arquivo, Se não estiver visível clique no link [Upload] para ver aí é só encontrar o arquivo de seu computador, clicar em Abrir, Ok ou Concluir.
  3. Para ver seu arquivo e o endereço dele na web, é só clicar sobre o nome do arquivo, na página Pages.Google.
  4. Clique para aumentar
    fazer upload de arquivo para google pages
  5. Com um editor de texto, Abrir o arquivo index.html e identificar o código do menu que dele começar com uma <div e terminar com </div> , esse é o código html do menu que você deverá copiar, depois de trabalhar ele um pouco.
  6. Se você perceber esta tudo bonitinho cada item numa linha, isso é pra facilitar o entendimento, porém é usado espaços para isso, e cada espaço é bits, se você tirar esses espaços(com cuidado) reduz o peso de suas páginas um pouco, e isso é muito bom.

    Você não deve tirar espaços entre letras ou palavras, <li>imagine que essas palavras não estivessem aqui, esse espaço poderia ser retirado</li>

  7. Exp: Retirei os espaços, desse trecho, e reduzi 5 kb, fica um pouco confuso para entender, mas é o peso de uma imagem pequena, que eu poderia usar no meu blog.

    Isso não interfere na apresentação do menu, porque as tags Html tem suas funções e, algumas delas tem a função de quebrar a linha.

  8. Se caso no html do menu tiver imagens, por Exp:
    <img src ="images/nome-da-imagem.jpg" isso indica uma imagem e o endereço dela no seu blog, no caso se você pudesse criar uma pasta com o nome images, e colocar na raiz do blog ou site, como não pode, a opção é substituir pelo endereço completo da imagem.

    O que tem entre as aspas deve ser o endereço da imagem, mas como você vai usar o pages.google para hospedar a imagem, esse endereço deve ser substituído pelo endereço completo da imagem, você deve descobrir pelo nome da imagem, o endereço dela, onde você hospedou, no caso fez o Upload

    Clique para aumentar
    html div menu
  9. Próximo passo é colocar o link para o arquivo style.css no html do blog, logo acima da tag </HEAD> que ja existe e não deve ser adicionada outra, deve colocar o endereço completo do arquivo style.css(onde você o hospedou ou fez Upload) ficaria parecido com isso:<link href='http://SuaPagina-Substitua.com/stilo.css' rel='stylesheet' type='text/css'/>

    </HEAD>
  10. O código Html você pode, para quem usa o blogger, colocar em => Design, => Elementos da página => Adicionar Elemento => Html/Javascript => e Salvar.

    Quem faz páginas Html no braço e não usa sistemas de blogagem pode tentar entre as BODY.

    Quem usa o BlogSpot e fez um Menu horizontal, e não tiver a opção de Adicionar elementos acima do post, pode aprender a criar essa opção Adicionar elementos acima do post, aqui.
  11. Quem fez o Menu horizontal e acha ele largo demais, pode diminuir o espaçamento entre um item e outro, na largura, basta procurar o trecho abaixo e reduzir os números que deixei em vermelho:
    /*^'^ Primary Items ^'^*/
    #nav-container a{
    padding:7px 17px 7px 18px;
Se quiser entender melhor como funciona um menu css ou ver um mais simples Menu muda de cor e link aumenta

11 comentários:

Fazer menu css online, muda cor, Drop-Down2008-09-25T05:24:00-03:00
  1. Eu fiz o menu, mas não sei enviar a pasta para o diretório do Blogspot. Vc sabe com fazer?

    Responder
  2. Infelizmente ainda não tem essa opção no blogger. Vamos ver se der tempo eu vejo uma forma alternativa, menos árdua que hospedar as imagens e mudar o endereço delas.

    Responder
  3. ah meu Deus eu sou novo nisso & preciso de ajuda NÃO SEI ONDE COLOCA O CSS & O HTML serio msm eu não seei mi ajuda ??

    Responder
  4. cara, naum sei se vc percebeu, mais até agora não vi nenhum blog com menus em css que tem sub menu.

    eu coloquei um menu no meu blog, mais os submenus naum ficaram pegando.

    vc tem alguma solução para isto?

    Responder
  5. Este comentário foi removido por um administrador do blog.

    Responder
  6. DANIEL E CARLINHOS, vou remover seu comentário pelo fato de conter endereço de email.

    De qualquer forma esse serviço que você tenta usar não funciona porque ele hospeda o arquivo como .txt e precisa ser um arquivo publico e .CSS

    Quem quiser tentar esse endereço abaixo é um bom local para host desses arquivos,
    xpg.com.br
    Mas é bom fazer uma página com alguma coisa escrita nele, geralmente essas empresas cedem esse tipo de serviço mas esperam algo em troca, algo que favoreça o site delas.

    Responder
  7. OI, VALEU PELAS DICAS, ENTREI NESSE SITE, FIZ PÁGINA, MAS NÃO SEI AONDE POSSO HOSPEDAR MEUS ARQUIVOS NESSA PÁGINA PRA DEPOIS COLAR O URL DELES NO AQUIVO CSS, NA VERDADE EU CRIEI UM ALBÚM DE FOTOS NO PÁGINA E MANDEI AS IMAGENS DO MENU PRA LÁ, MAS QUANDO ABRO O ALBUM NÃO CONSIGO CLICAR NAS IMAGENS PRA PEGAR OS URLS E COLAR NO ARQUIVO CSS. COMO FAÇO ISSO?
    TO PERDIDO CARA, BEM DIFICIL INSTALAR ESSE MENU, FAZEM TRES DIAS QUE TO TRABALHANDO S[O NESSE MENU, RSS
    SE VC PUDEU ME DAR MAIS ALGUMAS DICAS VALEU, ABRAÇÃO CARA

    Responder
  8. CARA, PENEI AQUI, FORAM MAIS DE 3 DIAS CONFIGURANDO AQUI, MAS CONSEGUI, SÓ FALTA DAR UMA ARRUMADA BÁSICA NA CONFIGURAÇÃO, MAS TA TUDO FUNCIONANDO BONITINHO, RSS
    VALEU PELA AJUDA, SE PINTAR QUALQUER COISA TE PERGUNTO, OU SE VC OU A GALERA QUISEREM AGORA SABER ALGUMA COISA SOBRE A INSTALAÇÃO PODE PERGUNTAR PRA MIM QUE AGORA EU APRENDI UM POUQUINHO, RSS
    ABRAÇÃO

    Responder
  9. É, não é fácil, mas é possível.
    Que bom que você conseguiu DANIEL ou CARLINHOS.

    Responder
  10. Eu queria era mandar arquivos do meu computador para o blog...eu mandava barra menus CSS pra la
    tenho varios menus prontos

    Responder
  11. |Surf>Pro|- [E]lieze[R]

    No blogger não é possivel, hoje, enviar arquivos.

    Se você fez um menu, terá o código Css que você poderá adicionar no html do blogger veja como, e, tem o código Html, como mostrei na imagem acima, a parte html você pode adicionar como gadget do blogger.

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!