|
Wstawienie własnych buttonów do nawigacji poziomej
|
| BenLomax |
Dodany dnia 10.10.2008 14:20:11
|
Bywalec
Postów: 426
Pomógł: 25
Ostrzeżeń: 1
Data rejestracji: 25.06.2008 09:48
|
Witam, chciałbym zamienić domyślne menu poziome na takie cudo:
I jeśli jest taka możliwość by po najechaniu kursorem guzik podświetlał się.
Edytowane przez Pieka dnia 10.10.2008 14:33:34
|
| |
|
|
| Wścibski Gość |
Dodany dnia 24.11.2024 20:45:32
|
Pan Kontekstualny
Postów: n^x
Data rejestracji: Zawsze
|
|
| IP: localhost |
|
|
| sasii |
Dodany dnia 10.10.2008 16:22:33
|
Przedszkolak
Postów: 24
Pomógł: 1
Data rejestracji: 03.09.2008 17:47
|
Takie menu można zrobić za pomocą stylu css.
Zamiast showsublinks dajesz
.preg_replace("^(li)( class='(first-link)')*(><a href='(\.\./)*".preg_quote(START_PAGE)."')^i", "\\1 class='active \\3'\\4", showsublinks("")).
Potem w stylu css dodajesz clasy np.:
#TabMenu1
{
float: left;
font-family: Arial;
font-size: 13px;
line-height: 33px;
}
#TabMenu1 ul
{
margin: 0;
padding: 0px 0px 3px 10px;
list-style: none;
}
#TabMenu1 li
{
display: inline;
margin: 0;
padding: 0;
}
#TabMenu1 a
{
float: left;
background: url("images/menu_01.jpg") no-repeat left top;
margin: 0;
padding: 0 0 0 15px;
text-decoration: none;
}
#TabMenu1 a span
{
float: none;
display: block;
background: url("images/menu_02.jpg") no-repeat right top;
padding: 0px 15px 0px 0px;
color: #627EB7;
font-weight: bold;
text-decoration: none;
}
#TabMenu1 a:hover span
{
background-position: 100% -33px;
color: #627EB7;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#TabMenu1 a:hover
{
background-position: 0% -33px;
}
#TabMenu1 .active a
{
background-position: 0% -66px;
}
#TabMenu1 .active a span
{
background-position: 100% -66px;
color: #627EB7;
font-weight: bold;
text-decoration: blink;
}
Tak zrobiłem na mojej stronce http://www.my-des...ticles.php
Edytowane przez sasii dnia 10.10.2008 16:23:15
|
| |
|
|
| BenLomax |
Dodany dnia 10.10.2008 18:38:04
|
Bywalec
Postów: 426
Pomógł: 25
Ostrzeżeń: 1
Data rejestracji: 25.06.2008 09:48
|
sasii napisał/a:
Takie menu można zrobić za pomocą stylu css.
Zamiast showsublinks dajesz
.preg_replace("^(li)( class='(first-link)')*(><a href='(\.\./)*".preg_quote(START_PAGE)."')^i", "\\1 class='active \\3'\\4", showsublinks("")).
]
Możesz z tym jaśniej? Gdzie i co mam zmienić? |
| |
|
|
| sasii |
Dodany dnia 10.10.2008 18:53:41
|
Przedszkolak
Postów: 24
Pomógł: 1
Data rejestracji: 03.09.2008 17:47
|
To pierwsze masz w themie a to drugie wstawiasz do stylu css (oczywiście po zmianach na swój styl). |
| |
|
|
| BenLomax |
Dodany dnia 10.10.2008 19:14:00
|
Bywalec
Postów: 426
Pomógł: 25
Ostrzeżeń: 1
Data rejestracji: 25.06.2008 09:48
|
sasii napisał/a:
To pierwsze masz w themie (...).
Nie dużo mi to mówi. Co teraz?
echo "<td class='sub-header'>".showsublinks(" ".THEME_BULLET." ", "white")."</td>\n";
|
| |
|
|
| sasii |
Dodany dnia 10.10.2008 19:41:22
|
Przedszkolak
Postów: 24
Pomógł: 1
Data rejestracji: 03.09.2008 17:47
|
Np. w skórce Similitude06 masz coś takiego :
echo "<td class='sub-header'>".showsublinks(" <span class='bullet'>·</span> ","white")."</td>\n";
zamieniasz na coś takiego :
echo "<td class='sub-header'>".preg_replace("^(li)( class='(first-link)')*(><a href='(\.\./)*".preg_quote(START_PAGE)."')^i", "\\1 class='active \\3'\\4", showsublinks(""))."</td>\n";
A w pliku css dodajesz :
...
.sub-header a {
float: left;
background: url("images/menu_01.jpg") no-repeat left top;
margin: 0;
padding: 0 0 0 15px;
text-decoration: none;
}
...
Proponuje poczytać o stylach css np. tu http://www.kursht.../menu.html
Edytowane przez sasii dnia 10.10.2008 19:44:27
|
| |
|
|
| BenLomax |
Dodany dnia 14.10.2008 13:53:33
|
Bywalec
Postów: 426
Pomógł: 25
Ostrzeżeń: 1
Data rejestracji: 25.06.2008 09:48
|
Udało mi się wykonać to co chce w ten sposób, do pliku theme.php dodałem // Menus Starts
echo '<table width="100%%" height="30" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#F5FFE4" bgcolor="#F5FFE4" id="Table_02">
<tr>
<td><a href="'.BASEDIR.'index.php">
<img src="'.THEME.'images/menu_02.jpg" width="91" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'news.php">
<img src="'.THEME.'images/menu_04.jpg" width="74" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'viewpage.php?page_id=1">
<img src="'.THEME.'images/menu_06.jpg" width="74" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'viewpage.php?page_id=2">
<img src="'.THEME.'images/menu_08.jpg" width="74" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'photogallery.php">
<img src="'.THEME.'images/menu_10.jpg" width="77" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'news_cats.php">
<img src="'.THEME.'images/menu_12.jpg" width="74" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'infusions/guest_book/guest_book.php">
<img src="'.THEME.'images/menu_14.jpg" width="81" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'forum/index.php">
<img src="'.THEME.'images/menu_16.jpg" width="52" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'weblinks.php">
<img src="'.THEME.'images/menu_18.jpg" width="52" height="30" alt="" border="0" /></td>
<td><a href="'.BASEDIR.'contact.php">
<img src="'.THEME.'images/menu_24.jpg" width="57" height="30" alt="" border="0" /></td>
</table>';
// Menu Ends
Kliknij i zaczekaj na załadowanie kodu ...
Nawigacja pozioma ładnie się wyświetla, pytanie mam natomiast jak uzyskać efekt by po najechaniu na button myszka zmieniał kolor (za 1 guzik odpowiadają 2 obrazki, lub tak jak jest np. w phpBB za guzik odpowiada obrazek na którym są dwa dwa guziczki, jeden pod drugim). |
| |
|
|
| Pieka |
Dodany dnia 14.10.2008 14:04:58
|
Postów: 19882
Pomógł: 767
 v7.02.03
Data rejestracji: 23.02.2005 18:12
|
BenLomax napisał/a:
...pytanie mam natomiast jak uzyskać efekt by po najechaniu na button myszka zmieniał kolor (za 1 guzik odpowiadają 2 obrazki..
Wystarczylo poszukac aby znalezc artykul: http://www.php-fu...icle_id=18 oraz tematy na forum.
Edytowane przez Pieka dnia 14.10.2008 14:05:45
Jestem jaki jestem  |
| |
|
|
| BenLomax |
Dodany dnia 14.10.2008 17:05:45
|
Bywalec
Postów: 426
Pomógł: 25
Ostrzeżeń: 1
Data rejestracji: 25.06.2008 09:48
|
Dzięki @Pieka za linka, ale bez Waszej pomocy nie dam rady :(, za dużo tu " i ', oczopląsu dostaje:
<td><a href="'.BASEDIR.'index.php">
<img src="'.THEME.'images/menu_02.jpg" width="91" height="30" alt="" border="0" /></td>
<a href='#'>
<img src='obrazek1.png' onMouseOver='this.src="obrazek2.png"' onMouseOut='this.src="obrazek1.png"'></a>
Pomocy, jak przerobić 1-wszy kod by był zgodny z 2-gim.
Wiadomość doklejona:
Ha! Udało się :) , oto kod:
<td><a href="'.BASEDIR.'index.php">
<img src="'.THEME.'images/menu_02.jpg" onMouseOver=this.src="'.THEME.'images/menu_02a.jpg" onMouseOut=this.src="'.THEME.'images/menu_02.jpg" alt="" border="0"/></td>
Edytowane przez BenLomax dnia 14.10.2008 17:40:18
|
| |
|
Rozwiń Kod źródłowy PHP
