Тэги вертикально Лукино

Жёлтые круглые

by vovkasolovev

HTML

<body>
<ul>
	<li class="top parent"><a><h3>Молочные продукты</h3></a>
		<ul>
			<li><a><h4>Из коровьего молока</h4></a></li>
			<li><a><h4>Из козьего молока</h4></a></li>
			<li><a><h4>Йогурты</h4></a></li>
			<li><a><h4>Сыры</h4></a></li>
		</ul>
	</li>
	<li class="top parent"><a><h3>Мясо и птица</h3></a>
		<ul>
			<li class="parent"><a><h4>Мясо</h4></a>
				<ul>
					<li><a><h5>Баранина</h5></a></li>
					<li><a><h5>Говядина</h5></a></li>
					<li><a><h5>Телятина</h5></a></li>
					<li><a><h5>Свинина</h5></a></li>
					<li><a><h5>Кролик</h5></a></li>
					<li><a><h5>Фарши</h5></a></li>
				</ul>
			</li>
			<li class="parent"><a><h4>Птица</h4></a>
				<ul>
					<li><a><h5>Курица</h5></a></li>
					<li><a><h5>Индейка</h5></a></li>
					<li><a><h5>Гусь</h5></a></li>
					<li><a><h5>Утка</h5></a></li>
					<li><a><h5>Перепелка</h5></a></li>
					<li><a><h5>Яйца</h5></a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="top parent"><a><h3>Овощи и фрукты</h3></a>
		<ul>
			<li><a><h4>Овощи</h4></a></li>
			<li><a><h4>Фрукты</h4></a></li>
			<li><a><h4>Травы</h4></a></li>
			<li><a><h4>Ягоды</h4></a></li>
			<li><a><h4>Корнеплоды</h4></a></li>
		</ul>
	</li>
	<li class="top parent"><a><h3>Чаи, травы и специи</h3></a>
		<ul>
			<li><a><h4>Травяные чаи</h4></a></li>
			<li><a><h4>С ягодами</h4></a></li>
			<li><a><h4>Для тонуса</h4></a></li>
			<li><a><h4>Для спокойствия</h4></a></li>
		</ul>
	</li>
	<li class="top parent"><a><h3>Готовая еда</h3></a>
		<ul>
			<li class="parent"><a><h4>Первое</h4></a>
				<ul>
					<li><a><h5>Супы</h5></a></li>
					<li><a><h5>Бульоны</h5></a></li>
				</ul>
			</li>
			<li class="parent"><a><h4>Закуски</h4></a>
				<ul>
					<li><a><h5>Соления, квашения</h5></a></li>
					<li><a><h5>Овощи</h5></a></li>
					<li><a><h5>Грибы</h5></a></li>
					<li><a><h5>Паштеты</h5></a></li>
					<li><a><h5>Закуски из мяса и дичи</h5></a></li>
					<li><a><h5>Блины</h5></a></li>
					<li><a><h5>Пир...

CSS

body{font-family: sans-serif; background: white; color: #444; background:white;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; line-height: 1.6em;}
h3 {font-size: 1.4em; border-bottom: 1px dotted gray; margin: 0 10px;}
h4 {font-size:1.1em; border-bottom: 1px dotted gray; margin: 0 10px;}
h5 {font-size: 1em; font-weight: 300; border-bottom: 1px dotted gray; margin: 0 10px;}
ul {margin: 0 -4px -4px -4px; padding: 0 0 0 -3px; background: transparent}
li { display:inline-block; list-style-type: none; padding: 3px 3px 3px 3px; border: 1px dashed transparent; font-size: 93%; transition: all ease-in 0.2s;background: transparent; vertical-align: top;}
li.top {display:table; padding: 3px 3px 3px 3px;  border-left:4px solid transparent;}
li:hover{color: black;}
li.parent:hover { background: transparent}
li.top:hover{background: rgba(0,0,0,0.05); background: transparent}
li>ul:hover {}
a {display: inline-block; padding: 0 3px; transition: all ease-in 0.2s;  cursor: pointer; border-radius: 200px; }
a:hover {color: black!important;}

a:hover{
background: rgb(141, 205, 253);
}
a.active:hover {
 background: rgb(155, 194, 65);
}

a.active{background: #FFD40C; color: black;}
a.active + ul{clear:right}
ul ul {display: none;}

.button{
padding:7px 15px;
display: inline-block;
font-size: 20px;
color: black;
font-weight: normal;
margin: 20px 0 1px 0;
border:rgba(0,0,0,0.3) 1px solid;
cursor: pointer;
background: white;
 border-radius: 200px;
}

.button:active{margin: 21px 0 0px 0;box-shadow: 0 1px 2px -2px black, 0 1px 0px rgba(255,255,240,0.7) inset;}

JavaScript

$(document).ready(function() {
     $('ul>li').click(function() {
         
		$(this).children('ul').slideToggle();
         
		if($(this).children('a').class != 'active')
		{
            $(this).children('a').toggleClass('active')
		}
		else
		{
			$(this).children('a').removeClass('active')            
		}
		return false;
    });
});