Pular para o conteúdo
CSS em Programação

Fazendo menu dropup

Responder tópico
  • Denunciar
  • Indicar

1. Fazendo menu dropup

Enviado em 03/09/2014 - 22:04h

Preciso entregar um serviço amanhã mas nunca fiz algo assim, o site é esse:
http://www.corpusgrif.com.br/

Preciso integrar a coleção praia e a coleção fitness neste menu como drop-up, ou seja, ao passar o mouse, suba o menu ( com as sub categorias 2014 e 2015) E não estou conseguindo por nada.

aqui está o html:
			<!--Menu button-->

            <%

			sql = "SELECT * FROM FotosCategoria ORDER BY ID "

			Conectar sql

			

			Colecao = rs.GetRows

			

			Desconectar

			%>

         	<a href="index.asp" id="menu-button"><img  src="img/left-button.png" align="absmiddle"/><%=convertCharset(Colecao(1,0),0)%></a>

            <a href="index.asp?page=2" id="menu-button"><img  src="img/left-button.png" align="absmiddle"/><%=convertCharset(Colecao(1,1),0)%></a>

			<a href="index.asp?page=3" id="menu-button"><img  src="img/left-button.png" align="absmiddle"/><%=convertCharset(Colecao(1,2),0)%>></a>

            <a href="empresa.asp" class="popup" id="menu-button"><img  src="img/left-button.png" align="absmiddle"/>Empresa</a>

            <a href="contato.asp" class="popup" id="menu-button"><img  src="img/left-button.png" align="absmiddle"/>Contato</a>

            

			

			<!--Thumb Tray button-->

            <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>

			<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>

			

			<center>

			<div id="slidecaption" style="width:250px;"  ></div>

			</center>

			

	  </div>


Por favor, necessito de ajuda! Muito obrigado

Responder tópico

2. Re: Fazendo menu dropup

Enviado em 19/02/2016 - 10:54h

Bom dia,

Acabei de ver seu post, acredito que você já deve ter entregado o site.. porem entrei la e não vi o menu drop então tente isso..

Não fiz com o seu código mas acredito que vai entender.. o menu é assim
Home Contato Drop1 Drop2 etc.. 

<!DOCTYPE html>

<html lang="PT-BR">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div style="position: relative; float:left;" onmouseover="$('#drop1').css('display','block')" onmouseout="$('#drop1').css('display','none')">

        <div class="cx_menu">

            <a href="#" >Classe de Links</a>

        </div>

        <div id="drop1" style="display:none; border:solid #bbb 1px; border-radius:4px; background-color: #eee; position: absolute; top: 25px;left: 0;width: 150px;padding:5px;">

            <a href="link1.php" title="Link 1" class="a1">1º Link</a><br>

            <a href="link2.php" title="Link 2" class="a1">2º Link</a><br>

            <a href="link3.php" title="Link 3" class="a1">3º Link</a><br>

        </div>

    </div> 





    <div style="position: relative; float:left;" onmouseover="$('#drop2').css('display','block')" onmouseout="$('#drop2').css('display','none')">

        <div class="cx_menu">

            <a href="#" >Classe de Links</a>

        </div>

        <div id="drop2" style="display:none; border:solid #bbb 1px; border-radius:4px; background-color: #eee; position: absolute; top: 25px;left: 0;width: 150px;padding:5px;">

            <a href="link1.php" title="Link 1" class="a1">1º Link</a><br>

            <a href="link2.php" title="Link 2" class="a1">2º Link</a><br>

            <a href="link3.php" title="Link 3" class="a1">3º Link</a><br>

        </div>

    </div>





</body>

</html>

Responder tópico

Responder tópico

Entre na sua conta para responder.

Fazer login para responder