jeffersonquintiliano 0 Denunciar post Postado Abril 25, 2016 Boa tardeGostaria de ajudaPreciso que quando eu passar o mouse não fazer nenhuma ação e quando e clicar meu menu descer, e so recolher quando eu clicar no mesmo menu o outro menu /* Some stylesheet reset */ ul.nav, .nav>li, .nav>li>a { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } ul.nav { line-height: 1; } .nav, .nav ul { position: relative; display: block; list-style: none; margin: 0; padding: 0; width: 170px; } .nav li, .nav ul li { display: block; position: relative; padding: 0; margin: 0; } .nav>li>a { /* Layout */ position: relative; display: block; width: 150px; padding: 10px 10px 10px 10px; border-top: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; /* Texto */ font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size: 11px; text-decoration: none; color: #696969; background: #eeeeee; background: -webkit-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Chrome & Safari */ background: -ms-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Internet Explorer 10 */ background: -moz-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Firefox */ background: -o-linear-gradient(bottom, #eaeaea, #f4f4f4); /* Background for Opera */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eaeaea',GradientType=0); } .dropdown>a::after { content: ""; position: absolute; top: 1px; right: 10px; width: 0px; height: 0px; border-top: 5px solid #000000; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid transparent; } . /* Subtle drop shadow for the last navigation link */ .nav>li:last-child>a { border-bottom: 1px solid #696969; box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(60, 60, 60, .1); } /* The dropdown list elements containing the sub-links */ .nav ul li { position: absolute; height: 0px; top: -9999px; /* Creating the slide effect using transitions */ -webkit-transition: height .3s ease-out; -ms-transition: height .3s ease-out; -moz-transition: height .3s ease-out; -o-transition: height .3s ease-out; } .nav li:hover li { /* Expanding the list elements */ height: 30px; position: relative; top: auto; } /* The dropdown menu's links */ .nav ul li a { /* Layout & positioning */ position: relative; display: block; width: 160px; padding: 8px 10px 10px 10px; border-top: 2px solid #ffffff; /*padrao e1e1e1 cor da linha*/ /* Text */ font-family:Verdana, Geneva, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; border-left: 3px solid #cfcfcf; /*cor da linha lateral*/ border-right: 1px solid #cfcfcf; background: white; color: #000000; } /* The hover state of the dropdown menu links */ .nav ul li a:hover { color: #787878; } .nav .dropdown:hover li:first-child a { box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .12); border-top: 1px solid #cfcfcf; } .nav li:last-child ul li:last-child a { border-bottom: 1px solid #cfcfcf; box-shadow: 0px 1px 1px rgba(60, 60, 60, .1); } Compartilhar este post Link para o post Compartilhar em outros sites
brianleonny 0 Denunciar post Postado Abril 25, 2016 block Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Abril 25, 2016 Jefferson,No seu CSS, o menu está declarado pra aparecer no :hover. Se você quiser que ele apareça num click e só retorne ao clicar fora ou em um close button você vai precisar de um evento onclick.Exemplo: $('#botao_abrir').click(function() { $('#menu').toggleClass('aberto'); }); Ao clicar no botão, se ele tiver a classe aberto, ele remove. Se ele não tiver, ele adiciona. Esse é o conceito do toggleClass.Abraços! Compartilhar este post Link para o post Compartilhar em outros sites
jeffersonquintiliano 0 Denunciar post Postado Maio 2, 2016 Bom dia L Henrique Sou bem leigo em CSS como seria que ficaria ? Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Maio 2, 2016 Bom dia Jefferson!Isso não é CSS, é jQuery (Biblioteca de Javascript).Eu criei uma DEMO com o efeito que você quer e deixei tudo lá dentro bem explicado. Talvez você se confunda um pouco na hora de utiliza-lo (lembrando que o código utilizado foi jQuery, então no seu projeto você precisará chamar uma biblioteca de jQuery).Essa biblioteca você pode adicionar antes do </body>. Segue o código dela: <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> Qualquer dúvida, retorne no post que responderei.Abraços! Compartilhar este post Link para o post Compartilhar em outros sites