PDA

Zobacz pełną wersję : Jak wystylizowac osobno nizszy poziom menu?



palkierrr
24-07-2010, 13:47
Witam!

Mam pewien problem i postaram sie go tutaj dokladnie opisac.
Na stronce uzywam templatki siteground-j15-59. Robie ta stronke dla kumpla i we wczesniejszej wersji wszystkie funkcjonalnosci templatki mi wystarczaly. Przyszedl czas na rozszerzenie zawartosci strony i kolega zazyczyl sobie aby w top menu pojawily sie subkategorie w postaci drop down menu. Templatka nie obsluguje takiej mozliwosci(przynajmniej z tego co udalo mi sie pokombinowac w oparciu o wiedze zdobyta na tym forum). Postanowilem wiec uzyc modulu menu obslugujacego drop down menu. Zainstalowalem modul Maxi Menu CK for Joomla!1.5 Ma on fajna opcje ktora odpowiada za to ze wybiera sie menu z Joomla! ktore ma zostac wyrenderowane i mozna wybrac opcje pozostawienia stylu menu z templatki. Glowne zalozenie jest bowiem takie aby menu pozostalo w identycznej formie graficznej. Wszystko dziala ale:

1.Chcialbym sie dowiedziec jak w moim pliku template.css wysylizowac tylko nizszy poziom menu(glowna belka ma pozostac bez zmian za to chcialbym ten poziom menu ktory sie wysuwa zrobic w postaci prostokatow zwyklych w kolorze zielonym i tak zeby nie bylo pomiedzy nimi przerwy).

2.Czy to w ogole jest dobry kierunek myslenia? Czy da sie tak zrobic?

3.Mam rowniez problem z okresleniem parametru active dla menu aby napis na przyciskach pozstal czerwony po kliknieciu tak jak sie dzieje w przypadku zachowanie hoover. W kodzie cms wpisalem tak jak widac ale dziala to tylko w przypadku gdy nic przy templatce nie majstruje. Kiedy za wyswietlanie top menu zaczyna odpowiadac modul CK to funkcjonalnosc ta sie gubi :/

Ponizej wklejam kod CSS z pliku template.css wspomnianej templatki, ktory odpowiada za stylizacje owego menu:

.pill_m {
text-align: center;
margin: 0 auto;
padding: 0;
width:938px;
height: 116px;
background: transparent url(../images/topmenu_bg.png) top center no-repeat;
}

#pillmenu {
text-align: left;
padding: 0 0 0 10px;
margin:0 auto;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#pillmenu li {
float: left;
margin: 0;
padding: 0;
background:none;

}

#pillmenu li:hover {

}

#pillmenu li a#active_menu-nav {
color:#F00;
}

#pillmenu li a {
font-family: Calibri, Verdana, Tahoma, sans-serif;
font-size: 16px;
float: left;
display: block;
line-height: 116px;
padding: 0 25px;
margin: 0 1px;
color: #fff;
text-decoration: none;
font-weight: bold;
background: none;
height: 117px;
background: url(../images/pillmenu_bg.png) center center repeat-x;
}

#pillmenu li a:hover {
color: #F00;
text-decoration: none;
background: url(../images/pillmenu_bg_hover.png) center center repeat-x;
}
#pillmenu li a:current {
color: #FF0000 !important;
text-decoration: none;
background: url(../images/pillmenu_bg_hover.png) center center repeat-x;
}
Moje pytanie wynika z faktu ze nie potrafie pisac kodu css :/ Co innego zrozumiec i zmodyfikowac lekko juz istniejacy a co innego napisac cos od siebie :/ Dlatego prosze o wyrozumialosc i nie pisanie odpowiedzi w stylu "to juz bylo", "to jest banal" itd. Naprawde szukalem na formum odpowiedzi na ten temat ale sposrod odnalezionych informacji nie jestem w stanie przy moim poziomie wiedzy skonstruowac odpowiedzi.

Z gory dzieki :)

Robster
24-07-2010, 14:25
Każda pozycja menu ma swój własny identyfikator (kwestia poruszana na forum już nie raz). A co za tym idzie dopisując odpowiedni kod w CSS możesz dowolnie modyfikować każdy element menu, niezależnie od pozostałych elementów. jedynym wymaganiem jest znajomość HTML'a oraz CSS + obsługi narzędzi pozwalających na podgląd kodu źródłowego strony (FireBox - nie wiem czy dobrze pamiętam, lub narzędzia o tym samym działaniu a dostępnym w CHROME).

palkierrr
25-07-2010, 13:41
Wlasnie napisalem, ze nie znam css wiec bardzo prosze o odpowiedz, ktora naprowadzi mnie nieco bardziej.

Robster
25-07-2010, 14:02
Tu nie ma nic do podpowiadania. Napisałem wszystko co jest do tego potrzebne, jeśli nie znasz CSS to zwyczajnie NIC z tym nie zrobisz. Masz tutaj kurs: http://www.kurshtml.boo.pl/ .
Trudne zagadnienie to nie jest, wiec szybko się wszystkiego nauczysz, a przyda Ci się w modyfikowaniu strony jak nic.

palkierrr
25-07-2010, 21:15
ok, dzieki :) bycmoze faktycznie warto teraz troche przeciagnac projekt ale za to nauczyc sie raz i dobrze.
Pozdrawiam