[JavaScript][HTML]mootool menu + content div Opcje

[ghastblood]

Witam,
Zrobiłem sobie ruchome menu w jquery wszystko ładnie działa tylko że jak rozsuwa mi się menu to przesuwa mi div z treścią. Jak to naprawić ? zrobić z-index dla menu ? czy może jest jakieś inne rozwiązanie

[grzeee]

Może byś podał jak wygląda kod html/js/css

Pewnie musisz zrobić dla rozsuwanego menu position: absolute; i wypozycjonować odpowiednio i ponadawać z-indexy

Ten post edytował grzeee 29.04.2011, 10:09:49

[ghastblood]

menu

[HTML] pobierz, plaintext 
 
 
echo "<table cellpadding='0' cellspacing='0' width='1024px' class='$main_style' style='margin:0 auto;'>\n<tr>\n";
	if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
// to jest zawartość innego pliku który jest zwykłym kodem html dlatego nie ma echo 
<div id="navigation-block">  
            <ul id="sliding-navigation">  
                <li class="sliding-element"><h3>Navigation Title</h3></li>  
                <li class="sliding-element"><a href="#">Link 1</a></li>  
                <li class="sliding-element"><a href="#">Link 2</a></li>  
                <li class="sliding-element"><a href="#">Link 3</a></li>  
                <li class="sliding-element"><a href="#">Link 4</a></li>  
                <li class="sliding-element"><a href="#">Link 5</a></li>  
            </ul>  
</div> 
//i znow kod php
echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
	if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
	echo "</tr>\n</table>\n";
[HTML] pobierz, plaintext 

teraz css

[HTML] pobierz, plaintext 
nav_panel.css
h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(navigation.jpg) no-repeat;
	height:40px;
}
 
h2 span
{
	display: none;
}
 
p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}
 
#navigation-block {
	position:relative;
}
 
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
 
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
 
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(heading_bg.jpg) repeat-y;
	font-weight: normal;
}
 
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
 
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
 
styles.css
 
.news-category {
	border: 0;
	margin: 3px 5px 0 0;
	float: left;
}
 
.news-footer {
	font-size: 10px;
	color: #555;
	background-color: #f1f1f1;
	border-width: 0 1px 1px 1px;
	border-color: #ddd;
	border-style: solid;
	padding: 3px 4px 4px 4px;
}
 
.capmain {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background-color: #555;
	background-image: url(images/cap.gif);
  background-repeat: repeat-x;
	padding: 6px 4px 6px 4px;
}
 
.capmain-left {
	width: 3px;
	height: 25px;
	background-color: #555;
	background-image: url(images/cap-left.gif);
}
 
.capmain-right {
	width: 3px;
	height: 25px;
	background-color: #555;
	background-image: url(images/cap-right.gif);
}
 
.main-bg {
	color: #555;
	padding: 10px 0 5px 0;
}
 
/* General table properties */
 
.center {
	margin: 0 auto;
}
 
.tbl-border {
	border: 1px solid #e1e1e1;
}
 
.tbl {
	font-size: 11px;
	color: #555;
	background-color: #fff;
	padding: 4px;
}
 
.tbl1 {
	font-size: 11px;
	color: #555;
	background-color: #fff;
	padding: 4px;
}
 
.tbl2 {
	font-size: 11px;
	color: #555;
	background-color: #f1f1f1;
	padding: 4px;
}
 
.forum-caption {
	font-size: 11px;
	font-weight: bold;
	color: #888;
	background-color: #f1f1f1;
	padding: 2px 4px 4px 4px;
}
[HTML] pobierz, plaintext