Показать сообщение отдельно
  #9 (permalink)  
Старый 11.08.2015, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Выпадающее меню на jquery с подсветкой выбранного пункта
AMSPeople,

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    li ul {
    display: none;
  }
  li.active::first-line  {
     background-color: #8A2BE2;
     color: #FFFFFF;
  }
  li.active li.active::first-line {
     background-color: #FF1493;
     color: #FFFFFF;
  }
  li.active > a  {
     color: #FFFFFF;
  }
  li {
    cursor: pointer;
  }

  </style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
    $("li").click(function(a) {
        $(this).parent().find("li").removeClass("active").find("ul:visible").slideUp();
        $(this).children("ul").is(":hidden") && $(this).addClass("active").children("ul").slideDown();
        a.stopPropagation()
    })
});
</script>
</head>
<body>
<ul class='left_nav_menu' id='nav_menu_content'>
    <li><a href='#0'>Категория_1</a>
        <ul>
            <li><a href="#">Подкатегория_1</a>
                <ul>
                    <li><a href="#">Подподкатегория_1</a></li>
                </ul>
            </li>
            <li><a href="#">Подкатегория_2</a>
                <ul>
                    <li><a href="#">Подподкатегория_2</a></li>
                    <li><a href="#">Подподкатегория_3</a></li>
                </ul>
            </li>
            <li><a href="#">Подкатегория_3</a>
                <ul>
                    <li><a href="#">Подподкатегория_4</a></li>
                    <li><a href="#">Подподкатегория_5</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href='#0'>Категория_2</a>
        <ul>
            <li><a href="#">Подкатегория_4</a>
                <ul class="material_cat">
                    <li><a href="#">Подподкатегория_6</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<ul>
	<li>Подарки
		<ul>
			<li>Сувенирные изделия
				<ul >
					<li>Музыкальные</li>
					<li>Шкатулки</li>
					<li>Из дерева</li>
					<li>Металлические</li>
				</ul>
			</li>
				<li>Цветы
					<ul>
						<li>Розы
				           <ul >
					         <li>Чайная</li>
					         <li>Махровая</li>
					         <li>Чёрная</li>
    				       </ul>
             			</li>
						<li>Подарочные цветы
                          <ul >
					         <li>Гвоздика</li>
					         <li>Лилия</li>
					         <li>Орхидея</li>
    				       </ul>
                        </li>
					</ul>
				</li>
		</ul>
	</li>
</ul>
</body>
</html>

Последний раз редактировалось рони, 03.05.2021 в 11:34.
Ответить с цитированием