Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ae galera tipo, bem simples o erro, coloquei um menu jquery certo o css ta la em baxo o menu mexe no design no site, help plz !
O "centro" vai deçe com a ação, eu queria deixar invisível o menu no caso para o layout não decer com o menu !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>System Fan Center</title>
<link rel="stylesheet" href="animated-menu.css"/>
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
<style type="text/css"> margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:750px;
margin:0 auto;
background:#FFF;
}
#header {
padding:5px 10px;
background:#ddd;
height: 200px;
background: url(images/banner.png);
} margin:0;
}
#nav {
height: 50px;
padding:5px 10px;
background:#ddd;
} margin:0;
padding:0;
list-style:none;
} display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:480px;
padding:10px;
background:#FFF;
} margin:0 0 1em;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#FFF;
}
#footer {
clear:both;
padding:5px 10px;
background:#ddd;
} margin:0;
} height:1px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav">
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
</div>
<div id="main">
<h2>Conteudo</h2>
</div>
<div id="sidebar">
<h2>Menu</h2>
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
</html>
</html>CSS do menu
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}ul{
margin:0;
padding:0;
}li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}a{
color:#FFF;
text-decoration:none;
}p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}/Menu Color Classes/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
VALEU Preciso rapidão galera, abraço Feliz Natal e um prospero ano novo !
@EDIT
ESSE É O MENU
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
>
Experimente usar um z-index superior a todos os demais elementos da página para o menu.
Abs
não entendo muito disso poderia dar um exemplozin pra mim porfavor ?
Esse tutorial explica bem de forma ilustrativa: http://pt-br.html.net/tutorials/css/lesson15.php
:thumbsup:
Baaaaa, ta feio aqui, ainda não saiu :/
Observe o painel properties no DW.
Neste exemplo é um banner expansível em Flash, mas usa o mesmo princípio, é uma div que inicialmente está 'pequena' e ao passar o mouse 'aumenta' de tamanho.
Para aumentar e diminuir o tamanho da div usamos uma função em JavaScript mas é necessário que esteja acima de todo o demais conteúdo da página. Isso é definido no CSS da página, como o tutorial que o Thiago lhe informou.
Vamos supor que todo o seu layout utilize 50 divs. Note que foi informado no painel o z-index com o valor 999 para a div que contém o banner, ou seja, é um valor fictício, poderia ser outro qualquer (340, 715, 90, ... etc), mas é indispensável que seja superior a tudo o que houver na página.
Fiz um print screen da tela do DW >> Clique aqui
Caso precise dar uma conferida na função em JavaScript, vou deixar o link. É um tuto para um banner expansível, mas penso que seja compatível com o seu menu. Os arquivos estão disponíveis para download.
http://www.mxmasters.com.br/flash/flash-expandable-banner/
Abraços
Experimente usar um z-index superior para a div que contém o menu em relação a todos os demais elementos da página.
Abraços