Jump to content

Search the Community

Showing results for tags 'menu dropdown'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 2 results

  1. Oi pessoal. Estou criando um menu e estou com certa dificuldade. Nos itens que "vão para baixo" há um espaço em branco na esquerda que não consigo tirar de jeito nenhum, como vocês podem ver na imagem. Meus códigos HTML e CSS estão logo abaixo. Se puderem me ajudar, agradeceria muito :) <body> <div id="banner"> </div> <div id="menu"> <nav> <ul class="menu"> <li><a href="#">Index</a> </li> <li><a href="#">A Série</a> </li> <li><a href="#">Personagens</a> <ul> <li><a href="#">Ted Mosby</a></li> <li><a href="#">Robin Scherbatsky</a></li> <li><a href="#">Barney Stinson</a></li> <li><a href="#">Marshall Eriksen</a></li> <li><a href="#">Lily Aldrin</a></li> </ul> </li> <li><a href="#">Episódios Especiais</a> </li> <li><a href="#">Entre em contato</a> </li> </div> .menu{ list-style:none; } .menu li{ position:relative; float:left; } .menu li a{ color:black; text-decoration:none; padding:10px 85px; display:block; } .menu li a:hover{ background:#4C7EA5; color:#fff; text-shadow:0px 0px 5px #fff; } .menu li ul{ position:absolute; top:100%; left:0; background-color:#fff; display:none; } .menu li:hover ul, .menu li.over ul{ display:block; } .menu li ul li{ display:block; width:100%; }
  2. Vitor Leite

    Animar Dropdown menu com CSS

    Oi galera. Beleza? Faz um tempo que não mexo com CSS e quase esqueci tudo. kkk Comecei num projeto para treinar e achei um problema que não consigo resolver. Fiz um menu dropdown básico, e preciso animar o dropdown, mas não consigo de jeito algum. Tentei utilizar o transition mas não vai de maneira alguma. Deem uma olhada no código e vê se é possivel me dar uma ajuda. Valeu! Boa semana. Código HTML: <nav> <div class="dropdown"> <button class="dropbtn"><a href="#"></a>MENU</button> <div class="dropdown-content"> <a href="#">Página Inicial</a> <a href="#">Como funciona?</a> <span><img style="width:32px; height:32px;" src="img/default.png"/>Seja bem vindo, Vítor.</span> <a class="log1" href="#">Perfil<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="person"></span></a> <a class="log2" href="#">Sair<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="account-login"></span></a> </div> </div> </nav> Código CSS: .dropbtn { background:url(../img/space.png); width:90px; height:50px; text-align:right; color: white; padding:0px; font-size: 19px; border: none; cursor: pointer; margin-top:0px; outline:none; -webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */ float:left; } .dropbtn a { width:28px; height:21px; margin-top:3px; background: url(../img/three.png); float:left; } .dropbtn:hover { opacity:0.5; } .dropdown { float:left; width:95px; height:50px; margin-top:20px; position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: block; position: absolute; top:50px; background-color: #131920; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; border-bottom:1px solid #0E1319; } .dropdown-content span { color: #7D9EC4; padding: 12px 16px; text-decoration: none; font-weight: 300; font-size:15px; display: block; } .dropdown-content img { margin-right:10px; vertical-align: middle; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: #19222B; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.