Jump to content
paksau

caixinha

Recommended Posts

paksau

Boa tarde, estou aqui para saber se alguém sabe como se faz aquela caixinha, que quando se clica por exemplo nos contactos aparece uma caixa com os campos que quero

Share this post


Link to post
Share on other sites
FMacau

Tenta uma drop table, não tem a necessidade de um clique apenas de uma sobreposição :)


Filipe Macau © 2013

Web Designer & Designer Gráfico @ - http://www.filipemacau.com/ | geral@filipemacau.com

Web Design . Design Gráfico . Decoração . Desenho . Fotografia . Video . Informática . Merchandise . Tradução

Share this post


Link to post
Share on other sites
ralmeidasantos

uma caixinha??????? define isso melho


HTML Master

The programs change the world

Share this post


Link to post
Share on other sites
ralmeidasantos

Ve se é esto que queres?

Este menu usa dois ficheiros de javascript linkados na head do documento.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

Estrutura do menu

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
</ul>
</li>
</ul>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>
</div>

Formatação do menu

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: auto;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
width: 160px;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 10px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}


/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 149px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}


.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

PS: nao te esqueças de criar uma pasta para o JS, senão a extensão dominada no head nao é lida


HTML Master

The programs change the world

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.