PDA

Zobacz pełną wersję : Jak zastosować #current w menu joomla


Panda1
14-10-2011, 21:40
Proszę o pomoc. Mam takie menu: bez żadnej akcji tło odnośnika jest szare, odnośnik jest zielony, po najechaniu na niego myszą zmienia się tło na zielone i kolor odnośnika na biały, po kliknięciu na niego również się zmienia tło na zielone, odnośnik na biały. Jednak kiedy kliknę na podstronę, na nia przejde i odsunę mysz kolor odnośnika nie zostaje zielony tylko zmienia się na szary a odnośnik na zielony czyli wszystko wraca do punktu wyjścia i użytkownik nie wie gdzie jest w sumie. Sorki za taki dziwny opis ale nie umiem inaczej. Chodzi mi o to czy ktoś wie jak zastosować #current aby link menu wyświetlanej strony pozostał zielony a odnośnik biały. (chodzi żeby użytkownik wiedział gdzie jest aktualnie). Szukam już 3 dzień i nigdzie nie moge znaleźć porady. Jestem w czarnej rozpaczy:(
Mój kod css jest teraz taki:
/* menu header */

ul#mainlevel-nav{
width : 100%;
list-style : none;
padding : 0;
margin : 0;
height : 70px;


}
ul#mainlevel-nav li{
display : inline;
background : url(../images/szary.php.png) repeat-x;
float : left;
white-space : nowrap;
text-decoration : none;
}

ul#mainlevel-nav li a {
color : #57857b;
height : 50px;
width : 140px;
padding : 8px 6px 11px 6px;
display : block;
font-weight : bold;
text-decoration : none;
}

ul#mainlevel-nav li a:hover, ul#mainlevel-nav li a:active{
background : url(../images/zielony.png) repeat-x;
padding : 10px 6px 9px 6px;
color : white;
}
PeFik
14-10-2011, 22:01
nie wiem jaki masz szablon, ale w większości pozycja aktywna ma zawsze class=" active" - sama z siebie
Panda1
14-10-2011, 22:05
Szablon robię od zera. Wszystko ładnie smiga tylko ta jedna rzecz nie:( Active to nie to, bo spowodował zmianę owszem, ale tylko kiedy naciskam na link i trzymam na nim myszą. Kiedy odjeżdżam kolor powraca na szary, a chcę aby pozostał zielony. Znalazłem na ten temat na innym forum http://peb.pl/tworzenie-stron/661922-pomocy-menu-active-css-w-joomal.html ale za nic mi ta zasada z #current podana tam nie działa:(
PeFik
14-10-2011, 22:27
A nie lepiej było nie od zera, a bazować na frameworku, albo bardzo prostym szablonie np. AfterBurner - zaoszczędził byś jakieś 3h-6h pracy ?

Podaj linka do strony - swojej !
a_m
14-10-2011, 22:41
masz link do strony?
Panda1
14-10-2011, 22:50
Jeszcze jej nie mam na serwerze, tylko na xampp tworze. Szablon jest mega prosty i już jest właściwie skończony, tylko ta jedna rzecz mi została. Moge podać kod PHP I CSS bo jest go bardzo mało.
Plik index.php
<?php
defined( '_JEXEC' ) or die( 'Dostęp zastrzeżony' );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">

<head>
<jdoc:include type="head" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="templates/<?php echo $this->template ?>/css/template.css"
rel="stylesheet" type="text/css" media="all" />
</head>


<body>
<div id="wrapper">
<div id="header">
<jdoc:include type="modules" name="top" style="xhtml" />
</div><!-- end #header -->

<div id="topMenu">
<jdoc:include type="modules" name="topmenu" style="xhtml" />
</div><!-- end #topMenu -->

<div id="mainContent">
<div id="content">
<jdoc:include type="component" />
</div>
<div/><!--end #mainContent -->

<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
<div/><!--end #footer -->
</div><!-- end #wrapper -->
</body>
</html>

Plik css







body{background-color: #57857b;}


#wrapper{width: 747px; margin:auto; background-color: white }
#header{width: 747px; margin:auto; padding:10px; background-color: white}
#topMenu{width: 747px; height: 100px; margin:auto; padding: 10px; background-color: white}
#mainContent{width: 747px; margin:auto; padding:10px; background-color: white}
#content{width:650px; margin:auto;}
#footer{width 747px; margin:auto; padding:10px;}

/* menu header */

ul#mainlevel-nav{
width : 100%;
list-style : none;
padding : 0;
margin : 0;
height : 70px;


}
ul#mainlevel-nav li{
display : inline;
background : url(../images/1gradient.php.png) repeat-x;
float : left;
white-space : nowrap;
text-decoration : none;
}

ul#mainlevel-nav li a {
color : #57857b;
height : 50px;
width : 140px;
padding : 8px 6px 11px 6px;
display : block;
font-weight : bold;
text-decoration : none;
}

ul#mainlevel-nav li a:hover, ul#mainlevel-nav li a:active{
background : url(../images/gradient.php.png) repeat-x;
padding : 10px 6px 9px 6px;
color : white;
}

ul#mainlevel-nav li a:#current {
background : url(../images/gradient.php.png) repeat-x;
padding : 10px 6px 9px 6px;
color : white;
}
PeFik
14-10-2011, 22:53
a bawiłeś się Firebug-iem do FF
Panda1
14-10-2011, 22:55
Firebug mam praktycznie cały czas włączony. Cały czas z niego korzystam. Badam wszystkie możliwe opcje.
nikszal
14-10-2011, 23:08
to zbadaj, czy dopisanie display: block pomoże
Panda1
14-10-2011, 23:19
Chodzi mi o taki efekt jak jest na stronie pomoc joomla czyli jestem na stronie administracja i na górze menu link administracja jest przezroczysty no u mnie byłby to inny jpg http://www.pomoc.joomla.pl/content/section/4/26/
nikszal
14-10-2011, 23:27
Nie działa dopisana deklaracja dispaly: block; aktywnego linku dla tła zdefiniowanego przez obrazek?

Przenieś tę stronę na jakiś serwer wirtualny, bo na razie dyskutujemy o różnych rzeczach.
Jac
15-10-2011, 21:28
Masz błąd w CSS. No panowie, nikt nie zauważył?

Jest:

ul#mainlevel-nav li a:#current {
background : url(../images/gradient.php.png) repeat-x;
padding : 10px 6px 9px 6px;
color : white;
}


A powinno być:

ul#mainlevel-nav li#current a {
background : url(../images/gradient.php.png) repeat-x;
padding : 10px 6px 9px 6px;
color : white;
}
Panda1
16-10-2011, 19:50
Dalej nie działa:( Nie rozumiem co jest nie tak:( Wrzucę tą stronę na serwer jak najszybciej i prześlę link. Może wtedy coś poradzimy.
Panda1
20-10-2011, 00:13
Podaję link do stronki. Jak komuś wpadnie to piszcie proszę. Chodzi o to żeby odnośnik pozostał szary po kliknięciu w niego i odjechaniu myszą czyli przez cały czas pobytu użytkownika na stronie: http://www.ortopeda-romaszkiewicz.pl/
Jac
20-10-2011, 10:00
ul#mainlevel-nav li a:hover, ul#mainlevel-nav li a:active, ul#mainlevel-nav li a#active_menu-nav {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("../images/gradient3.php.png");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto auto;
color: #499483;
line-height: 300%;
}
Panda1
20-10-2011, 12:53
Działa:) Jesteś genialny. Dzięki:))))Pozdrawionka:)