Rozwijane menu po naciśnięciu linku

kamil22011

2010-03-28 20:34

Witam,
Jak zrobić rozwijane menu takie jak na stronie http://www.ztm.waw.pl/ ponieważ nie mogę poradzić sobie z tym że po naciśnięciu na przycisk reszta z listy zjeżdża w dół.

» Quick.Cms v2.x

Cinek.ck

2010-03-29 01:33

Może przyda Ci się ten "tutek" http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

lordofhares.com

Dziękuję serdecznie ale nie do końca wiem gdzie co wsadzić.

1. cały kod poniżej wrzucam do container.tpl

<div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
</div>
</div>

2. ten zaś do pliku styli czyli default.css

.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #eef4d3 url('img/left.png') center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a {
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover {
color: #000000;
text-decoration:underline;
}

3. tą linijkę wrzucam do container.tpl przed </head>

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

zmodyfikowałem ją do tj postaci ponieważ pobrany plik jquery.js wpakowałem do core i ta linijka wygląda tak:

<script type="text/javascript" language="javascript" src="$config[dir_core]jquery.js"></script>

4. nie wiem gdzie mam wrzucić ten kod:

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings(& quot;div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});

Na razie mam tak że po wrzuceniu na swoje miejsce jquery.js na górze strony pojawia się przyciemniona część. Nie weim o co chodzi. Proszę o jakieś rady.

kamil22011

2010-03-29 03:00

Poradziłem sobie prawie ze wszystkim a dokładnie to menu działa ale cały czas w górnej części strony jest przyciemniony gruby pas. Powoduje to jquery.js Wiem że po usunięcie z container.tpl linijki dotyczącej prototype.lite.js pas znika. Czy można działać bez tej biblioteki?

Cinek.ck

2010-03-29 13:22

Dzieje Ci się tak ponieważ jquery "gryzie" się z lightbox. Na forum znajdziesz troszkę podpowiedzi jak wymienić lightbox na coś innego, żeby zintegrować jquery z QuickCms np.
http://opensolution.org/Quick.Cms/forum/?p=readTopic&nr=607

lordofhares.com

kamil22011

2010-03-30 15:36

Niestety roebox gryzie się tak samo z jquery jak lightbox.

kamil22011

2010-03-30 15:44

Gdzie powinno wrzucić się ten kod by menu działało? Może źle go umiejscowiłem i dlatego się coś gryzie.

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings (& quot;div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});

Makaron

2010-03-30 15:44

Proszę: http://leandrovieira.com/projects/jquery/lightbox/

kamil22011

2010-03-31 05:03

Dziękuję serdecznie za pomoc w temacie. Wszystko działa wyśmienicie.

mgsinvest

2010-03-31 12:24

kamil22011

podal bys kontakt jakis do siebie

moze pomogl bys mi bo ja mecze sie z tym samym problemem co ty :(