Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DjBilly

menu estragando layout !

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

DjBilly    0

DjBilly
Postado

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">
body,
html {
	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);
}
h1 {
	margin:0;
}
#nav {
	height: 50px;
	padding:5px 10px;
	background:#ddd;
}
#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
#nav li {
	display:inline;
	margin:0;
	padding:0;
}
#main {
	float:left;
	width:480px;
	padding:10px;
	background:#FFF;
}
h2 {
	margin:0 0 1em;
}
#sidebar {
	float:right;
	width:230px;
	padding:10px;
	background:#FFF;
}
#footer {
	clear:both;
	padding:5px 10px;
	background:#ddd;
}
#footer p {
	margin:0;
}
* html #footer {
	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/

http://buildinternet.com/live/smoothmenu/animated-menu.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Elektra    102

Elektra
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

DjBilly    0

DjBilly
Postado

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 ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Elektra    102

Elektra
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito