Есть такая конструкция:
HTML:
<div class="icon"><section class="four"><a href="#" class="hmbrgr four"></a></section></div>
Скрипт:
$(function() {
$('.hmbrgr.four').hmbrgr({
width : 30,
height : 22,
barHeight : 3,
barRadius : 3,
barColor : '#2a2a2a'
});
});
(function ( $ ) {
$.fn.hmbrgr = function( settings ){
var config = $.extend( {
width : 30,
height : 22,
speed : 200,
barHeight : 3,
barRadius : 0,
barColor : '#ffffff',
animation : 'expand',
onInit : null,
onOpen : null,
onClose : null
}, settings);
var posTop = 0,
posMiddle = (config.height/2) - (config.barHeight/2),
posBottom = config.height - config.barHeight;
function hmbrgrBuild(el){
$(el)
.css({
'width' : config.width,
'height' : config.height
})
.html('<span /><span /><span />')
.find('span').css({
'position' : 'absolute',
'width' : '100%',
'height' : config.barHeight,
'border-radius' : config.barRadius,
'background-color' : config.barColor,
'transition-duration' : config.speed+'ms'
});
hmbrgrSpanReset(el);
$.isFunction(config.onInit) && config.onInit.call(this);
}
function hmbrgrSpanReset(el){
$(el)
.data('clickable', true)
.find('span').eq(0).css({
'top' : posTop
});
$(el)
.find('span').eq(1).css({
'top' : posMiddle
});
$(el)
.find('span').eq(2).css({
'top' : posBottom
});
}
function hmbrgrCommand(el){
$(el).on('click', function(e){
e.preventDefault();
if($(this).data('clickable')){
$(this).data('clickable', false);
$(el).toggleClass('cross');
if( $(el).hasClass('cross') )
hmbrgrExpand(el);
else
hmbrgrCollapse(el);
}
});
}
function hmbrgrExpand(el){
$(el).find('span').css({
top : posMiddle
});
setTimeout(function(){
$(el).addClass(config.animation).data('clickable', true);
$.isFunction(config.onOpen) && config.onOpen.call(this);
}, config.speed);
}
function hmbrgrCollapse(el){
$(el).removeClass(config.animation);
setTimeout(function(){
hmbrgrSpanReset(el);
$.isFunction(config.onClose) && config.onClose.call(this);
}, config.speed);
}
return this.each(function(){
hmbrgrBuild(this);
hmbrgrCommand(this);
});
};
}( jQuery ));
Скрипт - это иконка меню (три полоски), при нажатии на которую происходит анимация, и она становится крестиком. При повторном нажатии она снова преобразуется в три полоски, т.е. возвращается в исходное положение. Блок div
с классом icon
шириной 100%.
Нужно сделать так, чтобы при нажатии не только на иконку, но и на сам блок с классом icon
, происходила анимация иконки?
Сейчас анимация иконки происходит непосредственно при нажатии на саму иконку.
css:
.icon {
height: 42px;
cursor: pointer;
display: none;
text-align: center;
}
.hmbrgr {
position: relative;
display: inline-block;
margin-top: 10px;
}
.hmbrgr span {
position: absolute;
left: 0;
width: 100%;
background: #fff;
display: inline-block;
}
.hmbrgr.expand span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hmbrgr.expand span:nth-child(2) {
zoom: 1;
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.hmbrgr.expand span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
a.hmbrgr.four
. Вы можете применить его непосредственно к блоку icon:$('div.icon').hmbrgr({настройки});
Единственно - надо что-то с шириной делать.