menu top lista pozioma

[mnich20]

Witam, mam problem z active_menu w menu top.
Mimo że mam w css zadany styl wyróżniający aktywną zakładkę na stronie to nie działa i nic dziwnego w kodzie nie ma tego stylu:


<ul class="menu"><li class="item25"><a href="index.php"><span>hom</span></a></li>
<li class="item38"><a href="/navigators"><span>navigator</span></a></li>
<li class="item27"><a href="/studio"><span>studio</span></a></li>
<li class="item28"><a href="/oficyna"><span>oficyna</span></a></li>
<li class="item29"><a href="/introligatornia"><span>introligatornia</span></a></li>
<li class="item30"><a href="/galeria"><span>galeria</span></a></li>
<li class="item31"><a href="/wydawnictwa"><span>wydawnictwa</span></a></li>
<li class="item32"><a href="/inne-prace"><span>inne prace</span></a></li>
</ul>
Dodam że wyróżnienie menu prawego działa prawidłowo czy to przez wybranie "listy", a nie poziomo w tabeli?
Czy ja tu coś namieszałem w cssie?


#m {
background: url(../images/k_menu.jpg) 0 0 no-repeat;
margin: 0;
padding: 0;
height: 17px;
}
#m a {
text-transform: none;
font-size: 11px;
color: #fff;
float: left;
text-decoration: none;
display: block;
cursor: pointer;
line-height: 17px;
padding: 0 15px;
}
#m li a {
background: url(../images/k_menu.jpg) 100% 0 no-repeat;
}
#m li a:hover{}
#m li li a{
background: none;
font-weight: normal;
padding: 0;
text-indent: 15px;
text-transform: none;
color: #939393;
line-height: 30px;
}
#m li:hover a {
color: #f37324;
}
#m li li:hover a {
color: #f37324;
}

#m #active_menu{
color: #f37324;
}
Umieszczam link do testowej strony.

Dodam jeszcze że próbuje unikat tabel na stronie jak ognia.

[Robster]

No nie działa bo nie ma zdefiniowanej klasy. Musisz dodać klasę opisującą aktywny element #m li i będzie działało.

[mnich20]

Coś ucięło mi szablon css tu jest pełny jest #m li i dla pewności dodałem #m li #active_menu {}
dziwne że na stronie w kodzie źródłowym niema żadnego wyróżnika, tak jak to jest w menu prawym:

<li><a href="/navigators" class="mainlevel" id="active_menu">navigator</a></li>css menu


#m li a {
background: url(../images/k_menu.jpg) 100% 0 no-repeat;
}
#m li a:hover{}
#m li li a{
background: none;
font-weight: normal;
padding: 0;
text-indent: 15px;
text-transform: none;
color: #939393;
line-height: 30px;
}
#m ul li ul li a:hover{
background: none;
}

#m ul li a:hover,
#m ul li ul li ul li a:hover {
color: #f37324;
}

#m li li {
padding: 0;
background: none;
}
#m ul ul a {
display: block;
color: #f37324;
text-decoration: none;
width: 167px;
text-transform: none;
font-size: 11px;
text-align: left;
}
#m li {
padding: 0;
background: none;
height: 17px;
}
#m ul li {
z-index: 1;
}
#m li ul {
height: auto;
width: 170px;
font-weight: normal;
border-width: 0;
margin: 0;
padding: 0;
}
#m ul {
padding: 0;
margin: 0;
}
#m li li {
padding: 0;
width: 170px;
}
#m li ul ul {
margin: -25px 0 0 170px;
}
#m li:hover ul ul,
#m li:hover ul ul ul {
left: -999em;
}
#m li:hover ul,
#m li li:hover ul{
left: 0;
}
#m li:hover{
left: 0;
color:#f37324;
}
#m li #active_menu{
color: #f37324;
}próbowałem z: #m li:active a{}, #m li li:active a{}, #m #active_menu{}, sprawdzałem też z kolorkiem pod same #m li{}, bez rezultatu.

[Robster]

A spróbuj #m ul li.

[zwiastun]

Ten kod


<li><a href="/navigators" class="mainlevel" id="active_menu">navigator</a></li>

pochodzi z Joomla 1.0 albo z trybu zgodności z Joomla 1.0.
W Joomla 1.5 tylko 1 opcja (Lista) w stylach wyświetlania menu jest w pełni zgodna ze standardami. Zacznij więc od uporządkowania tej części witryny.
Kombinacje z identyfikatorem active_menu nie mają w Joomla 1.5 zbytniego sensu. Ale jeśli Ci zależy, podejrzyj kod CSS w szablonie rhuka dla Joomla 1.0

[mnich20]

Robster
A spróbuj #m ul li.


brak rezultatu


pochodzi z Joomla 1.0 albo z trybu zgodności z Joomla 1.0.
W Joomla 1.5 tylko 1 opcja (Lista) w stylach wyświetlania menu jest w pełni zgodna ze standardami. Zacznij więc od uporządkowania tej części witryny.
Kombinacje z identyfikatorem active_menu nie mają w Joomla 1.5 zbytniego sensu. Ale jeśli Ci zależy, podejrzyj kod CSS w szablonie rhuka dla Joomla 1.0

Znasz jakiś artykuł który opisuje w sensowny sposób menu lista z przykładami [oczywiście z aktywnym elementem].

Byłbym wdzięczny :)

[zwiastun]

Znam, ale nieopublikowany :). Przykro mi.

[Robster]

T
Kombinacje z identyfikatorem active_menu nie mają w Joomla 1.5 zbytniego sensu. Ale jeśli Ci zależy, podejrzyj kod CSS w szablonie rhuka dla Joomla 1.0

@zwiastun możesz jaśniej? Ja u siebie zrobiłem menu z active_menu, a wszystko działa jak należy (czyt. jeszcze nic się nie sypnęło).

[zwiastun]

nie mają sensu, bo obsługują menu jako listę, ale tworzone zgodnie z regułami dla Joomla 1.0, a nie dla 1.5. Wybierz w parametrach modułu menu styl Lista i zobaczysz, ze Twoje reguły CSS do niczego już nie posłużą.

[Robster]

Yhy teraz rozumiem. Nigdy nie miałem do czynienia z J! 1.0 :)

[mnich20]

Odświeżę temat.
Mam poprawione menu w liście na prawym menu active i fokus działa poprawnie, ale czemu w top menu kiedy to też lista nie ma takiego samego wyróżnika.

<li id="current" class="active item2">

czy to błąd css czy może joomla nie brał pod uwagę takiego rozwiązania.

[Robster]

To zależy jak podpisałeś klasę. Jeśli dałeś tylko li to powinno działać poprawnie. Natomiast bez linku do strony/większej ilości kodu ciężko coś powiedzieć.

PS
Mam nadzieję, że wiesz o tym, że ten kawałek kodu:
id="current" może pojawić się tylko raz, a przypisywanie go do każdego <li> jest błędem.

[mnich20]

Link do strony jest w pierwszym poscie i tu
dla menu top css

#m {
background: url(../images/k_menu.jpg) 0 0 no-repeat;
margin: 0;
padding: 0;
height: 17px;
}
#m a {
text-transform: none;
font-size: 11px;
color: #fff;
float: left;
text-decoration: none;
display: block;
cursor: pointer;
line-height: 17px;
padding: 0 15px;
}
#m li a {
background: url(../images/k_menu.jpg) 100% 0 no-repeat;
}
#m li a:hover{}
#m li li a{
background: none;
font-weight: normal;
padding: 0;
text-indent: 15px;
text-transform: none;
color: #939393;
line-height: 17px;
}
#m ul li ul li a:hover{
background: none;
}
#m ul li a:hover,
#m ul li ul li ul li a:hover {
color: #f37324;
}
#m ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#m li li {
padding: 0;
background: none;
}
#m ul ul a {
display: block;
color: #f37324;
text-decoration: none;
width: 167px;
text-transform: none;
font-size: 11px;
text-align: left;
}
#m li {
float: left;
padding: 0;
background: none;
height: 17px;
}
#m ul li {
position: relative;
z-index: 1;
}
#m li ul {
top: 30px;
position: absolute;
left: -999em;
height: auto;
width: 170px;
font-weight: normal;
border-width: 0;
margin: 0;
padding: 0;
}
#m ul {
padding: 0;
margin: 0;
margin-left: 2px;
}
#m li li {
float: left;
padding: 0;
width: 170px;
}
#m li ul ul {
margin: -25px 0 0 170px;
}
#m li:hover ul ul,
#m li:hover ul ul ul,
#m li:hover ul ul ul ul {
left: -999em;
}
#m li:hover ul,
#m li li:hover ul,
#m li li li:hover ul,
#m li li li li:hover ul{
z-index: 100;
left: 0;
}
#m li:hover{
left: 0;
color:#f37324;
}
#m li:hover a,
#m li li:hover a{
color: #f37324;
}

[Robster]

Przepraszam, otworzyłem kilka zakładek na raz i nie sprawdziłem, czy się tutaj wypowiadałem, czy nie i co jest w poprzedniej zakładce.

A próbowałeś skorzystać z active? Nie za bardzo orientuję się w focus, więc dużo w tym kierunku nie doradzę, ale myślę że użycie active powinno załatwić sprawę.

[mnich20]

Z tego co już się nauczyłem przez testowanie css na listach active działa tylko przy kliknięciu na zakładkę, a current trzyma wyróżnioną zakładkę.
Co do focu'sa czytałem na forach że działa podobnie jak active.

P.S. 2 posty wyżej myślałem o current a napisałem focus mój błąd.

[zwiastun]

Atrybutów klas i wyjątków w menu Joomla! (active, current, itemXXX) nie należy mylić z pseudoklasami :hover, :active. W podanym fragmencie arkusza stylów w ogóle nie masz reguł dla tych selektorów. Pseudoklasa :focus pewno może być przydatna do stylizacji menu, ale na pewno nie jest potrzebna do uzyskania efektów, jakie opisujesz.

[mnich20]

zwiastun nie denerwuj się jak coś chlapnę :) wciąż się uczę.

Dodałem do css:

#m ul li a:active{
color: #000;
} po stronie reaguje podczas naciskania zmienia się kolor na czarny [testowy].

małe podsumowanie [co jest oczywiste]:
:active - po kliknięciu
:hover - odpowiada za akcję gdy kursor jest nad zakładką
:link - formatuje odnośnik
:visited - odpowiada za wygląd odwiedzonych zakładek

w prawym menu za wyróżnienie aktywnej zakładki czyli gdzie się aktualnie znajdujemy odpowiada #current ale on nie może się powtarzać.

Jest jakiś odpowiednik dla #current aby i na topie był cały czas podświetlona zakładka w której się aktualnie przebywa?

[zwiastun]

Nie bardzo rozumiem, o co pytasz. Jeśli chodzi o selektory, to przecież możesz stosować złożone.
Na marginesie: kolejność wymieniania (na pewno w arkuszu CSS) tych pseudoklas jest ważna - link, visited, hover, active.

[mnich20]

Próbuje osiągnąć taki efekt jak jest w menu prawy po kliknięciu na jakiś dział owa zakładka zostaje podświetlona na inny kolor do momętu aż kliknę na inną zakładkę.
Nie wiem czy to dobrze opisuje. Zgadzam się ze kolejność powinna być zachowana post wyżej pisałem impulsywnie co pierwsze przyszło mi do głowy.
W arkuszu css może być trochę zamieszania aktualnie testuje style i efekty.

pozdrawiam