Posts filed under ‘Css’
Menu slideDown e slideUp com jQuery.
Fala, galera tudo bom ? Estou meio sumido pois ando com o tempo muito curto. Desenvolvi estes dias um menu em jQuery com um efeito bem moderno o slideUp e o slideDown. Ele tambem possui a opção de colocar submenus com este mesmo efeito.
Vamos lá, primeiramente vamos criar o arquivo .css
<style>
.menu_barra_titulo{
font-size:14px;
width:178px;
min-height:22px;
color:#005335;
text-align:center;
padding:0px;
cursor:pointer;
}
.menu_barra_titulo:hover{
background-image:none;
cursor:pointer;
font-weight: bold;
}
#enquadramento-barra-titulo{
background-image:url(bt-out.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
font-weight: bold;
}
#enquadramento-barra-titulo:hover{
background-image:url(bt-over.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
}
.menu_item{
text-decoration:none;
background-image:url(comum-quadrado-verde-out.jpg);
margin: 0; padding:0;
width:172px;
}
.menu_item li:hover{
background-image:url(comum-quadrado-verde-in.jpg);
}
li.menu_linha{ padding-left:20px; }
a.linkmenu{
text-decoration:none;
color:#005335;
}
a.linkmenu:link {
text-decoration:none;
}
a.linkmenu:hover {
font-style:italic;
text-decoration:none;
color:#663333
}
.menu_barra_item{
}
.menu_subbarra_titulo{
padding:0px;
margin:0px;
width:174px;
}
</style>
Eu usei algumas imagens, mas vocês podem estar mudando elas perfeitamente.
Agora o arquivo html:
<div id="explorerColunaMenu"> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li><a href="#" class="linkmenu">Menu 1</a> </li> <li><a href="#" class="linkmenu">Menu 2</a> </li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li class="menu_linha"><a href="#" class="linkmenu">Menu 1</a></li> <li class="menu_linha"><a href="#" class="linkmenu">Menu 2</a></li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"><b>Caracterização</b></div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 1</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 2</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> </div> </div>
E por fim o código JS:
jQuery(document).ready(function(){
jQuery(".menu_barra_item").hide();
jQuery(".menu_subitem").hide();
jQuery(".menu_barra_titulo").click(function(){
jQuery(".menu_barra_item").slideUp("fast");
jQuery(this).find(".menu_barra_item").slideDown("fast");
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-left','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-top','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-bottom','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('font-weight','normal');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-color','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-color','#e3fedd');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-image','url()');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-align','left');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('padding-left','15px');
// caso queira formatar os sub-menus
//jQuery('.menu_subbarra_titulo').children('div.menu_barra_item').css("display","none");
});
jQuery(".menu_subbarra_titulo").click(function(){
jQuery(".menu_subitem").slideUp("fast");
jQuery(this).find(".menu_subitem").slideDown("fast");
});
});
Vocês vão precisar da api jquery que se encontra neste site para download: http://jquery.com/
Vocês podem otimizar a vontade pois fiz meio rápido o código, da para colocar slideToggle etc… Mas espero que seja útil para vocês!
Até a próxima pessoal!
Menu DROPDOWN com CSS e HTML.
Este é uma boa dica, pois este menu não usa JAVASCRIPT, é compatível com inúmeros navegadores inclusive o IE 6.0, segue o code HTML:
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list"><a class="category" href="#Home">Home</a></li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#about">About Us »</a>
<ul class="submenu">
<li><a href="#about1">About link 1</a></li>
<li><a href="#about2">About link 2</a></li>
<li><a href="#about3">About link 3</a></li>
<li><a href="#about4">About link 4</a></li>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles »</a>
<ul class="submenu">
<li><a href="#articles1">Articles link 1</a></li>
<li><a href="#articles2">Articles link 2</a></li>
<li><a href="#articles3">Articles link 3</a></li>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News »</a>
<ul class="submenu">
<li><a href="#news1">News link 1</a></li>
<li><a href="#news2">News link 2</a></li>
<li><a class="endlist" href="#news3">News link 3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#donate">Donate</a></li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#contact">Contact</a></li>
</ul>
</div>
</div>
E agora o código em CSS:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}
.wrapper {
position:relative; height:25px;
}
.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
.ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
background:#369;
text-decoration:none;
color:#fff;
padding-left:5px;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
color:#fff;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
color:#fff;
}
O resultado irá ser mais ou menos este aqui:
Para pegar este arquivo, clique aqui.
Abraços até a próxima.
O Mundo Do Mário 