Нужна

Jack171 · September 13, 2012

Помогите разобраться. Как правильно сделать стрелочки для многоуровневого меню, чтобы они отображались только у элементов "li", которые в себе содержат подменю. Реально ли это сделать на чистом css? Проблема в том, что добавить эти стрелочки я могу, но они отображаются у всех "li". Даже которые не имеют подменю. Есть вариант, конечно, проставить для каждого "li" класс отдельно, но хотелось бы найти более простой вариант.

И второй вопрос, как можно задать собственный фоновый цвет для "li" элементов подменю? Ведь они наследуют стили, которые были прописаны для основного выпадающего меню.

Edited September 13, 2012 by Jack171

USF · September 13, 2012

Реально ли это сделать на чистом css?

Есть вариант, конечно, проставить для каждого "li" класс отдельно, но хотелось бы найти более простой вариант

как-то странно вы себе css представляете :blink:

Jack171 · September 13, 2012

как-то странно вы себе css представляете

Т.е. просто на CSS не получиться? Я имею введу без применения JS?

USF · September 13, 2012

получится, именно если прописать классы для элементов

Jack171 · September 13, 2012

USF, муторно это всё. При добавлении нового подменю можно и забыть для него прописать класс. Ладно спрошу тогда иначе, в JS можно это будет трудно реализовать? Чтобы не мучатся с каждым элементом отдельно? Чтобы скрипт для каждого ul подменю добавлял картинку?

USF · September 13, 2012

я не вижу проблемы в использовании классов.

если вы пишите сами - то оно как правило не особо часто меняется

если часто - есть смысл обратить внимание на готовые модули и таковой реализовать.

но как бы то ни было используются классы, вам от этого не уйти.

не осложняйте себе жизнь - пропишите классы. всего можно 1 использовать - "has-child", к примеру. это значит, что есть потомки(то есть подменю).

если у вас редко добавляется - зачем морочиться, просто создавая присваивайте класс необходимым меню.

а можно и через js - берете элемент списка, проверяете на наличие вложенных списков. если есть - присваиваете класс has-child. хотя это лучше делать на php

ar00 · September 13, 2012


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	 ul > li > ul:first-child:before{
		content: "+";
		color: red;
		position: absolute;
		margin: -20px 0 0 -55px;
	}
	ul > li {list-style: none;}
	</style>
</head>

<body>	
<ul>
	<li>1</li>
	<li>2
		<ul>
			<li>2.1</li>
			<li>2.2</li>
			<li>2.3</li>
		</ul>
	</li>
	<li>3</li>
	<li>4</li>
	<li>5
		<ul>
			<li>5.1</li>
		</ul>
	</li>
	<li>6</li>
</ul>
</body>
</html>

Через одно место, но работает

Сохрани в html файл.

P.S. ":first-child" на случай, если у родительского li будет больше чем 1 дочерний ul. В данной конструкции его можно убрать и всё будет работать.

Edited September 13, 2012 by ar00

rus · September 14, 2012

а что нельзя разве просто прописать: ul li ul li {...} или я чего-то не понял?

P.S. ТС, а что за странное название топика? :blink: кто нужна, кому нужна...

mishka · September 14, 2012

в JS можно это будет трудно реализовать?

Можно и трудно реализовать, а можно и легко реализовать, все от реализатора зависит.

Если ты только верстаешь то ставь доп класс и не мучайся.

В дальнейшем это будет автоматически делаться либо на php, либо на js.

Catherine · September 14, 2012

Помогите разобраться. Как правильно сделать стрелочки для многоуровневого меню, чтобы они отображались только у элементов "li", которые в себе содержат подменю. Реально ли это сделать на чистом css? Проблема в том, что добавить эти стрелочки я могу, но они отображаются у всех "li". Даже которые не имеют подменю. Есть вариант, конечно, проставить для каждого "li" класс отдельно, но хотелось бы найти более простой вариант.

Кажется, была уже похожая тема недавно.

Sign In

Нужна

Question

Jack171

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

Jack171

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Jack171

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

ar00

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information