Обычное дерево меню CSS

Настоящие CSS-ниндзя не используют JavaScript, когда им необходимо соорудить дерево меню. А вместо этого они используют некоторые псевдо-классы CSS3 и кое-какие псевдо-селекторы из CSS2

Разметка HTML заполнена неупорядоченными списками (ul) для формирования структуры дерева, флажков для всех неконцевых нод, радио кнопки для концевых нод и элементов <label>. Как вы можете заменить, элементы <ul> размещаются справа после элементов <input> (которые в свою очередь размещаются справа после элементов <label>) и затем ul легко выбирается в CSS, используя сестренский селектор "+" вместе с CSS3 селектором :checked (чтобы помочь нам открыть различные ноды папки/деревья). CSS-код действительно мал, что просто замечательно.

Я сделал некоторые изменения в оригинальном дереве меню. Смотрите оригинальную статью и демо здесь. Кроме того проверьте этот документ для получения информации о всех CSS селекторах.

Давайте уже наконец посмотрим код.

HTML:

<ul class="tree">
	<li class="item">
		<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_0"><label for="selectEventTree_radio_0">(none) <span class="c1">(0)</span></label>
	</li>
	<li>
		<label for="selectEventTree_0">Enemies</label><input type="checkbox" id="selectEventTree_0">
		<ul>
			<li>
				<label for="selectEventTree_1">Bad guys</label><input type="checkbox" id="selectEventTree_1">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_108"><label for="selectEventTree_radio_108">Bat <span class="c1">(108)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_105"><label for="selectEventTree_radio_105">Bee <span class="c1">(105)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_237"><label for="selectEventTree_radio_237">Bee Swarm <span class="c1">(237)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_225"><label for="selectEventTree_radio_225">Bees (DON'T WORK) <span class="c1">(225)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_236"><label for="selectEventTree_radio_236">Butterfly (DON'T WORK) <span class="c1">(236)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_252"><label for="selectEventTree_radio_252">Cat* <span class="c1">(252)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_110"><label for="selectEventTree_radio_110">Caterpillar <span class="c1">(110)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_196"><label for="selectEventTree_radio_196">Crab <span class="c1">(196)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_120"><label for="selectEventTree_radio_120">Demon <span class="c1">(120)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_116"><label for="selectEventTree_radio_116">Doggy Dogg <span class="c1">(116)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_103"><label for="selectEventTree_radio_103">Dragon <span class="c1">(103)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_123"><label for="selectEventTree_radio_123">Dragonfly <span class="c1">(123)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_125"><label for="selectEventTree_radio_125">Fat Chick <span class="c1">(125)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_126"><label for="selectEventTree_radio_126">Fencer <span class="c1">(126)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_127"><label for="selectEventTree_radio_127">Fish <span class="c1">(127)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_106"><label for="selectEventTree_radio_106">Ghost <span class="c1">(106)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_253"><label for="selectEventTree_radio_253">Ghost (Blue)* <span class="c1">(253)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_113"><label for="selectEventTree_radio_113">Hatter <span class="c1">(113)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_118"><label for="selectEventTree_radio_118">Helmut <span class="c1">(118)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_102"><label for="selectEventTree_radio_102">Lab Rat <span class="c1">(102)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_104"><label for="selectEventTree_radio_104">Lizard <span class="c1">(104)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_183"><label for="selectEventTree_radio_183">Lizard (Floating) <span class="c1">(183)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_124"><label for="selectEventTree_radio_124">Monkey <span class="c1">(124)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_184"><label for="selectEventTree_radio_184">Monkey (Still) <span class="c1">(184)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_117"><label for="selectEventTree_radio_117">Normal Turtle <span class="c1">(117)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_190"><label for="selectEventTree_radio_190">Raven <span class="c1">(190)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_115"><label for="selectEventTree_radio_115">Skeleton <span class="c1">(115)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_107"><label for="selectEventTree_radio_107">Sparks <span class="c1">(107)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_109"><label for="selectEventTree_radio_109">Sucker <span class="c1">(109)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_152"><label for="selectEventTree_radio_152">Sucker (Floating) <span class="c1">(152)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_191"><label for="selectEventTree_radio_191">Tube Turtle <span class="c1">(191)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_100"><label for="selectEventTree_radio_100">Tuf Turt <span class="c1">(100)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_197"><label for="selectEventTree_radio_197">Witch <span class="c1">(197)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_251"><label for="selectEventTree_radio_251">Xmas Bilsy Boss* <span class="c1">(251)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_250"><label for="selectEventTree_radio_250">Xmas Lizard (Flying)* <span class="c1">(250)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_249"><label for="selectEventTree_radio_249">Xmas Lizard* <span class="c1">(249)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_248"><label for="selectEventTree_radio_248">Xmas Normal Turtle <span class="c1">(248)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_2">Bosses</label><input type="checkbox" id="selectEventTree_2">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_28"><label for="selectEventTree_radio_28">Activate Boss <span class="c1">(28)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_114"><label for="selectEventTree_radio_114">Bilsy Boss <span class="c1">(114)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_235"><label for="selectEventTree_radio_235">Bolly Boss <span class="c1">(235)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_199"><label for="selectEventTree_radio_199">Bubba <span class="c1">(199)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_200"><label for="selectEventTree_radio_200">Devil Devan <span class="c1">(200)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_151"><label for="selectEventTree_radio_151">Queen Boss <span class="c1">(151)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_201"><label for="selectEventTree_radio_201">Robot Boss (Devan) <span class="c1">(201)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_202"><label for="selectEventTree_radio_202">Robot Boss (Robot) <span class="c1">(202)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_198"><label for="selectEventTree_radio_198">Rocket Turtle <span class="c1">(198)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_101"><label for="selectEventTree_radio_101">Tuf Boss <span class="c1">(101)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_241"><label for="selectEventTree_radio_241">Tweedle Boss <span class="c1">(241)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_195"><label for="selectEventTree_radio_195">Uterus (Crab boss) <span class="c1">(195)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_247"><label for="selectEventTree_radio_247">Xmas Bilsy Boss <span class="c1">(247)</span></label>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<label for="selectEventTree_3">Enviroment</label><input type="checkbox" id="selectEventTree_3">
		<ul>
			<li>
				<label for="selectEventTree_4">Lighting</label><input type="checkbox" id="selectEventTree_4">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_22"><label for="selectEventTree_radio_22">Dim Light (DON'T WORK) <span class="c1">(22)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_150"><label for="selectEventTree_radio_150">Light (Flicker) <span class="c1">(150)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_149"><label for="selectEventTree_radio_149">Light (Pulze) <span class="c1">(149)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_148"><label for="selectEventTree_radio_148">Light (Steady) <span class="c1">(148)</span></label>
					</li>
					<li class="item">

						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_25"><label for="selectEventTree_radio_25">Reset Light <span class="c1">(25)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_23"><label for="selectEventTree_radio_23">Set Ambient Lighting <span class="c1">(23)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_5">Object</label><input type="checkbox" id="selectEventTree_5">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_43"><label for="selectEventTree_radio_43">Bomb <span class="c1">(43)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_153"><label for="selectEventTree_radio_153">Bridge <span class="c1">(153)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_244"><label for="selectEventTree_radio_244">CTF Base <span class="c1">(244)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_111"><label for="selectEventTree_radio_111">Cheshire Cat <span class="c1">(111)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_112"><label for="selectEventTree_radio_112">Cheshire Cat Hook <span class="c1">(112)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_226"><label for="selectEventTree_radio_226">Copter <span class="c1">(226)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_217"><label for="selectEventTree_radio_217">Eva Earlong <span class="c1">(217)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_58"><label for="selectEventTree_radio_58">Exploding TNT <span class="c1">(58)</span></label>
					</li>
					<li>
						<label for="selectEventTree_6">Poles</label><input type="checkbox" id="selectEventTree_6">
						<ul>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_203"><label for="selectEventTree_radio_203">Carrotus Pole <span class="c1">(203)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_205"><label for="selectEventTree_radio_205">Diamondus Pole <span class="c1">(205)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_193"><label for="selectEventTree_radio_193">Diamondus Tree <span class="c1">(193)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_229"><label for="selectEventTree_radio_229">Jungle Pole <span class="c1">(229)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_204"><label for="selectEventTree_radio_204">Psych Pole <span class="c1">(204)</span></label>
							</li>
						</ul>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_232"><label for="selectEventTree_radio_232">Pushable Box <span class="c1">(232)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_231"><label for="selectEventTree_radio_231">Pushable Rock <span class="c1">(231)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_215"><label for="selectEventTree_radio_215">Spike Ball (2D) <span class="c1">(215)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_223"><label for="selectEventTree_radio_223">Spike Ball (3D) <span class="c1">(223)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_42"><label for="selectEventTree_radio_42">Swinging Vine <span class="c1">(42)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_41"><label for="selectEventTree_radio_41">Turtle Shell <span class="c1">(41)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_7">Pinball</label><input type="checkbox" id="selectEventTree_7">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_139"><label for="selectEventTree_radio_139">Bumper 500 <span class="c1">(139)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_140"><label for="selectEventTree_radio_140">Bumper Carrot <span class="c1">(140)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_137"><label for="selectEventTree_radio_137">Paddle Left <span class="c1">(137)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_138"><label for="selectEventTree_radio_138">Paddle Right <span class="c1">(138)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_8">Platforms</label><input type="checkbox" id="selectEventTree_8">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_210"><label for="selectEventTree_radio_210">Boll Platform <span class="c1">(210)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_209"><label for="selectEventTree_radio_209">Fruit Platform <span class="c1">(209)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_211"><label for="selectEventTree_radio_211">Grass Platform <span class="c1">(211)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_212"><label for="selectEventTree_radio_212">Pink Platform <span class="c1">(212)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_213"><label for="selectEventTree_radio_213">Sonic Platform <span class="c1">(213)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_214"><label for="selectEventTree_radio_214">Spike Platform <span class="c1">(214)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_9">Scenery</label><input type="checkbox" id="selectEventTree_9">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_238"><label for="selectEventTree_radio_238">Activate Snow <span class="c1">(238)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_121"><label for="selectEventTree_radio_121">Fire (DON'T WORK) <span class="c1">(121)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_122"><label for="selectEventTree_radio_122">Lava (DON'T WORK) <span class="c1">(122)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_119"><label for="selectEventTree_radio_119">Leaf (DON'T WORK) <span class="c1">(119)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_128"><label for="selectEventTree_radio_128">Moth <span class="c1">(128)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_129"><label for="selectEventTree_radio_129">Steam <span class="c1">(129)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_233"><label for="selectEventTree_radio_233">Water Block <span class="c1">(233)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_218"><label for="selectEventTree_radio_218">Water Bubbler <span class="c1">(218)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_10">Springs</label><input type="checkbox" id="selectEventTree_10">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_87"><label for="selectEventTree_radio_87">Blue Spring <span class="c1">(87)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_86"><label for="selectEventTree_radio_86">Green Spring <span class="c1">(86)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_60"><label for="selectEventTree_radio_60">Green Spring (Frozen) <span class="c1">(60)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_62"><label for="selectEventTree_radio_62">Green Spring Crate <span class="c1">(62)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_93"><label for="selectEventTree_radio_93">Horizontal Blue Spring <span class="c1">(93)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_92"><label for="selectEventTree_radio_92">Horizontal Green Spring <span class="c1">(92)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_91"><label for="selectEventTree_radio_91">Horizontal Red Spring <span class="c1">(91)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_85"><label for="selectEventTree_radio_85">Red Spring <span class="c1">(85)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_224"><label for="selectEventTree_radio_224">Springcord (DON'T WORK) <span class="c1">(224)</span></label>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<label for="selectEventTree_11">Gameplay</label><input type="checkbox" id="selectEventTree_11">
		<ul>
			<li>
				<label for="selectEventTree_12">Area</label><input type="checkbox" id="selectEventTree_12">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_242"><label for="selectEventTree_radio_242">Area ID <span class="c1">(242)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_17"><label for="selectEventTree_radio_17">End Of Level <span class="c1">(17)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_18"><label for="selectEventTree_radio_18">End Of Level (Warp) <span class="c1">(18)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_20"><label for="selectEventTree_radio_20">Float Up <span class="c1">(20)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_24"><label for="selectEventTree_radio_24">Limit Horizontal Scrolling <span class="c1">(24)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_245"><label for="selectEventTree_radio_245">No Fire Zone <span class="c1">(245)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_208"><label for="selectEventTree_radio_208">Set Water Level <span class="c1">(208)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_14"><label for="selectEventTree_radio_14">Stop Enemy <span class="c1">(14)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_8"><label for="selectEventTree_radio_8">Stop Flying <span class="c1">(8)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_230"><label for="selectEventTree_radio_230">Warp <span class="c1">(230)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_26"><label for="selectEventTree_radio_26">Warp (Secret level) <span class="c1">(26)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_240"><label for="selectEventTree_radio_240">Warp Target <span class="c1">(240)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_13">Modifier</label><input type="checkbox" id="selectEventTree_13">
				<ul>
					<li>
						<label for="selectEventTree_14">Belts</label><input type="checkbox" id="selectEventTree_14">
						<ul>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_11"><label for="selectEventTree_radio_11">Belt Left <span class="c1">(11)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_13"><label for="selectEventTree_radio_13">Belt Left (Acceleration) <span class="c1">(13)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_10"><label for="selectEventTree_radio_10">Belt Right <span class="c1">(10)</span></label>
							</li>
							<li class="item">
								<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_12"><label for="selectEventTree_radio_12">Belt Right (Acceleration) <span class="c1">(12)</span></label>
							</li>
						</ul>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_4"><label for="selectEventTree_radio_4">Hook <span class="c1">(4)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_2"><label for="selectEventTree_radio_2">Hurt Floor <span class="c1">(2)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_255"><label for="selectEventTree_radio_255">MCE Event <span class="c1">(255)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_1"><label for="selectEventTree_radio_1">One Way Floor <span class="c1">(1)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_9"><label for="selectEventTree_radio_9">Ricochet <span class="c1">(9)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_5"><label for="selectEventTree_radio_5">Slide (DON'T WORK) <span class="c1">(5)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_6"><label for="selectEventTree_radio_6">Spinning Pole (Horizontal) <span class="c1">(6)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_7"><label for="selectEventTree_radio_7">Spinning Pole (Vertical) <span class="c1">(7)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_206"><label for="selectEventTree_radio_206">Sucker Tube <span class="c1">(206)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_3"><label for="selectEventTree_radio_3">Vine <span class="c1">(3)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_15"><label for="selectEventTree_radio_15">Wind Left <span class="c1">(15)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_16"><label for="selectEventTree_radio_16">Wind Right <span class="c1">(16)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_15">Morph</label><input type="checkbox" id="selectEventTree_15">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_222"><label for="selectEventTree_radio_222">Morph Frog <span class="c1">(222)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_94"><label for="selectEventTree_radio_94">Morph Monitor (Bird) <span class="c1">(94)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_71"><label for="selectEventTree_radio_71">Morph Monitor (Jazz/Spaz/Lori) <span class="c1">(71)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_19"><label for="selectEventTree_radio_19">Revert Morph <span class="c1">(19)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_16">Sign post</label><input type="checkbox" id="selectEventTree_16">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_83"><label for="selectEventTree_radio_83">Checkpoint <span class="c1">(83)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_81"><label for="selectEventTree_radio_81">End of Level Signpost <span class="c1">(81)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_84"><label for="selectEventTree_radio_84">Secret Level Signpost <span class="c1">(84)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_17">Sound</label><input type="checkbox" id="selectEventTree_17">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_194"><label for="selectEventTree_radio_194">Ambient Sound <span class="c1">(194)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_27"><label for="selectEventTree_radio_27">Echo <span class="c1">(27)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_18">Start pos</label><input type="checkbox" id="selectEventTree_18">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_29"><label for="selectEventTree_radio_29">Jazz Level Start <span class="c1">(29)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_32"><label for="selectEventTree_radio_32">Lori Level Start <span class="c1">(32)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_31"><label for="selectEventTree_radio_31">Multiplayer Level Start <span class="c1">(31)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_30"><label for="selectEventTree_radio_30">Spaz Level Start <span class="c1">(30)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_19">Triggers & Scenery</label><input type="checkbox" id="selectEventTree_19">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_188"><label for="selectEventTree_radio_188">ButtStomp Scenery <span class="c1">(188)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_187"><label for="selectEventTree_radio_187">Collapsing Scenery <span class="c1">(187)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_185"><label for="selectEventTree_radio_185">Destruct Scenery <span class="c1">(185)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_186"><label for="selectEventTree_radio_186">Destruct Scenery (TNT) <span class="c1">(186)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_21"><label for="selectEventTree_radio_21">Rock Trigger Zone <span class="c1">(21)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_130"><label for="selectEventTree_radio_130">Rolling Rock <span class="c1">(130)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_207"><label for="selectEventTree_radio_207">Text <span class="c1">(207)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_95"><label for="selectEventTree_radio_95">Trigger Crate <span class="c1">(95)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_234"><label for="selectEventTree_radio_234">Trigger Scenery <span class="c1">(234)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_246"><label for="selectEventTree_radio_246">Trigger Zone <span class="c1">(246)</span></label>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<label for="selectEventTree_20">Pickups</label><input type="checkbox" id="selectEventTree_20">
		<ul>
			<li>
				<label for="selectEventTree_21">Ammo</label><input type="checkbox" id="selectEventTree_21">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_34"><label for="selectEventTree_radio_34">Bouncer Ammo (+3) <span class="c1">(34)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_54"><label for="selectEventTree_radio_54">Bouncer Box (+15) <span class="c1">(54)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_40"><label for="selectEventTree_radio_40">Electro Ammo (+3) <span class="c1">(40)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_33"><label for="selectEventTree_radio_33">Frostbiter Ammo (+3) <span class="c1">(33)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_53"><label for="selectEventTree_radio_53">Frostbiter Box (+15) <span class="c1">(53)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_69"><label for="selectEventTree_radio_69">Mixed Ammo Barrel <span class="c1">(69)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_46"><label for="selectEventTree_radio_46">Mixed Ammo Crate <span class="c1">(46)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_39"><label for="selectEventTree_radio_39">Pepper Spray Ammo (+3) <span class="c1">(39)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_36"><label for="selectEventTree_radio_36">RF Ammo (+3) <span class="c1">(36)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_56"><label for="selectEventTree_radio_56">RF Box (+15) <span class="c1">(56)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_35"><label for="selectEventTree_radio_35">Seeker Ammo (+3) <span class="c1">(35)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_55"><label for="selectEventTree_radio_55">Seeker Box (+15) <span class="c1">(55)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_38"><label for="selectEventTree_radio_38">TNT Ammo (+3) <span class="c1">(38)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_37"><label for="selectEventTree_radio_37">Toaster Ammo (+3) <span class="c1">(37)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_57"><label for="selectEventTree_radio_57">Toaster Box (+15) <span class="c1">(57)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_22">Food</label><input type="checkbox" id="selectEventTree_22">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_141"><label for="selectEventTree_radio_141">Apple <span class="c1">(141)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_142"><label for="selectEventTree_radio_142">Banana <span class="c1">(142)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_174"><label for="selectEventTree_radio_174">Burger <span class="c1">(174)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_167"><label for="selectEventTree_radio_167">Cake <span class="c1">(167)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_171"><label for="selectEventTree_radio_171">Candy <span class="c1">(171)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_182"><label for="selectEventTree_radio_182">Cheese <span class="c1">(182)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_143"><label for="selectEventTree_radio_143">Cherry <span class="c1">(143)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_177"><label for="selectEventTree_radio_177">Chicken Leg <span class="c1">(177)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_170"><label for="selectEventTree_radio_170">Chips <span class="c1">(170)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_172"><label for="selectEventTree_radio_172">Chocolate Bar <span class="c1">(172)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_162"><label for="selectEventTree_radio_162">Cucumber <span class="c1">(162)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_169"><label for="selectEventTree_radio_169">Cupcake <span class="c1">(169)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_168"><label for="selectEventTree_radio_168">Donut <span class="c1">(168)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_161"><label for="selectEventTree_radio_161">Eggplant <span class="c1">(161)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_176"><label for="selectEventTree_radio_176">Fries <span class="c1">(176)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_159"><label for="selectEventTree_radio_159">Grapes <span class="c1">(159)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_181"><label for="selectEventTree_radio_181">Ham <span class="c1">(181)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_173"><label for="selectEventTree_radio_173">Ice Cream <span class="c1">(173)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_154"><label for="selectEventTree_radio_154">Lemon <span class="c1">(154)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_160"><label for="selectEventTree_radio_160">Lettuce <span class="c1">(160)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_155"><label for="selectEventTree_radio_155">Lime <span class="c1">(155)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_165"><label for="selectEventTree_radio_165">Milk <span class="c1">(165)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_144"><label for="selectEventTree_radio_144">Orange <span class="c1">(144)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_158"><label for="selectEventTree_radio_158">Peach <span class="c1">(158)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_145"><label for="selectEventTree_radio_145">Pear <span class="c1">(145)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_166"><label for="selectEventTree_radio_166">Pie <span class="c1">(166)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_175"><label for="selectEventTree_radio_175">Pizza <span class="c1">(175)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_146"><label for="selectEventTree_radio_146">Pretzel <span class="c1">(146)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_178"><label for="selectEventTree_radio_178">Sandwich <span class="c1">(178)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_164"><label for="selectEventTree_radio_164">Soda Pop <span class="c1">(164)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_163"><label for="selectEventTree_radio_163">Soft Drink <span class="c1">(163)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_147"><label for="selectEventTree_radio_147">Strawberry <span class="c1">(147)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_179"><label for="selectEventTree_radio_179">Taco <span class="c1">(179)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_156"><label for="selectEventTree_radio_156">Thing <span class="c1">(156)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_157"><label for="selectEventTree_radio_157">Watermelon <span class="c1">(157)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_180"><label for="selectEventTree_radio_180">Weenie <span class="c1">(180)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_23">Gems</label><input type="checkbox" id="selectEventTree_23">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_65"><label for="selectEventTree_radio_65">Blue Gem (+10) <span class="c1">(65)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_49"><label for="selectEventTree_radio_49">Gem Barrel <span class="c1">(49)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_70"><label for="selectEventTree_radio_70">Gem Crate <span class="c1">(70)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_192"><label for="selectEventTree_radio_192">Gem Ring <span class="c1">(192)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_64"><label for="selectEventTree_radio_64">Green Gem (+5) <span class="c1">(64)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_189"><label for="selectEventTree_radio_189">Invisible Gem Stomp <span class="c1">(189)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_66"><label for="selectEventTree_radio_66">Purple Gem (+1) <span class="c1">(66)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_99"><label for="selectEventTree_radio_99">RectGem Blue ? <span class="c1">(99)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_98"><label for="selectEventTree_radio_98">RectGem Green ? <span class="c1">(98)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_97"><label for="selectEventTree_radio_97">RectGem Red ? <span class="c1">(97)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_63"><label for="selectEventTree_radio_63">Red Gem (+1) <span class="c1">(63)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_67"><label for="selectEventTree_radio_67">Super Red Gem <span class="c1">(67)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_24">Goodies</label><input type="checkbox" id="selectEventTree_24">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_59"><label for="selectEventTree_radio_59">Airboard <span class="c1">(59)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_68"><label for="selectEventTree_radio_68">Birdy <span class="c1">(68)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_52"><label for="selectEventTree_radio_52">Bomb Crate <span class="c1">(52)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_88"><label for="selectEventTree_radio_88">Carrot (Invincibility) <span class="c1">(88)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_50"><label for="selectEventTree_radio_50">Carrot Barrel <span class="c1">(50)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_47"><label for="selectEventTree_radio_47">Carrot Crate <span class="c1">(47)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_72"><label for="selectEventTree_radio_72">Carrot Energy (+1) <span class="c1">(72)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_73"><label for="selectEventTree_radio_73">Carrot Full Energy <span class="c1">(73)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_45"><label for="selectEventTree_radio_45">Coin (Gold +5) <span class="c1">(45)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_44"><label for="selectEventTree_radio_44">Coin (Silver +1) <span class="c1">(44)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_80"><label for="selectEventTree_radio_80">Extra Life <span class="c1">(80)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_51"><label for="selectEventTree_radio_51">Extra Life Barrel <span class="c1">(51)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_48"><label for="selectEventTree_radio_48">Extra Life Crate <span class="c1">(48)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_89"><label for="selectEventTree_radio_89">Extra Time (DON'T WORK) <span class="c1">(89)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_79"><label for="selectEventTree_radio_79">Fast Feet (DON'T WORK) <span class="c1">(79)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_96"><label for="selectEventTree_radio_96">Fly Carrot <span class="c1">(96)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_90"><label for="selectEventTree_radio_90">Freeze Player <span class="c1">(90)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_25">Power-ups</label><input type="checkbox" id="selectEventTree_25">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_78"><label for="selectEventTree_radio_78">Auto fire (DON'T WORK) <span class="c1">(78)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_131"><label for="selectEventTree_radio_131">Blaster PowerUp <span class="c1">(131)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_132"><label for="selectEventTree_radio_132">Bouncer PowerUp <span class="c1">(132)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_221"><label for="selectEventTree_radio_221">Electro PowerUp <span class="c1">(221)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_61"><label for="selectEventTree_radio_61">Fastfire <span class="c1">(61)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_133"><label for="selectEventTree_radio_133">Frostbiter PowerUp <span class="c1">(133)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_77"><label for="selectEventTree_radio_77">Max weapon (DON'T WORK) <span class="c1">(77)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_220"><label for="selectEventTree_radio_220">Pepper Spray PowerUp <span class="c1">(220)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_135"><label for="selectEventTree_radio_135">RF PowerUp <span class="c1">(135)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_134"><label for="selectEventTree_radio_134">Seeker PowerUp <span class="c1">(134)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_219"><label for="selectEventTree_radio_219">TNT PowerUp (DON'T WORK) <span class="c1">(219)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_136"><label for="selectEventTree_radio_136">Toaster PowerUP <span class="c1">(136)</span></label>
					</li>
				</ul>
			</li>
			<li>
				<label for="selectEventTree_26">Shields</label><input type="checkbox" id="selectEventTree_26">
				<ul>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_74"><label for="selectEventTree_radio_74">Fire Shield <span class="c1">(74)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_227"><label for="selectEventTree_radio_227">Laser Shield (DON'T WORK) <span class="c1">(227)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_76"><label for="selectEventTree_radio_76">Plasma Shield <span class="c1">(76)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_228"><label for="selectEventTree_radio_228">Stopwatch <span class="c1">(228)</span></label>
					</li>
					<li class="item">
						<input type="radio" name="selectEventTree_radio" id="selectEventTree_radio_75"><label for="selectEventTree_radio_75">Water Shield <span class="c1">(75)</span></label>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

CSS:

body {
	font-family: Tahoma, sans-serif;
	font-size: 13px;
	height: 100%;
}

.c1 {color: rgba(0, 0, 0, 0.5);}

.tree {
margin: 0px;
	padding: 0 0 0 20px;
}
.tree li {
	position: relative;
	margin-left: -15px;
	list-style: none;
	padding: 0px;
}
.tree li.item {
	padding-left: 17px;
}
.tree li.item label {
	padding-left: 0px;
	text-decoration: none;
	cursor: pointer;
}
.tree li.item input:checked + label {
	background-color: #69F;
	color: white;
	font-weight: bold;
	padding: 2px;
}
li input {
	position: absolute;
	left: 0;
	margin-left: 0;
	z-index: 2;
	cursor: pointer;
	height: 1em;
	width: 1em;
	top: 0;
}
.tree li input + ul {
	margin: -0.938em 0 0 -44px; /* 15px */
	height: 1em;
}
.tree li input + ul > li {
	height: 0;
	overflow: hidden;
	margin-left: -14px !important;
	padding-left: 1px;
}
.tree li label {
	cursor: pointer;
	padding-left: 20px;
}

.tree li input:checked + ul {
	margin: -1.463em 0 0 -44px; /* 20px */
	padding: 1.563em 0 0 75px; /* 25px */
	height: auto;
}
.tree li input:checked + ul > li {
	height: auto;
	margin: 0px;
}

Не поддерживаются браузеры:

  • Internet Explorer 8.0 и ниже.
  • Apple Safari 3.0 и ниже.

А вот и пример:

Перевод статьи "Pure CSS Tree Menu" с сайта "cssdeck.com, автор Daniel J.

P.S. Это тоже может быть интересно:

2 Комментарии

  1. Рома

    Хорошая статья, только если можно — хотя бы одну область использования… Например — если не ошибаюсь — выбрать рубрики, подрубрики и так далее? А как потом это интегрировать с формой отправки данных на сервер?

  2. Святослав

    Интересное решение. Псевдокласом checked как-то не получалось пользоваться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.