17 Липень 2014
Рубрика: код

Как создать выпадающее меню без скриптов: Sass-версия

Недавно я писал, как сделать выпадающее меню без скриптов. Это выпадающее меню, работающее при помощи простых свойств CSS. При наведении на основной элемент под ним появляется скрытое меню.

Сегодня предлагаю вам дополнение, это Sass-код для стилей меню.

ul.dropdown {
	z-index: 10;
	list-style-type: none;
	padding: 0;
	a.dropdown-top { 
		background: #efefef;
		&:hover { 
			padding: 2px 10px 5px; 
		}
	}
	li { 
		position: relative; 
	}
	ul.dropdown-inside {
		list-style-type: none;
		padding: 0;
		position: absolute;
		left: -9999px;
	}
	li.dropdown-top {
		display: inline;
		float: left;
		margin: 0 1px 0 0;
		a {
			padding: 3px 10px 4px;
			display: block;
		}
		&:hover {
			.dropdown-inside {
				display: block;
				left: 0;
				background: #fff;
				a:hover { background: #efefef; }
			}
		}
	}
}

Стили остались те же, но этот код можно использовать, если вы пользуетесь Sass (синтаксис SCSS).

Больше про этот язык читайте в мануале по Sass.

Тепер я хочу бачити коментарі 0