[CSS][HTML]Menu jako drzewko problem Opcje

[shemko]

Witam, mam proste drzewkowe menu na bazie samego CSS (link do strony z menu). Proszę mi powiedzieć w jaki sposób zrobić aby po kliknięciu link się pogrubiał na stałe (tj. nie tylko na zasadzie :hover jak jest obecnie) i wracał do normalnego stanu po "od kliknięciu"? Oto kod:

style css:

[HTML] pobierz, plaintext 
ol.tree
{
	padding: 0 0 0 0px;
	line-height:20px;
}
	li 
	{ 
		position: relative; 
		margin-left: 0px;
		list-style: none;
	}
	li.file
	{
		margin-left: -1px !important;
	}
		li.file a
		{
			color: #000;
			text-decoration: none;
			display: block;
			font-size:14px;
			margin-left:0px;
			font-style: normal;
		}
 
	li input
	{
		position: absolute;
		left: 0;
		margin-left: 0;
		opacity: 0;
		z-index: 2;
		cursor: pointer;
		height: 1em;
		width: 1em;
		margin-top:10px;
		top: 0;
	}
		li input + ol
		{
			margin: -0.938em 0 0 0px; /* 15px */
			height: 1em;
		}
		li input + ol > li { display: none; margin-left: 0px !important; padding-left: 1px; }
	li label
	{
		cursor: pointer;
		display: block;
	}
 
	li label:hover
	{
		font-weight:bold;
	}
 
	li input:checked + ol
	{   font-style: normal;
	    font-size:15px;
		margin: 10px 0px 10px 0px; /* 20px */
		padding: 0 0 0 0px;
		height: auto;
	}
		li input:checked + ol > li { display: block; margin: 0 0 0;  /* 2px */}
		li input:checked + ol > li:last-child { margin: 0 0 0; /* 1px */ }
[HTML] pobierz, plaintext 

Kod wyświetlania menu:

[HTML] pobierz, plaintext 
<ol class="tree">
		<li>
			<label for="folder2">Portfolio</label> <input type="checkbox" id="folder2" /> 
			<ol>
				<li>
					<label for="subfolder1">musicvideo</label> <input type="checkbox" id="subfolder1" /> 
					<ol>
						<li class="file"><a href="#" class="black">Anoice</a></li>
						<li class="file"><a href="#" class="black">Edyta Górniak</a></li>
						<li class="file"><a href="#" class="black">Ewelina Lisowska</a></li>
						<li class="file"><a href="#" class="black">Fox</a></li>
						<li class="file"><a href="#" class="black">Halina Mlynkowa</a></li>
						<li class="file"><a href="#" class="black">Hatbreakers</a></li>
						<li class="file"><a href="#" class="black">Justyna Steczkowska</a></li>
						<li class="file"><a href="#" class="black">Kari</a></li>
						<li class="file"><a href="#" class="black">K Bleax</a></li>
						<li class="file"><a href="#" class="black">Magda Steczkowska</a></li>
						<li class="file"><a href="#" class="black">Marcin Rozynek</a></li>
						<li class="file"><a href="#" class="black">Momo</a></li>
						<li class="file"><a href="#" class="black">Paulina Przybysz</a></li>
						<li class="file"><a href="#" class="black">Pleq</a></li>
						<li class="file"><a href="#" class="black">Sorry Boys</a></li>
						<li class="file"><a href="#" class="black">Wojciech Ezzat</a></li>
					</ol>
				</li>
				<li>
					<label for="subfolder2">live from studio</label> <input type="checkbox" id="subfolder2" /> 
					<ol>
						<li class="file"><a href="#" class="black">Something</a></li>
					</ol>
				</li>
				<li>
					<label for="subfolder3">show</label> <input type="checkbox" id="subfolder3" /> 
					<ol>
						<li class="file"><a href="#" class="black">Something</a></li>
					</ol>
				</li>
				<li>
					<label for="subfolder4">fashion film</label> <input type="checkbox" id="subfolder4" /> 
					<ol>
						<li class="file"><a href="#" class="black">Something</a></li>
					</ol>
				</li>
				<li>
					<label for="subfolder5">others</label> <input type="checkbox" id="subfolder5" /> 
					<ol>
						<li class="file"><a href="#" class="black">Something</a></li>
					</ol>
				</li>
			</ol>
		</li>
</ol>
[HTML] pobierz, plaintext 

Ten post edytował shemko 17.06.2015, 01:05:02

[patwoj98]

Jeśli dobrze rozumiem pytanie to są 2 drogi:

1) za pomocą CSS

Kod

a:visited{
font-weight:bold;
}

2) Za pomocą jQuery:

Kod

  $(document).ready(function(){
    $('a').click(function(){
        $(this).css('font-weight','bold');
    });
});

Potestuj to. 1 wersja zostawia trwały ślad, kiedy druga działa tylko do czasu wyjścia użytkownika ze strony.

[shemko]

Dzięki za pomoc Jeszcze miałbym pytanie odnośnie powyższego kodu, czy jest możliwość ustawienia aby po kliknięciu innej podkategorii, ta wcześniej otwarta zamykała się automatycznie?

Chyba że jest jakiś ogólnodostępny skrypt (może jQuery) z "tree menu" który łatwo można by przerobić do tej formy co powyżej?

Chciałem stworzyć proste menu na zasadzie Portfolio > (rozwija) > klika podkategorii > każda podkategoria rozwija linki do podstron. Z tym że kliknięcie każdej podkategorii powoduje zamknięcie wcześniej co daje możliwość otwarcia tylko jednej podkategorii w jednym momencie.


Ten post edytował shemko 17.06.2015, 19:18:36

[patwoj98]

Wszystko się da zrobić Trzeba tylko chcieć i pomyśleć.

http://jqueryui.com/accordion/ - możesz to spróbować przerobić. Potrzeba do tego biblioteki jQuery UI.