Witam serdecznie.
Mam problem ze zrobienien pionowego rozwijanego menu w szablonie beez2. Pomoże ktoś?
Witam serdecznie.
Mam problem ze zrobienien pionowego rozwijanego menu w szablonie beez2. Pomoże ktoś?
Tutaj opisałem sposób na zrobienie menu za pomocą tylko CSS w szablonie beez5. Powinno być podobnie.
wiki.joomla.pl - odpowiedzi na Twoje pytania!
>> MIEJSCE NA TWOJĄ REKLAMĘ << - dokonaj dowolnej (min. 50zł) wpłaty na rzecz PCJ i skontaktuj się ze mną w celu odebrania gratulacji!
Chodzi mi o to jak zrobić by po najechaniu kursorem na pozycję menu "wysuwały" się podpozycje. Nie po kliknięciu tylko po najechaniu żeby wyświetlała się lista podpozycji. Jakie zmiany crobić w CSS?
W zależności od tego jaki chcesz osiągnąć efekt możesz stosować jQuery - dla płynnego rozwijania - lub CSS2 (3). Dla CSS jest to bardzo łatwe.
Tak jak opisał Jdwind menu w Joomla! jest opisane przez listę wypunktowaną <ul> <li></li> </ul>. Przy tworzeniu modułu możesz wybrać jaki styl ma przybrać menu (np. czy ma być listą wypunktowaną). Pod pozycje są opisywane przez znacznik <li></li>. Aby wyświetlić tylko główne pozycje wpisujesz w kodzie CSS:
ul li li {visibility: hidden};
ul li {display: block};
ul li:hover li {visibility: visible};
Opis display: http://www.w3schools.com/cssref/pr_class_display.asp
Opis visibility: http://www.w3schools.com/cssref/pr_class_visibility.asp
Nie wiem, co wszyscy się uparli na te jQuery, kiedy Joomla! korzysta z mootools i nie trzeba ładować dodatkowej biblioteki. Mootools znakomicie sobie z tym radzi.
wiki.joomla.pl - odpowiedzi na Twoje pytania!
>> MIEJSCE NA TWOJĄ REKLAMĘ << - dokonaj dowolnej (min. 50zł) wpłaty na rzecz PCJ i skontaktuj się ze mną w celu odebrania gratulacji!
Mam zbudowane menu w postaci listy wypunktowanej <li> . Problem prawie rozwiązane. Tylko, że chce aby po najechaniu na główną od razu się wyświetlały podpozycje. Bo wyświetla mi się lista ale dopiero jak kliknę w główną pozycję. Nie chce żeby po prostu wyświetlała się po kliknięciu tylko po najechaniu.
strona przesyłam plik zip z plikiem html i stylem w CSS opisującym menu zbudowane na <ul> i <li>. Menu trójpoziomowe.
kod dla tych, którzy nie chcą pobierać:
file.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul class="main">
<li>Poziom 1
<ul>
<li>Poziom 2</li>
</ul>
</li>
<li>Poziom 1
<ul>
<li>Poziom 2
<ul>
<li>Poziom 3</li>
</ul>
</li>
</ul>
</li>
<li>Poziom 1
<ul>
<li>Poziom 2</li>
</ul>
</li>
</ul>
</body>
</html>
style.css
ul.main {
font-size: 15px;
font-weight: bold;
width: 651px;
}
ul.main li{
background-color: green;
display: inline;
float: left;
height: 20px;
margin: 0 1px 0 0;
width: 210px;
}
ul.main ul{
font-weight: normal;
}
ul li ul li {
font-size: 14px;
visibility: hidden
}
ul li:hover ul li{
background-color: #441212;
color: white;
height: 20px;
visibility: visible;
width: 210px;
}
ul.main li ul li {
margin: 1px 0 0 -40px;
}
ul li:hover ul li ul li{
visibility: hidden;
}
ul li ul li:hover ul li{
margin: -18px 0 0 171px;
visibility: visible;
}
Kurcze..dalej nie działa tak jak chce...O to struktura tej pozycji menu:
<li class="item-108 active deeper parent">
<a href="/index.php/2012-10-17-17-48-58/2012-10-18-12-35-36">Pozycja glówna</a>
<ul>
<li class="item-121 current active"> <<<<<<<<pod pozycja>>>>>
<li class="item-122"> <<<<<<<<pod pozycja>>>>>
<li class="item-123"> <<<<<<<<pod pozycja>>>>>
<li class="item-124"> <<<<<<<<pod pozycja>>>>>
<li class="item-125"> <<<<<<<<pod pozycja>>>>>
<li class="item-126"> <<<<<<<<pod pozycja>>>>>
<li class="item-127"> <<<<<<<<pod pozycja>>>>>
</ul>
</li>
Chcę by po najechaniu na: "Pozycja główna" wyświetlała się automatycznie lista pod pozycji. Pozdrawiam.
Znacznik li powinien zgodnie ze standardem HTML zawierać się pomiędzy <ul></ul> lub <ol></ol>. Sprawdziłem to najprostszej wersji Joomla! 2.5.8.
Jeśli ma być widoczna tylko pozycja główna to kod powinien być taki:
<ul> //znacznik początkowy całego menu
<li>Pozycja Główna // właściwa pozycja główna, zauważ że nie ma tu końcowego znacznik </li>
<ul> //znacznik początkowy podpozycji
<li>Podpozycja</li> //właściwa podpozycja
</ul> //znacznik końcowy podpozycji
</li> // znacznik końcowy pozycji głównej
</ul> // znacznik końcowy całego menu
kod CSS: // bez poszczególnych klas i identyfikatorów, testowałem przez Firebug na mojej stronie i działa jak należy
ul li ul li {visibility: hidden};
ul li:hover ul li {visibility: visible};
Byłoby miło gdybyś udostępnił adres tej strony, wtedy łatwiej będzie Tobie pomóc. Jeśli masz ją na serwerze lokalnym, to możesz zrobić backup Akeeba Backup i przesłać plik jpa.
w beez2 sposob JDwind zastosowany w beez5 dziala prawie bez zarzutu. właśnie je zbudowałam - tylko w sumie pominęłam pkt 3. oraz dodałabym że w module menu w opcjach pododawałam menutop we wszystkich trzech miejscach - ID, class, module suffix.
a prawie bez zarzutu - bo nagle przestał działać DJ Image Slider - niestety nie zauważyłam w którym momencie i teraz szukam rozwiązania... być może to bez związku, być może coś się zawiesiło na MAMPie. no ale ten problem to chyba gdzie indziej.
Reguły pisania
Cytuj