Mam nadzieje, że dobrze trafiłem z pytaniem, problemem.
Pytanko dotyczy menu a dokłanie zapamiętania wybranej opcji z menu. np user wybiera coś , strona zostaje przeładowana, w ybrana opcja zostaje zaznaczona. Czy istnieje możliwość wykonania tego przy zastosowaniu css, znaczników ul li bez js. jeżeli tak proszę o pomac (wskazówkę)
Dziękuję
fifi
menu zapamiętanie wybranej opcji
Re: menu zapamiętanie wybranej opcji
Jeżeli bez JS to tylko w PHP i było by z tym odrobinę roboty. CSS Ci tego nie zrobi bo jest to tylko i wyłącznie język opisowy elementów. W momencie gdy strona zostanie przeładowana, stan strony wróci do pierwotnego stanu gdyż najzwyczajniej CSS nigdzie nie przechowuje żadnych danych na temat czegokolwiek.
Re: menu zapamiętanie wybranej opcji
A wlaśnie że da rade, każdy element body ma inne id i w menu do tego id przypisujemy inny wygląd i po kłopocie
Re: menu zapamiętanie wybranej opcji
No dobrze ale bez użycia PHP czy JavaScript jak chcesz zmienić to id ? 
Poza tym jak już to nie id a klasę, chyba że validator ma kipieć ze złości.
Poza tym nie trzeba od razu się tak szeroko bawić w liczne ID czy klasy. Wystarczy np stworzyć kontener o ID menu a w nim listę (UL).
W CSS tworzysz wpis opisujący styl w postaci: #menu ul li { kod } i po sprawie. Problem polega na tym co zrobić z aktywnym linkiem i tu pozostaje Ci JS albo PHP. W PHP sprawdzamy otwartą stronę w zależności od tego jak ją otwieramy ale ogólnie nie jest to efektywny sposób. Trzeba kombinować a sam efekt nie jest tego wart.
W JSbierzesz po prostu wpis onclick="menu()"
Sama funkcja menu musi działać na pętli i tu przyda Ci się znajomość DOM. Pętla usuwa klasę lub ustawia na domyślną we wszystkich elementach menu a następnie przypisuje klasę do elementu klikniętego. Najlepiej w tym wypadku posłużyć się this.className
Poza tym jak już to nie id a klasę, chyba że validator ma kipieć ze złości.Poza tym nie trzeba od razu się tak szeroko bawić w liczne ID czy klasy. Wystarczy np stworzyć kontener o ID menu a w nim listę (UL).
W CSS tworzysz wpis opisujący styl w postaci: #menu ul li { kod } i po sprawie. Problem polega na tym co zrobić z aktywnym linkiem i tu pozostaje Ci JS albo PHP. W PHP sprawdzamy otwartą stronę w zależności od tego jak ją otwieramy ale ogólnie nie jest to efektywny sposób. Trzeba kombinować a sam efekt nie jest tego wart.
W JSbierzesz po prostu wpis onclick="menu()"
Sama funkcja menu musi działać na pętli i tu przyda Ci się znajomość DOM. Pętla usuwa klasę lub ustawia na domyślną we wszystkich elementach menu a następnie przypisuje klasę do elementu klikniętego. Najlepiej w tym wypadku posłużyć się this.className
Re: menu zapamiętanie wybranej opcji
Może mały przykład wyjaśniający co miałem na myśli:
html:
I CSS:
Małe wyjaśnienie, cała zabawa zaczyna się w dwóch regułach CSS zaczynających się od body#strona
Strona oparta na powyższym przykładzie działa w praktyce już od mniej więcej pól roku.
Oczywiście można sie bawić php i js i czasami nawet trzeba, ale jak to nie jest konieczne, to po co.
html:
Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body id=strona1'>
<ul id='tabs'>
<li id='tab1'><a href='strona1.html'><span>Strona 1</span></a></li>
<li id='tab2'><a href='strona2.html'><span>Strona 2</span></a></li>
<li id='tab3'><a href='strona3.html'><span>Strona 3</span></a></li>
<li id='tab4'><a href='strona4.html'><span>Strona 4</span></a></li>
<li id='tab5'><a href='strona4.html'><span>Strona 5</span></a></li>
</ul>
<div id='tresc>
</div>
</body>
</html>
Kod: Zaznacz cały
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: rgb(222, 222, 222);
}
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid black;
top: 1px;
background: rgb(128, 128, 128);
}
ul#tabs li:hover {
border-bottom: 1px solid white;
background: white;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: white;
font: 14px Arial, sans-serif;
}
body#strona1 li#tab1,
body#strona2 li#tab2,
body#Strona3 li#tab3,
body#strona4 li#tab4,
body#strona5 li#tab5 {
background: white;
border-bottom: 1px solid white;
}
ul#tabs a:hover,
body#strona1 li#tab1 a,
body#strona2 li#tab2 a,
body#strona3 li#tab3 a,
body#strona4 li#tab4 a,
body#strona5 li#tab5 a {
color: black;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
Strona oparta na powyższym przykładzie działa w praktyce już od mniej więcej pól roku.
Oczywiście można sie bawić php i js i czasami nawet trzeba, ale jak to nie jest konieczne, to po co.
Re: menu zapamiętanie wybranej opcji
No to się zwyczajnie nie zrozumieliśmy, poza tym jakoś nie widzę żeby Twój wybór był zapamiętany bez JS się nie obejdzie.
Poza tym samo rozwiązanie jest nader amatorskie, chyba że jest jakie jest gdyż jest to zwykła prezentacja koncepcji. Pamiętaj że w IE :hover nie zadziała na nic poza <a>, chyba że wsadzimy coś w odnośnik i odwołamy się do tego poprzez "a:hover div" np. Zresztą pokazane jest to pod 2 linkiem z podanych niżej przy tworzeniu menu rozwijanego w CSS. Oglądałeś swoje menu pod IE ? Jak już mówiłem, bez JS się nie obejdzie i zadziała pod warunkiem użycia ajaxa (tak by element z menu się nie przeładowywał) chyba że użyjemy PHP lub warunku na zmienną w JS.
Żebyś wiedział o czym mówię, rzuć okiem na ten przykład:
http://www.poltorak-dariusz.yoyo.pl/folio/
W wersji tej właśnie "zapamiętany" jest Twój wybór (o to mi chodziło) a do tego działają 2 pierwsze podmenu. Tekst który Ci miga przy przełączeniu to "Trwa ładowanie treści..." czy coś koło tego, wsadziłem to na wypadek gdy tekstu jest więcej.
A co do menu z CSS to jeszcze raz rzuć okiem na to menu w IE które podałeś a potem rzuć okiem na to:
http://www.poltorak-dariusz.yoyo.pl/bbo/
Ta druga strona może Ci się długo ładować, ma wsadzoną grafikę bez optymalizacji i troszkę waży. To jedna z pierwszych wersji tej witryny, zawiera samo menu.
To fragmenty z projektów nad którymi pracowałem.
Pozdrawiam
bez JS się nie obejdzie.Poza tym samo rozwiązanie jest nader amatorskie, chyba że jest jakie jest gdyż jest to zwykła prezentacja koncepcji. Pamiętaj że w IE :hover nie zadziała na nic poza <a>, chyba że wsadzimy coś w odnośnik i odwołamy się do tego poprzez "a:hover div" np. Zresztą pokazane jest to pod 2 linkiem z podanych niżej przy tworzeniu menu rozwijanego w CSS. Oglądałeś swoje menu pod IE ? Jak już mówiłem, bez JS się nie obejdzie i zadziała pod warunkiem użycia ajaxa (tak by element z menu się nie przeładowywał) chyba że użyjemy PHP lub warunku na zmienną w JS.
Żebyś wiedział o czym mówię, rzuć okiem na ten przykład:
http://www.poltorak-dariusz.yoyo.pl/folio/
W wersji tej właśnie "zapamiętany" jest Twój wybór (o to mi chodziło) a do tego działają 2 pierwsze podmenu. Tekst który Ci miga przy przełączeniu to "Trwa ładowanie treści..." czy coś koło tego, wsadziłem to na wypadek gdy tekstu jest więcej.
A co do menu z CSS to jeszcze raz rzuć okiem na to menu w IE które podałeś a potem rzuć okiem na to:
http://www.poltorak-dariusz.yoyo.pl/bbo/
Ta druga strona może Ci się długo ładować, ma wsadzoną grafikę bez optymalizacji i troszkę waży. To jedna z pierwszych wersji tej witryny, zawiera samo menu.
To fragmenty z projektów nad którymi pracowałem.
Pozdrawiam
Re: menu zapamiętanie wybranej opcji
Rozumiem, że dla ciebie wszystko co nie zawiera js lub php jest rozwiązaniem amatorskim. A wydawało mi się że chodzi o efekt a nie sposób jego osiągnięcia.
Co do IE to się zgodzę, wersje przed 7.0 mają problem, ale i na to są sposoby.
Chyba się nie zrozumieliśmy jakie zapamiętanie i czego ma być w tym menu. Ja to zrozumiałem jako sposób wykrycia przez menu jaka strona jest załadowana i podświetlenie tego wyboru.
Co do IE to się zgodzę, wersje przed 7.0 mają problem, ale i na to są sposoby.
Chyba się nie zrozumieliśmy jakie zapamiętanie i czego ma być w tym menu. Ja to zrozumiałem jako sposób wykrycia przez menu jaka strona jest załadowana i podświetlenie tego wyboru.
Re: menu zapamiętanie wybranej opcji
No dokładnie i Twoje menu obecnie tego nie robi 
Oczywiście jest na to rozwiązanie ale warunkiem na nie jest ustawianie osobnego ID na każdą podstronę. Jest sens ustawiania tego ręcznie skoro można to robić automatycznie ?
Nie mówię że brak PHP czy JS jest rozwiązaniem amatorskim. Jak dobrze popatrzysz to zauważysz że menu z linka nr 2 (to rozwijane) nie zawiera żadnego kodu JS a jest zarówno półprzeźroczyste jak i rozwijane ale to akurat kaprys mój był.
Amatorskim rozwiązaniem nazywam takie które wymaga niepotrzebnego dodatkowego nakładu pracy i nie jest uniwersalne.
Twoje menu nie zadziała na żadnej przeglądarce IE w wersji innej jak 8 (zakładam że tam może chodzić jeżeli pozbyli się w tej przeglądarce paru bugów i :hover na czymś innym jak <a> zadziała), do tego na każdą podstronę trzeba ustawiać osobne ID żeby efekt zadziałał. Nie uważasz że dla jednego efektu jest to stanowczo za duża komplikacja ? Użyciu JS można zarzucić tylko to że ktoś może je mieć wyłączone lub pracować na przeglądarce bez wsparcia JS a ja na to że mu się co najwyżej link nie podświetli ale cała reszta będzie chodzić jak złoto. Poza tym jaki % ma tak na prawdę wyłączoną obsługę JS ?
Oczywiście jest na to rozwiązanie ale warunkiem na nie jest ustawianie osobnego ID na każdą podstronę. Jest sens ustawiania tego ręcznie skoro można to robić automatycznie ?Nie mówię że brak PHP czy JS jest rozwiązaniem amatorskim. Jak dobrze popatrzysz to zauważysz że menu z linka nr 2 (to rozwijane) nie zawiera żadnego kodu JS a jest zarówno półprzeźroczyste jak i rozwijane ale to akurat kaprys mój był.
Amatorskim rozwiązaniem nazywam takie które wymaga niepotrzebnego dodatkowego nakładu pracy i nie jest uniwersalne.
Twoje menu nie zadziała na żadnej przeglądarce IE w wersji innej jak 8 (zakładam że tam może chodzić jeżeli pozbyli się w tej przeglądarce paru bugów i :hover na czymś innym jak <a> zadziała), do tego na każdą podstronę trzeba ustawiać osobne ID żeby efekt zadziałał. Nie uważasz że dla jednego efektu jest to stanowczo za duża komplikacja ? Użyciu JS można zarzucić tylko to że ktoś może je mieć wyłączone lub pracować na przeglądarce bez wsparcia JS a ja na to że mu się co najwyżej link nie podświetli ale cała reszta będzie chodzić jak złoto. Poza tym jaki % ma tak na prawdę wyłączoną obsługę JS ?