Forum PHP.pl > [php] Jak zrobić takie menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [php] Jak zrobić takie menu

-wwojteko-

27.11.2007, 12:14:19

Witam!

Jak zrobić menu tego typu, żeby po kliknięciu na jakąś zakłądke strona się przeładowała i w menu aktualna zakładka została podświetlona lub podkreślona (ogólnie wyrózniona) jak np tu:

http://pogoda.onet.pl/2,miasta.html

chodzi mi o jakieś proste rozwiązanie i czy da się to zrealizować na html+css+php (bez javy) czy tego typu menu robi się na javie. Zaznaczam, że nie chcę robić oddzielnych podstron i żeby wszędzie było menu, tylko żeby było jedno menu a podstrony będą wyświetlane funkcją case w php.

Pozdrawiam i czekam na pomoc.

seiya

27.11.2007, 12:44:16

Wystarczy że dodasz wybranemu elementowi jakąś klasę (css) i odpowiednio ją zdefiniujesz.

-wwojteko-

27.11.2007, 15:00:48

no wlasnnie nie wiem co zdefiniowac, zeby było np podswietlone po zjechaniu myszki i po przeładowaniu strony. Może jakiś kawałek kodu?
Byłbym bardzo wdzięczny

chlebik

27.11.2007, 15:57:34

Masz tu linka i sie pobaw

List-o-Matic Developer Tool

-wwojteko-

27.11.2007, 16:34:39

no spoko fajnie, ale nie ma tam tego czego szukam bo po kliknieciu przycisku wraca do swojgo wygladau startowego a ja chce zeby poprostu bylo zaznaczon to co jest w danej chwili klikniete nawet po przeladowaniu strony.
Ale stronka ciekawa i szybki efekt

wizard3k

27.11.2007, 16:37:55

Dodaj dla aktywnego linka klasę np. active i ostyluj ją odpowiednio w CSS

. Aktywny link, to właśnie ten, który będzie podświetlony

-wwojteko-

27.11.2007, 16:47:43

no własnie tak zrobiłem dla tego menu wygenerowanego przez tą stronkę i go jeszcze kilku i niestety nie działa mi to ;/ a o ile się nie myle to active dziła w momencie kliknięcia przynajmniej tak u mnie to w tej chwili działa.... Jak ktoś ma może kawałek kodu z działającego skryptu to byłbym wdzięczny bo szukam czegoś takiego już drugi dzień przejrzałem wiele różnych menu i żadne tego nie ma.

[HTML] pobierz, plaintext 
<head>
<style>
.navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
 
.navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
 
.navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
 
.navlist li a:link { color: #448; }
.navlist li a:visited { color: #667; }
 
.navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
.navlist li a:active
{
border-color: #66FF33;
color: #3333FF;
background: #FFFFFF;
}
</style>
</head>
<body>
 
<div class="navcontainer">
<ul class="navlist">
	<li><a href="?poz2=2" title="Pozycja 1">Pozycja 1</a></li>
	<li><a href="?poz2=3" title="Pozycja 2">Pozycja 2</a></li>
	<li><a href="?poz2=4" title="Pozycja 3">Pozycja 3</a></li>
</ul>
</div>
[HTML] pobierz, plaintext

itsme

27.11.2007, 20:12:40

i jeszcze jedna prosba na przyszlosc :-)

http://forum.php.pl/Tematyka_i_zasady_panu...ole_t42815.html

chodzi o TAG w temacie

-wwojteko-

28.11.2007, 09:16:00

I szukałem wczoraj przez pol nocy i nie znalazłem takiego czegoś, a jak już coś było to była jakaś java. Wiec jak by ktoś miał kawałek dziłającego takeigo menu to bym poprosił o kod, może gdzieś robię jakiś błąd i go powielam....

krzywy36

1.12.2007, 11:05:16

Ja też szukałem rozwiązania tego problemu

i zrobiłem to po swojemu ;]
Jeśli strony masz robione np. tak
"twojastrona.pl/index.php?strona=strona1"
to w odnośniku do tej strony wstaw kod php a w nim instrukcje if, jeżeli zmienna "strona" będzie miała wartość
"strona1" to wyświetl atrybut klasy zrobionej do takich linków

trochę zagmatwane ale chyba zrozumiesz...
To jest mój sposób, narazie nic lepszego nie wymyśliłem

jak coś to pisz na gg 1024693 ;] Pozdro

Gość

1.12.2007, 11:14:09

Sorry, że post pod postem ale nie mogę edytować

Wie ktoś może jak zrobić, aby wykaz wyświetlał się jednocześnie w lini i bloku??
chodzi o to żeby poszczególne elementy wykazu czyli li były wyświetlane w lini (poziomo) ale żeby każdy z nich był osobnym blokiem ;]
jakieś pomysły??

vellkan

2.12.2007, 11:58:31

Witam

Ja również podpinam się do prośby - jak zrobić taki efekt, że po wejściu na inną podstronę dany link był podświetlony ?
Wiem, że trzeba mu nadać inną klasę, to nie jest problem.
Ale nie wiem jak napisać funkcję, która sprawdzi kliknięty link i doda klasę active dla tego linka, a reszcie nie.

Pomożecie ?

http://vellkan.pl/creative - na tej stronie chciałbym to zrobić. Tam w menu jest efekt rollover menu, ale z tym sobie powinienem poradzić...

krzywy36

2.12.2007, 23:32:02

Tak jak pisałem ;] masz załóżmy odnośnik

[HTML] pobierz, plaintext 
<a href="index.php?id=about">cos</a>
[HTML] pobierz, plaintext

to robisz to tak

[PHP] pobierz, plaintext 
<a<?php
	if($_GET['id']==about)
{
echo " class=\"active\" ";
}
?>
href="index.php?id=about>cos</a>
[PHP] pobierz, plaintext

i tak robisz z każdym linkiem ;]
klase active ustawiasz tak jak ma wygladac ten link aktualnej strony...
mam nadzieje ze pomogłem ;]

-wwojteko-

3.12.2007, 09:07:16

[HTML] pobierz, plaintext 
.navlist li
{
list-style: none;
display: inline;
}
[HTML] pobierz, plaintext

Tak bedzie wyświeltlane w linii i bez znaczków, a co do tego kodu z PHP i instrukcji IF to instrukcja mi działa ale coś nie chce mi brać tej klasy active...ale jeszcze pokombinuje

krzywy36

3.12.2007, 09:25:15

To może spróbuj tak:

[PHP] pobierz, plaintext 
<ul class="navlist">
<li<?php
	if($_GET['id']==about)
{
echo " class=\"active\" ";
}
?>><a href="index.php?id=about">cos</a>
[PHP] pobierz, plaintext

a klase dla tego aktywnego odnosnika ustawiasz tak:

[HTML] pobierz, plaintext 
ul.navlist li.active a:link, ul.navlist li.active a:visited
{
    coś tam;
}
[HTML] pobierz, plaintext

-wwojteko-

3.12.2007, 10:48:12

Udało mi się i wielkie dzięki za ten kawałek PHPowy

. A cały kod wygląda tak może się komuś przyda:

[HTML] pobierz, plaintext 
<style>
.navlist2 li
{
list-style: none;
margin: 0;
display: inline;
}
.navlist2 li a
	{
	padding: 5px 20px 5px 20px;
	border-left: 1em solid #AAB;
	background: #CCD;
	text-decoration: none;
	color:#00CC00;
	}
.navlist2 li a:hover
	{
	border-color: #FE3;
	color: #FFF;
	background: #332;
	}
.active
{
	color:#FF0000;
	text-decoration:none;
}
.active a:link
	{
	border-color: #FE3;
	color: #FFF;
	background: #332;
	}
.active a:visited
	{
	border-color: #FE3;
	color: #FFF;
	background: #332;
	}
</style>
</head>
<body>
 
 
<ul class="navlist2">
	<li
 <?php
    if($_GET['poz2']==2)
	{
	echo " class=\"active\" ";
	}
	?>
	><a href="?poz2=2">Poz 1</a>
	</li>
 
 
 
	<li
 <?php
    if($_GET['poz2']==3)
	{
	echo " class=\"active\" ";
	}
	?>
	><a href="?poz2=3">Poz 2</a>
	</li>
 
 
	<li
 <?php
    if($_GET['poz2']==4)
	{
	echo " class=\"active\" ";
	}
	?>
	><a href="?poz2=4">Poz 2</a>
	</li>
</ul>
[HTML] pobierz, plaintext

vellkan

3.12.2007, 22:04:49

I u mnie wszystko działa

krzywy36, jesteś wielki

Co prawda mam teraz innego zgryza, ale myślę, że i z tym sobie poradzę

Cieszę się, że tu zajrzałem

Pozdrawiam,
vellkan

krzywy36

4.12.2007, 07:43:14

Cieszę się, że pomogłem ;]

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.