Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [Js/jQuery] Zwijane menu
Jarod
post
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----


Chciałbym osiągnąć coś podobnego do tego tutaj http://ui.jquery.com/repository/real-world...e/#ui.droppable
z tym, że strona powinna być podzielona na dwie kolumny:
- lewa (menu)
- prawa (cała reszta, content).

Chciałbym aby nie dało się zmieniać szerokości menu ale za to aby była możliwość jego chowania.
Czyli po kliknięciu na te 3 kropki (lub jakąś inną ikonę) menu się chowa do lewej strony (wystaje tylko ikona umożliwiająca wysunięcie lewej kolumny).
I jeszcze jedna ważna rzecz: jak menu jest wysunięte to szerokość prawej kolumny (czyli zawartość strony) nie zmniejsza się (żeby strona się nie rozjeżdżała) tylko zostaje przykryta przez wysunięte menu.

Czy ktoś z Was wie jak coś takiego osiągnąć?

Pozdrawiam

EDIT:
------
Może dodam, że chodzi mi o coś takiego jak w eclipse
Go to the top of the page
+Quote Post
lord_t
post
Post #2





Grupa: Zarejestrowani
Postów: 603
Pomógł: 131
Dołączył: 24.07.2007
Skąd: Górny Śląsk

Ostrzeżenie: (0%)
-----


Załóżmy że masz takie menu (menuWlasciwe ma nadaną szerokość m).
  1. <div id="menuAll">
  2. <div id="menuWlasciwe"><div id="kropki">...</div>
  3. </div>


a w jQuery robisz tak (pseudokod):
Kod
$('kropki').toggle(function(){
$('menuWlasciwe').animate({zmniejsz szerokosc menuWlasciwego do 0});},
function(){$('menuWlasciwe').animate({zmniejsz szerokosc menuWlasciwego do m});}
);


Uwagi:
-animate może dałoby się zastąpić jakimś slideIn/slideOut czy czymś takim
-co do tego, żeby menu przykrywało zawartość to trzeba się pobawić cssem
Go to the top of the page
+Quote Post
Jarod
post
Post #3





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----


Cytat(lord_t @ 5.11.2008, 23:48:11 ) *
Załóżmy że masz takie menu (menuWlasciwe ma nadaną szerokość m).
  1. <div id="menuAll">
  2. <div id="menuWlasciwe"><div id="kropki">...</div>
  3. </div>


a w jQuery robisz tak (pseudokod):
Kod
$('kropki').toggle(function(){
$('menuWlasciwe').animate({zmniejsz szerokosc menuWlasciwego do 0});},
function(){$('menuWlasciwe').animate({zmniejsz szerokosc menuWlasciwego do m});}
);


Uwagi:
-animate może dałoby się zastąpić jakimś slideIn/slideOut czy czymś takim
-co do tego, żeby menu przykrywało zawartość to trzeba się pobawić cssem


Dzięki za zainteresowanie tematem. Wiem, że można kombinować samemu ale szukam raczej sprawdzonego "gotowca", żeby nie okazało się że pod jakąś przeglądarką coś nawala. Gdyby ktoś mógł jeszcze coś dodać będę wdzięczny za każdą wskazówkę.

Pozdrawiam
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.09.2025 - 00:36