.main-menu
&__link
position relative
overflow hidden
+before('')
display block
width 100%
height 4px
background-color $yellow
position absolute
top 50%
transform translateX(-116%)
z-index 1
.is-active
+before()
transform translateX(116%)
transition ease-in-out .6s(function() {
var link = $('.main-menu__link');
if(!link.hasClass('is-active')) {
link.mouseover(function(event) {
$(this).addClass('is-active')
})
link.mouseleave(function(event) {
var self = $(this);
setTimeout(function(){
self.removeClass('is-active')
},300);
});
}
})();$(function() {
var $document = $(document);
var $r = $('input[type="range"]');
var output = document.querySelectorAll('output')[0];
// set initial output value
// output.innerHTML = $r[0].value;
// update output value
$document.on('input', 'input[type="range"]', function(e) {
output.innerHTML = e.currentTarget.value;
});
// Initialize
$r.rangeslider({
polyfill: false
});
});mixin main-menu-submenu(data)
ul.main-menu__submenu&attributes(attributes)
each item, i in data
if i === subId
li.main-menu__item.main-menu__item_active
a(href=item.url)= item.title
else
li.main-menu__submenu__item
a(href=item.url)= item.title
mixin main-menu(data)
nav.main-menu&attributes(attributes)
ul
each item, i in data
if i === pageId
li.main-menu__item.main-menu__item_active
a(href=item.url).main-menu__link= item.title
if (item.submenu !== false)
+main-menu-submenu(item.submenu)
else
li.main-menu__item
a(href=item.url).main-menu__link= item.title
if (item.submenu !== false)
+main-menu-submenu(item.submenu)a(href="#{item.url}")
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?if (!empty($arResult)):?>
<ul class="clear-fix">
<?
foreach($arResult as $arItem):
if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1)
continue;
?>
<?if($arItem["SELECTED"]):?>
<li><a href="<?=$arItem["LINK"]?>" class="active-menu"><?=$arItem["TEXT"]?></a></li>
<?else:?>
<li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>
<?endforeach?>
</ul>
<?endif?><div class="clear_float"></div> Не очень хороший тон clear-fix::after {
content: '';
display: block;
clear: both;
height: 0px;
visibility: hidden;
}.clearfix::after {
content: "";
display: table;
clear: both;
}<select>
<option value="1">Выпадающий дропбокс</option>
</select>select {
padding: 5px;
}div {
width: 150px;
height: 150px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
div img {
width: 100%;
}Толковых курсов и онлайн школ , сомнительно
Попов индеец , рекомендую всю литературу издательства O'reilly media,
например:
CSS - Каскадные таблицы стилей. Подробное руководство.
Уроки в видео формате смотреть не рекомендую , так как зачастую подаётся изначально материал не правильно , структура, синтаксис , грубые ошибки , по которым вы будите учиться .
А вообще это дело наживное со временем всё уляжется методом проб и ошибок .
Больше читайте и практикуйте.
Если вам интересно что возможно по средствам CSS , гляньте мое видео :
CSS - Game Boy
p.s Видео записано не с целью обучения , в идее лежит чистый цсс ,
наглядное представление того , что пора бы перестать резать джепеги .