TweenMax.js 六边形博客导航菜单模板

Hexagon Blog Header Menu mashup

menu, hexagon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2945
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// comment out due to webkit transform perspective bug
//CSSPlugin.defaultTransformPerspective = 600;

// use perspective property instead on .hex parent
TweenMax.set(".lab_item, .logo-cont", {
    css: {
        perspective: 600
    }
});

TweenMax.staggerFromTo(".background .hex", .5, {
    scale: 0,
    rotation: -90,
    autoAlpha: 0,
    transformOrigin: "50% 50%"
}, {
    scale: 1.2,
    rotation: 0,
    autoAlpha: .7,
    transformOrigin: "50% 50%"
}, .015);

$(".hex.hover").mouseover(function() {
    TweenMax.to(this, 1, {
        scale: 1.4,
        autoAlpha: 1,
        transformOrigin: "50% 50%",
        ease: Elastic.easeOut
    });
});

$(".hex.hover").mouseout(function() {
    TweenMax.to(this, .5, {
        scale: 1.2,
        autoAlpha: .7,
        transformOrigin: "50% 50%",
        ease: Elastic.easeOut
    });
});

$("#prog").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#prog-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle1", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#stud").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#stud-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle2", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#env").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#env-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle3", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#gen").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#gen-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle4", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#pow").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#pow-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle5", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#con").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#con-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle6", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle7", 0, {
        height: 0,
        display: "none"
    });
});

$("#geo").click(function() {
    TweenMax.to(".lab_item", 0, {
        zIndex: 9999
    });
    TweenMax.to("#geo-par", .8, {
        zIndex: 9999999
    });
    TweenMax.to(".hex", 1, {
        autoAlpha: .7,
        color: "#fff"
    });
    TweenMax.to("#toggle7", .8, {
        height: 350,
        display: "block"
    });
    TweenMax.to("#toggle1", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle2", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle3", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle5", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle6", 0, {
        height: 0,
        display: "none"
    });
    TweenMax.to("#toggle4", 0, {
        height: 0,
        display: "none"
    });
});

// Draggable.create(".container", {type:"scroll", bounds:window, throwProps:false});

编译

CSS

@charset "utf-8";
body {
    background-color: #c2d7ee;
    margin: 0;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}
.container {
    position: absolute;
    overflow: hidden;
    width: 140%;
    left: -140px;
    top: -60px;
    z-index: 999;
}
.wrapper {
    position: absolute;
    width: 988px;
    left: 50%;
    margin-left: -133px;
    z-index: 9999;
}
.content {
    position: relative;
    width: 110%;
    color: #222;
    margin: -33px 0px -25px 0px;
    padding: 30px;
    z-index: 999999;
    -moz-box-shadow: inset 0px 0px 17px #000;
    -webkit-box-shadow: inset 0px 0px 17px #000;
    box-shadow: inset 0px 0px 17px #000;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
}
.hex:before {
    content: " ";
    width: 0;
    height: 0;
    border-bottom: 30px solid #73a642;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -29px;
    left: 0;
}
.hex {
    display: inline-block;
    margin-top: 30px;
    width: 104px;
    height: 62px;
    background-color: #f37126;
    position: absolute;
    text-align: center;
    color: #fff;
    white-space: normal;
    overflow: visible;
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 2.1px;
    -webkit-transform: scale(3, 3, 3);
    -ms-transform: scale3d(3, 3, 3);
    transform: scale3d(3, 3, 3);
}
.hex:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -29px;
    left: 0px;
    border-top: 30px solid #2bb4e8;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.logo {
    padding: 0;
    background: url(http://www.advantageecommerce.com/dev-snippets/images/mm_logo256.png) top left no-repeat;
    background-size: 75px 75px;
    width: 100px;
    height: 100px;
}
.logo-cont {
    width: 130px;
    height: 80px;
    z-index: 9999999;
    background: url(http://www.advantageecommerce.com/dev-snippets/images/mm_logo75.png) top left no-repeat;
    position: relative;
    display: inline-block;
    /*.logo .hex, .logo .hex:before, .logo .hex:after { border: none;}*/
    
    cursor: pointer;
}
.one .hex {
    background-color: #2bb4e8;
}
.one .hex:after {
    border-top: 30px solid #2bb4e8;
}
.one .hex:before {
    border-bottom: 30px solid #2bb4e8;
}
.two .hex {
    background-color: #73a642;
}
.two .hex:after {
    border-top: 30px solid #73a642;
}
.two .hex:before {
    border-bottom: 30px solid #73a642;
}
.three .hex {
    background-color: #f37126;
}
.three .hex:after {
    border-top: 30px solid #f37126;
}
.three .hex:before {
    border-bottom: 30px solid #f37126;
}
.four .hex {
    background-color: #d5158a;
}
.four .hex:after {
    border-top: 30px solid #d5158a;
}
.four .hex:before {
    border-bottom: 30px solid #d5158a;
}
.hex-row {
    white-space: nowrap;
}
.hex-row.even {
    margin-left: 68px;
    white-space: nowrap;
}
.hex.hover:hover {
    background-color: #666;
    cursor: pointer;
}
.hex.hover:hover:after {
    border-top: 30px solid #666;
}
.hex.hover:hover:before {
    border-bottom: 30px solid #666;
}
.hex.hover span {
    top: 20px;
    position: relative;
}
.lab_item {
    width: 130px;
    height: 110px;
    position: relative;
    display: inline-block;
}
.lab_item_main {
    width: 130px;
    height: 110px;
    position: relative;
    display: inline-block;
}
.lab_item_main:hover {
    z-index: 999999 !important;
}
section.head {
    width: 100%;
    height: 50%;
    z-index: 9999999 !important;
}
section.content-body {
    position: absolute;
    top: 450px;
    left: 0px;
    background: #eee;
    width: 100%;
    height: 2600px;
    box-shadow: 0 -4px 10px #333, 0 4px 10px #333;
    padding: 25px 0 0 20%;
    z-index: 4;
}
div.footer {
    position: absolute;
    top: 2860px;
    left: 0px;
    height: 60px;
    width: 100%;
    background: #6f7985;
    z-index: 0;
}
.wrapper {
    width: 80%;
}
span.title {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 300;
    color: #0769ad;
    font-size: 40px;
}
p {
    font-family: sans-serif;
    font-weight: 300;
    color: #333;
    font-size: 14px;
}
p a {
    text-decoration: none;
    color: #0769ad;
}
p code {
    background: #dee7f7;
    border-radius: 3px;
    padding: 2px 6px 2px 6px;
    border: 1px solid #cdd6e6;
    font-size: 13px;
    margin-top: 15px;
}
p.sub {
    margin-left: 35px;
}
ul li {
    font-family: sans-serif;
    font-weight: 300;
    color: #333;
    font-size: 14px;
    margin-top: 5px;
}

HTML

</div>
            <div class="hex-row even">
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex hover" id="prog"><span>PRODUCTION MANAGEMENT</span>
                    </div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex hover" id="prog"><span>PROGRAM MANAGEMENT</span>
                    </div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row">
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>

<div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="pow-par">
                    <div class="hex hover" id="pow"><span>SUPPLY CHAIN</span>
                    </div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="stud-par">
                    <div class="hex hover" id="stud"><span>PROCUREMENT</span>
                    </div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row even">
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="env-par">
                    <div class="hex hover" id="env"><span>ENVIRONMENTAL</span>
                    </div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="pow-par">
                    <div class="hex hover" id="pow"><span>POPULATION DISBRSEMENT</span>
                    </div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="pow-par">
                    <div class="hex hover" id="pow"><span>AGILE METHODOLOGIES</span>
                    </div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row">

<div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="env-par">
                    <div class="hex hover" id="env"><span>ENVIRONMENTAL</span>
                    </div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="gen-par">
                    <div class="hex hover" id="gen"><span>CONSUMER BEHAVIOR</span>
                    </div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="con-par">
                    <div class="hex hover" id="con"><span>CONSTRUCTION MANAGEMENT</span>
                    </div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row even">
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="gen-par">
                    <div class="hex hover" id="gen"><span>GENERATIONAL</span>
                    </div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four" id="pow-par">
                    <div class="hex hover" id="pow"><span>POWER DELIVERY</span>
                    </div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row">
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="logo-cont">
                    <div class="logo"></div>
                </div>
                <div class="logo-cont">
                    <div class="logo"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three" id="pow-par">
                    <div class="hex hover" id="pow"><span>POWER DELIVERY</span>
                    </div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>
            <div class="hex-row even">
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one" id="con-par">
                    <div class="hex hover" id="con"><span>CONSTRUCTION MANAGEMENT</span>
                    </div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item one">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item two">
                    <div class="hex"></div>
                </div>
                <div class="lab_item three">
                    <div class="hex"></div>
                </div>
                <div class="lab_item four">
                    <div class="hex"></div>
                </div>
            </div>

</div>
    </div>
</div>
<section id="header" class="head"></section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

Hexagon Blog Header Menu mashup

menu, hexagon

编辑器支持Emmet

快捷键

Hexagon Blog Header Menu mashup

menu, hexagon

HTML5 Canvas光线游走的蜂巢（六边形网格）动画

HTML5 Canvas霓虹六边形组图粒子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：