Skip to content

Instantly share code, notes, and snippets.

@Onepo1ntFive

Onepo1ntFive/menu.css

Created July 11, 2019 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Onepo1ntFive/215590eb5623739171566fa19b55580a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Onepo1ntFive/215590eb5623739171566fa19b55580a to your computer and use it in GitHub Desktop.
Download ZIP
html. css. js. topmenu 2й 3й уровни равной высоты
Raw
menu.css
.b-sevice {
padding: [menu.top.level1.level1_bg.padding];
background: [menu.top.level1.level1_bg.color] url("[menu.top.level1.level1_bg.img]") [menu.top.level1.level1_bg.repeat] scroll [menu.top.level1.level1_bg.hposition] [menu.top.level1.level1_bg.vposition];
text-align: [menu.top.position];
line-height: 1;
position: relative;
}
.b-sevice:after,
.b-sevice ul:after {
clear: both;
content: "";
display: block;
}
.b-sevice ul {
list-style: none;
margin: 0;
padding: 0;
}
.b-sevice a:link,
.b-sevice a:visited {
display: block;
}
.b-sevice .sevice__item-1 {
margin-right: -.275em;
display: inline-block;
position: relative;
}
.b-sevice .sevice__item-1 span {
display: block;
position: relative;
}
.b-sevice .sevice__item-1 > span a:link,
.b-sevice .sevice__item-1 > span a:visited {
padding: [menu.top.level1.normal.background.padding];
font-family: [menu.top.level1.normal.link.font_family];
font-size: [menu.top.level1.normal.link.size];
font-weight: [menu.top.level1.normal.link.weight];
font-style: [menu.top.level1.normal.link.style];
text-decoration: [menu.top.level1.normal.link.decoration];
text-transform: [menu.top.level1.normal.link.transform];
color: [menu.top.level1.normal.link.color];
display: block;
background: [menu.top.level1.normal.background.color] url("[menu.top.level1.normal.background.img]") [menu.top.level1.normal.background.repeat] scroll [menu.top.level1.normal.background.hposition] [menu.top.level1.normal.background.vposition];
}
.b-sevice .sevice__item-1:hover > span a:link,
.b-sevice .sevice__item-1:hover > span a:visited,
.b-sevice .sevice__item-1--on > span a:link,
.b-sevice .sevice__item-1--on > span a:visited,
.b-sevice .sevice__item-1--on > span a:hover,
.b-sevice .sevice__item-1--on > span a:active {
padding: [menu.top.level1.active.background.padding];
font-family: [menu.top.level1.active.link.font_family];
font-size: [menu.top.level1.active.link.size];
font-weight: [menu.top.level1.active.link.weight];
font-style: [menu.top.level1.active.link.style];
text-decoration: [menu.top.level1.active.link.decoration];
text-transform: [menu.top.level1.active.link.transform];
color: [menu.top.level1.active.link.color];
background: [menu.top.level1.active.background.color] url("[menu.top.level1.active.background.img]") [menu.top.level1.active.background.repeat] scroll [menu.top.level1.active.background.hposition] [menu.top.level1.active.background.vposition];
display: block;
}
.b-sevice .sevice__item-1 > span ins {
background: url("[menu.top.level1.normal.bullit.img]") no-repeat scroll 50% 50% transparent;
height: [menu.top.level1.normal.bullit.height];
width: [menu.top.level1.normal.bullit.width];
overflow: hidden;
position: absolute;
[menu.top.level1.normal.bullit.hposition]: [menu.top.level1.normal.bullit.hvalue];
[menu.top.level1.normal.bullit.vposition]: [menu.top.level1.normal.bullit.vvalue];
}
.b-sevice .sevice__item-1 > span em {
height: [menu.top.level1.normal.bullit.height];
width: [menu.top.level1.normal.bullit.width];
overflow: hidden;
position: absolute;
[menu.top.level1.normal.bullit.hposition]: [menu.top.level1.normal.bullit.hvalue];
[menu.top.level1.normal.bullit.vposition]: [menu.top.level1.normal.bullit.vvalue];
font-size: 0;
}
.b-sevice .sevice__item-1 > span em,
.b-sevice .sevice__item-1--on > span em {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.b-sevice .sevice__level-wrap {
position: absolute;
left: 0;
top: 100%;
overflow: hidden;
display: none;
background-color: [menu.top.level3.bg_color];
width: [menu.top.level2.width];
}
.b-sevice .sevice__level-wrap--full {
width: [menu.top.level2.width] + [menu.top.level3.width];
}
.b-sevice .sevice__item-1--haschild .sevice__level-wrap {
-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 5px 30px rgba(0, 0, 0, .15);
box-shadow: 0 5px 30px rgba(0, 0, 0, .15);
}
.b-sevice .sevice__item-1:hover .sevice__level-wrap {
display: block;
}
.b-sevice .sevice__level-2 {
padding: [menu.top.level2.padding];
display: block;
position: relative;
top: auto;
left: auto;
right: auto;
z-index: 35;
background-color: [menu.top.level2.bg_color];
width: [menu.top.level2.width];
text-align: left;
height: 100%;
}
.b-sevice .sevice__item-1:hover .sevice__level-2 {
display: block;
}
.b-sevice .sevice__item-2 {}
.b-sevice .sevice__item-2 > span a:link,
.b-sevice .sevice__item-2 > span a:visited {
padding: [menu.top.level2.normal.background.padding];
font-family: [menu.top.level2.normal.link.font_family];
font-size: [menu.top.level2.normal.link.size];
font-weight: [menu.top.level2.normal.link.weight];
font-style: [menu.top.level2.normal.link.style];
text-decoration: [menu.top.level2.normal.link.decoration];
text-transform: [menu.top.level2.normal.link.transform];
color: [menu.top.level2.normal.link.color];
display: block;
background: [menu.top.level2.normal.background.color] url("[menu.top.level2.normal.background.img]") [menu.top.level2.normal.background.repeat] scroll [menu.top.level2.normal.background.hposition] [menu.top.level2.normal.background.vposition];
}
.b-sevice .sevice__item-2:hover > span a:link,
.b-sevice .sevice__item-2:hover > span a:visited,
.b-sevice .sevice__item-2--on > span a:link,
.b-sevice .sevice__item-2--on > span a:visited,
.b-sevice .sevice__item-2--on > span a:hover,
.b-sevice .sevice__item-2--on > span a:active {
padding: [menu.top.level2.active.background.padding];
font-family: [menu.top.level2.active.link.font_family];
font-size: [menu.top.level2.active.link.size];
font-weight: [menu.top.level2.active.link.weight];
font-style: [menu.top.level2.active.link.style];
text-decoration: [menu.top.level2.active.link.decoration];
text-transform: [menu.top.level2.active.link.transform];
color: [menu.top.level2.active.link.color];
display: block;
background: [menu.top.level2.active.background.color] url("[menu.top.level2.active.background.img]") [menu.top.level2.active.background.repeat] scroll [menu.top.level2.active.background.hposition] [menu.top.level2.active.background.vposition];
}
.b-sevice .sevice__level-3 {
padding: [menu.top.level3.padding];
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 35;
width: [menu.top.level3.width];
background-color: [menu.top.level3.bg_color];
}
.b-sevice .sevice__level-3:before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 999px;
width: [menu.top.level3.width];
background-color: [menu.top.level3.bg_color];
}
.b-sevice .sevice__item-2:hover .sevice__level-3 {
display: block;
}
.b-sevice .sevice__item-3 > span a:link,
.b-sevice .sevice__item-3 > span a:visited {
padding: [menu.top.level3.normal.background.padding];
font-family: [menu.top.level3.normal.link.font_family];
font-size: [menu.top.level3.normal.link.size];
font-weight: [menu.top.level3.normal.link.weight];
font-style: [menu.top.level3.normal.link.style];
text-decoration: [menu.top.level3.normal.link.decoration];
text-transform: [menu.top.level3.normal.link.transform];
color: [menu.top.level3.normal.link.color];
display: block;
background: [menu.top.level3.normal.background.color] url("[menu.top.level3.normal.background.img]") [menu.top.level3.normal.background.repeat] scroll [menu.top.level3.normal.background.hposition] [menu.top.level3.normal.background.vposition];
}
.b-sevice .sevice__item-3:hover > span a:link,
.b-sevice .sevice__item-3:hover > span a:visited,
.b-sevice .sevice__item-3--on > span a:link,
.b-sevice .sevice__item-3--on > span a:visited,
.b-sevice .sevice__item-3--on > span a:hover,
.b-sevice .sevice__item-3--on > span a:active {
padding: [menu.top.level3.active.background.padding];
font-family: [menu.top.level3.active.link.font_family];
font-size: [menu.top.level3.active.link.size];
font-weight: [menu.top.level3.active.link.weight];
font-style: [menu.top.level3.active.link.style];
text-decoration: [menu.top.level3.active.link.decoration];
text-transform: [menu.top.level3.active.link.transform];
color: [menu.top.level3.active.link.color];
display: block;
background: [menu.top.level3.active.background.color] url("[menu.top.level3.active.background.img]") [menu.top.level3.active.background.repeat] scroll [menu.top.level3.active.background.hposition] [menu.top.level3.active.background.vposition];
}
Raw
menu.js
$(function() {
console.log('top menu');
//top menu
var $menutopList,
$menutopListWrap,
$menutopListParent,
menutopListHeight,
menutopListParent;
$('.js-menutop-haschild').on({
'mouseenter': function() {
$menutopListWrap = $(this).parents('.js-menutop-wrap');
$menutopListParent = $(this).parents('.js-menutop-parent');
$menutopList = $(this).find('.js-menutop-child');
menutopListParent = $menutopListParent.outerHeight(true);
menutopListHeight = $menutopList.outerHeight(true);
console.log(menutopListParent, menutopListHeight)
if (menutopListParent > menutopListHeight) {
$menutopListWrap.height(menutopListParent)
} else {
$menutopListWrap.height(menutopListHeight)
}
$menutopListWrap.addClass("sevice__level-wrap--full");
},
'mouseleave': function() {
$menutopListWrap = $(this).parents('.js-menutop-wrap');
$menutopListWrap.css('height', 'auto');
$menutopListWrap.removeClass("sevice__level-wrap--full");
}
});
});// ready
Raw
topMenu.twig
<div class="b-header {{ html_class }}"{{ Design.write(' sklayout="head"') }}>
<div class="b-sevice"{{ Design.write(' sktag="menu.top"') }}>
<ul class="sevice__level-1"{{ Design.write(' sktag="menu.top.level1"') }}>
{%for item in items%}
{% if item.show %}
<li class="sevice__item-1 sevice__item-id-{{item['id']}}{% if item.selected %} sevice__item-1--on{% endif %}{% if loop.last %} sevice__item-1--last{% endif %}{% if item.items|length > 0 %} sevice__item-1--haschild{% endif %}">
<span>
<a href="{{item.href}}" {% if aTargetBlank[item.id] is defined %} target="_blank" {% endif %} >
{% if icon[item['id']] is defined %}
<em style="background-image: url({{ icon[item['id']] }});"></em>
{% else %}
<ins></ins>
{% endif %}
{{item.title}}
</a>
</span>
{% if item.items|length > 0 %}
<div class="sevice__level-wrap js-menutop-wrap">
<ul class="sevice__level-2 js-menutop-parent"{{ Design.write(' sktag="menu.top.level2"') }}>
{%for item2 in item.items%}
{% if item2.show %}
<li class="sevice__item-2{% if item2.items|length > 0 %} sevice__item-2--haschild js-menutop-haschild{% endif %}{% if item2.selected %} sevice__item-2--on{% endif %}{% if loop.last %} last2{% endif %}">
<span>
<a href="{{item2.href}}" {% if aTargetBlank[item2.id] is defined %} target="_blank" {% endif %}>
{{item2.title}}
<ins></ins>
</a>
</span>
{% if item2.items|length > 0 %}
<ul class="sevice__level-3 js-menutop-child"{{ Design.write(' sktag="menu.top.level3"') }}>
{%for item3 in item2.items%}
{% if item3.show %}
<li class="sevice__item-3{% if item3.selected %} sevice__item-3--on{% endif %}{% if loop.last %} last3{% endif %}">
<span>
<a href="{{item3.href}}" {% if aTargetBlank[item3.id] is defined %} target="_blank" {% endif %}>{{item3.title}}</a>
</span>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment