Menu rozsuwane w czym lepiej CSS, JS a pozycjonowanie

Odpowiedz Nowy wątek
2011-07-29 16:52
0

Witam,
Mam potrzebę zrobienia rozsuwanego menu poziomego na stronę. Pytanie w czym lepiej samo CSS czy w JavaScript? Z tego co czytałem w JS nie opłaca się bo później jest problem z pozycjonowaniem, wyszukiwarki nie widzą meny w JS :( Znacie może jakieś fajne przykłady takiego menu? Proszę o wszelkie komentarze i propozycję rozwiązań.

Pozostało 580 znaków

2011-07-29 17:42
ŁF
0

nie zrobisz rozwijanego menu w samym css. menu robisz w html, ostylowujesz w css i dodajesz jakiś szczątkowy js do pokazywania/ukrywania okien. możesz zrobić w samym js, ale jest to słabe rozwiązanie z powodu, który sam wymieniłeś.


edytowany 1x, ostatnio: ŁF, 2011-07-29 17:43

Pozostało 580 znaków

2011-07-29 19:06
0

przepraszam :) wiem, że w samym CSS nie zrobię menu :] chodzi mi o listy, rozwijane menu na listach :) zna ktoś dobre rozwiązanie? jakiś skrypt, który był używany już przez Was? :)

Pozostało 580 znaków

2011-07-29 19:30
0
ŁF napisał(a)

nie zrobisz rozwijanego menu w samym css.

A udowodnić ci, że się da? Przykład:
http://cyg.ovh.org/tutoriale/css_menu_rozwijane.htm

Generalnie to robisz menu, które ukrywasz (overflow: hidden), a gdy ktoś najedzie myszką (pseudoklasa hover) to je pokazujesz. I tyle.

kurka, faktycznie. ale zrobienie w ten sposób menu zawierającego wiele podmenu to czysty masochizm. - ŁF 2011-07-30 00:10

Pozostało 580 znaków

2011-07-29 21:13
bswierczynski
1

Doh! Niby prosta i popularna sprawa, ale prawidłowej odpowiedzi jeszcze nie udało nam się podać. Może ja spróbuję...

Nieprawda, że nie da się zrobić menu rozwijanego na samym CSS. Da się. Od dawna. Jedynie dla IE6 przydałby się fix oparty na JS (lub na plikach .htc, ale to też tak naprawdę JS). Takie menu znane są od wielu lat -- na pewno więcej niż 5. Można je spotkać nawet w nienajnowszej już literaturze (np. "CSS wg Erica Meyera: kolejna odsłona"). IE6 dzisiaj można już zwykle olać, więc nawet ten fix JS-owy już odpada.

Nieprawda też, niestety, że własnością używaną do ukrywania podmenu jest overflow. Zamiast tego, używa się przeważnie visibility: hidden (może z tym się pomyliło -- bo też hidden?) lub display: none. Można też po prostu sterować pozycją za pomocą left/top.

Obecnie, w CSS można nawet zdefiniować animację -- nie potrzeba do tego JS-a. Tyle że to zadziała tylko w najlepszych przeglądarkach.

Najlepiej menu zrobić opierając się na CSS, a JS-a użyć jak rozszerzenia, np. żeby wprowadzić półsekundowe opóźnienie po zjechaniu kursora z menu -- coby nie chowało się natychmiast po przypadkowym, niefortunnym ruchu myszą.

Aha: można powiedzieć, że dla SEO nie ma większego znaczenia, czy użyje się CSS czy JS-a. O wiele bardziej liczy się... HTML. Po prostu dobrze by było, żeby cały kod menu był od razu w samym HTML-u. Czy pokazywanie/ukrywanie podmenu będzie zrealizowane na bazie CSS-a, czy JS-a, to już nie ma wielkiego znaczenia. Jeśli coś jest w HTML-u, googlebot to zobaczy. Z JS jest znacznie trudniej, choć od pewnego czasu bot rozpoznaje pewne konstrukcje (np. chamskie linki z onclick="otworzStrone(url-strony)" -- ale ich i tak nie polecam).

Zwykle jednak rozbudowany kod HTML, zawierający całe menu, kojarzony jest z wykorzystaniem CSS. I to jest dobre wyjście.

da się też zrobić na overflow: hidden - patrz post jeden wyżej - unikalna_nazwa 2011-07-29 23:34

Pozostało 580 znaków

2011-07-29 22:19
0

Napiszę od nowa, ponieważ wcześniej źle sformułowałem moje zapytanie. Otóż chodzi mi o menu rozwijane poziomo w CSS. Przykład takiego menu, jakiego szukam jest użyty chociażby na tej stronie. Tak tu, tutaj na górze po lewej. I mianowicie, problem... mój polega na tym, że jak piszę takie menu w CSS, wiadomo jak mam je na górze jak tu na tej stornie, najeżdżam na menu rozwija się, ale wiadomo te menu jest na CSS więc automatycznie, wszystko co jest pod paskiem menu po jego rozsunięciu idzie w dół :( Cały layout, cały teks idzie w dół na długość, taką jaką się rozwija pasek memu. Teraz pytanie jak z tego problemu wybrnąć ? żeby menu działało w taki sposób, ze zakrywa wszystko co jest pod nim w czasie rozsunięcia, a nie przesuwał wszytko w dół... JS odpada, SEO, wiadomo.

Co ja wypisuję, bez JS nie da rady otrzymać takiego menu :( ale teraz co z SEO? czytałem, że taki mały scrypcik powoduję już spory kłopot dla robocików, jeśli chodzi o czytanie linków href=" " - poniatowski 2011-07-29 22:46

Pozostało 580 znaków

2011-07-29 22:57
0

po prostu tworzysz menu rozwinięte, a zwijasz je js


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<

Pozostało 580 znaków

2011-07-29 22:57
0

W stronach klientów zazwyczaj robię rozwijane menu w czystym cssie, ponieważ zalezy mi tylko na funkcjonalności (chcę uniknąć sytuacji, że na wyłączonym javascripcie nie będzie można poruszać się po stronie). Natomiast w swoich projektach robię ładne animowane z jsem (jquery zazwyczaj), bo zależy mi dużo bardziej na wyglądzie (przeważnie moje projekty prywatne w ok. 80% opierają się na ajaxie, wiec i tak na js off nic nie działa, więc co się będę ograniczać) :P.

ale jak ominąć mam ten problem przesuwania się textu wraz z rozsuwaniem się menu ? w CSS - poniatowski 2011-07-29 23:02

Pozostało 580 znaków

2011-07-29 23:04
0

Np z takim kodem (http://cyg.ovh.org/tutoriale/css_menu_rozwijane.htm):

#menu { /* nasz blok (div) "menu" */ 
width: 150px; /* szerkość menu */
border: 1px solid #D3D3D3; /* obramowanie  menu */ 
height: 30px; /* wysokość pierwszego bloku */
overflow: hidden; } /* tryb ukrywania */
 
#menu:hover { /* najechane menu */
width: 150px; /* szerokość */
height: 100%; } /*wysokość (zmienia sią automatycznie) */
 
ul { /* element ul */
margin: 0px; /* odległość menu od obramowania */
padding: 0px; } /* odległość menu od obramowania*/ 
 
li { /* element "li" */
list-style-type: none; /* rodzaj wykazu */
width: 150px; } /* szerokość */
 
li a { /* linki */
text-decoration: none; /* dekoracja linka */
display: block; /* rodzaj wyświetlenia elementów */
width: 150px; /* szerokość */
padding: 5px; /* odległości */
color: #3B3B3B;  /* kolor linka */ 
font: 10px verdana, sans-serif; /* czcionka */ }
 
li a:hover { /* najechany link */
text-decoration: none; /* dekoracja tekstu */
color: #3B3B3B; /* kolor linka */
width: 150px; /* szerokość */
padding: 5px; /* odległości pomiedzy linkami */
background-color: #F0F0F0 } /* tło */ 
 
p { /* paragraf <p> */
text-align: center; /* tekst wyśrodkowany */
font: 10px verdana, sans-serif; /* czcionka */ }
 
 
<div id="menu"> <p>Menu</p>
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Download</a></li>
 
<li><a href="#">Kontakt</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>

Pozostało 580 znaków

2011-07-29 23:10
0

pouczasz bswierczynskiego a masz problem z podstawami
jak coś ma nie rozpychać to musi być wyjęte z podstawowego biegu dokumentu przez position lub float


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<
ok, przepraszam, możliwe, że masz rację, ale jak zrobić, żeby menu zakrywało wszystko co jest pod nim? tekst, grafikę etc? z-index: 100;? czy w ogóle w css da radę coś takiego zrobić? bez użycia JS? ten przykład, który dałem wyżej jest prosty, co w nim trzeba zmienić na poprawne działanie kodu ? - poniatowski 2011-07-29 23:22
bswierczynskiego, unikalna_nazwa<< racja Pany, dziękować o to mi chodziło :) bardziej poziome jak pionowe, ale jest ok :) dziękuję - poniatowski 2011-07-29 23:43
jako mogę się odwdzięczyć ... - poniatowski 2011-07-30 00:03

Pozostało 580 znaków

2011-07-30 10:02
bswierczynski
0

@unikalna_nazwa:
Widzisz tu jakiś sens użycia overflow: hidden? Jak dla mnie to nienaturalne, mniej uniwersalne i niepotrzebnie komplikuje sprawę. Musimy przycinać podmenu naszym menu górnego poziomu. Nie lepiej (naturalniej!) po prostu je pokazywać/ukrywać? Czy ja tu nie widzę jakiegoś benefisu? To menu wydaje mi się po prostu raczej słabo zakodowane. Co nie dziwi: w necie pełno beznadziejnego kodu.

@ŁF:
Nie jest tak źle jeśli tylko możesz olać IE6 (a powinieneś móc już od jakiegoś czasu). Można użyć pozycjonowania relatywnego i wtedy całkiem sprawnie robi się wielopoziomowe menu. Nawet chyba Meyer demonstrował więcej poziomów niż 2. W IE6 jednak nie było kombinatora > i wtedy tworzenie wielopoziomowego menu w CSS było masochizmem. Spróbuj pokazać tylko menu bezpośrednio następnego poziomu (a nie jeszcze mocniej zagnieżdżone) za pomocą zwykłego selektora elementu potomnego ;). Trzeba było albo spamować klasami menu-level-1, menu-level-2 itd., albo nadpisywać reguły pokazujące, które nadpisywały reguły pokazujące, które ... (i tak parę poziomów).

Ale te czasy już odeszły.


TBH ostatnio menu rozwijane za pomocą czystego CSS robiłem do profesjonalnego projektu jakiś miesiąc temu, może nawet mniej. Co prawda nie było wielopoziomowe, ale całość napisałem raz-dwa z palca i nawet się nie spociłem. Nie jest to więc trudne. Trzeba tylko umieć pozycjonować elementy bezwzględnie (wielkie mecyje!) oraz znać pseudoklasę :hover (srsly?), wiedzieć, że pseudoklasa ta tyczy się nie tylko linków i umieć ukryć jakiś element.

Poproszę przykład w kodzie takiego menu? o ile to możliwe ? - poniatowski 2011-07-30 11:20
Prosiłbym o więcej podpowiedzi, jak stworzyć idealne menu. - poniatowski 2011-07-30 12:54

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0