html圆圈布局,jQuery和CSS3创意圆形菜单布局设计

这是一款非常有创意的jQuery和CSS3圆形菜单界面布局设计。这个界面布局中，通过点击主菜单按钮可以在它的四周出现主菜单按钮。点击每一个主菜单按钮都会以动画的方式切换到相应的界面，效果非常的炫酷。

制作方法

HTML结构

菜单的HTML结构使用一个元素来作为包裹元素。汉堡包图标使用div.burger_menu来制作。子菜单按钮分别是在

元素中嵌入一个font-aawesome图标来实现。

每个主菜单调整到的界面对应HTML代码中的一个。

JAVASCRIPT

该特效中使用jQuery代码来在圆形按钮和关闭按钮在点击时为相应的元素切换class。

var $multiple_menus = '.home, .location, .image, .mail';

var $all_menus = '.burger_menu, .home, .location, .mail, .image';

$('.burger_menu').click(function () {

$(this).toggleClass('toggle_burger');

setTimeout(function () {

$('.home').toggleClass('toggle_home');

}, 100);

setTimeout(function () {

$('.location').toggleClass('toggle_location');

}, 200);

setTimeout(function () {

$('.image').toggleClass('toggle_image');

}, 300);

setTimeout(function () {

$('.mail').toggleClass('toggle_mail');

}, 400);

});

$($all_menus).click(function () {

$(this).siblings().css({ 'z-index': '5' });

$(this).css({ 'z-index': '10' });

});

$('main i.fa').click(function () {

$(this).parent().toggleClass('freeze');

setTimeout(function () {

$('.circle_background').addClass('scale');

}, 500);

if ($(this).parent().hasClass('freeze')) {

$($multiple_menus).addClass('hide');

}

});

$('i.icon_close').click(function () {

$('.burger_menu').addClass('toggle_burger');

$(this).parent().fadeOut('slow');

setTimeout(function () {

$('.circle_background').removeClass('scale');

$('i.home-ico, i.map-marker-ico, i.image-ico, i.envelope-ico').fadeIn('slow');

}, 400);

setTimeout(function () {

$($multiple_menus).css({ 'z-index': '4' }).removeClass('hide freeze');

}, 700);

$('.circle_background').css({ 'z-index': '2' });

});

$('i.home-ico').click(function () {

setTimeout(function () {

$('i.home-ico').fadeOut('fast');

}, 500);

setTimeout(function () {

$('.home_content').fadeIn('slow');

}, 1000);

});

$('i.map-marker-ico').click(function () {

setTimeout(function () {

$('i.map-marker-ico').fadeOut('fast');

}, 500);

setTimeout(function () {

$('.location_content').fadeIn('slow');

}, 1000);

});

$('i.image-ico').click(function () {

setTimeout(function () {

$('i.image-ico').fadeOut('fast');

}, 500);

setTimeout(function () {

$('.image_content').fadeIn('slow');

}, 1000);

});

$('i.envelope-ico').click(function () {

setTimeout(function () {

$('i.envelope-ico').fadeOut('fast');

}, 500);

setTimeout(function () {

$('.mail_content').fadeIn('slow');

}, 1000);

});

具体的CSS实现代码请参考下载文件。