Sector An animated menu For Blogger 2013

Hello Reader,After A long time Its Time To Post A new navigation Menu For Blogger.Its Name is sector Which Is related to Circles :D.
Menu Is an important thing for template design the better navigation the better your visitor will easily to navigate.

For Live Demo Click The Button

Add The Below Css Code Before ]]></b:skin>  Tag:-

/* =============================================================== copyright © Mybloggerskill. =================================================================== */ .menuHoldermbs {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;} .menuHoldermbs ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;} .menuHoldermbs ul li {border-radius:0 0 300px 0; width:0; height:0;} .menuHoldermbs ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4); -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; } .menuHoldermbs ul.p1 li {position:absolute; left:0; top:0;} .menuHoldermbs ul.p2 {z-index:-1;} .menuHoldermbs ul.p3 {z-index:-1;} .menuHoldermbs li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;} .menuHoldermbs li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;} .menuHoldermbs ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;} .menuHoldermbs ul ul { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; transform-origin:0 0; -webkit-transform:rotate(90deg); -moz-transform:rotateZ(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-transition:1s; -moz-transition:1s; -ms-transition:1s; -o-transition:1s; transition:1s; } .menuHoldermbs li.s2:nth-of-type(6) > a {background:#888; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHoldermbs li.s2:nth-of-type(5) > a {background:#999; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs li.s2:nth-of-type(4) > a {background:#aaa; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHoldermbs li.s2:nth-of-type(3) > a {background:#bbb; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs li.s2:nth-of-type(2) > a {background:#ccc; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHoldermbs .a6 li:nth-of-type(6) > a {background:#444; -webkit-transform:rotate(75deg); -moz-transform:rotateZ(75deg); -ms-transform:rotate(75deg); -o-transform:rotate(75deg); transform:rotate(75deg); } .menuHoldermbs .a6 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs .a6 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .menuHoldermbs .a6 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs .a6 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(15deg); -moz-transform:rotateZ(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg); transform:rotate(15deg); } .menuHoldermbs .a5 li:nth-of-type(5) > a {background:#555; -webkit-transform:rotate(72deg); -moz-transform:rotateZ(72deg); -ms-transform:rotate(72deg); -o-transform:rotate(72deg); transform:rotate(72deg); } .menuHoldermbs .a5 li:nth-of-type(4) > a {background:#666; -webkit-transform:rotate(54deg); -moz-transform:rotateZ(54deg); -ms-transform:rotate(54deg); -o-transform:rotate(54deg); transform:rotate(54deg); } .menuHoldermbs .a5 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(36deg); -moz-transform:rotateZ(36deg); -ms-transform:rotate(36deg); -o-transform:rotate(36deg); transform:rotate(36deg); } .menuHoldermbs .a5 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(18deg); -moz-transform:rotateZ(18deg); -ms-transform:rotate(18deg); -o-transform:rotate(18deg); transform:rotate(18deg); } .menuHoldermbs .a3 li:nth-of-type(3) > a {background:#777; -webkit-transform:rotate(60deg); -moz-transform:rotateZ(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } .menuHoldermbs .a3 li:nth-of-type(2) > a {background:#888; -webkit-transform:rotate(30deg); -moz-transform:rotateZ(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .menuHoldermbs li.s1:hover ul.p2 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHoldermbs li.s2:hover ul.p3 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHoldermbs ul li:hover > a {background:#f00; color:#fff;} .menuHoldermbs li.s2:hover > a {background:#d00; color:#fff;} .menuHoldermbs .a6 li:hover > a {background:#b00; color:#fff;} .menuHoldermbs .a5 li:hover > a {background:#b00; color:#fff;} .menuHoldermbs .a3 li:hover > a {background:#b00; color:#fff;} .menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100; -webkit-transition:0s 1s; -moz-transition:0s 1s; -ms-transition:0s 1s; -o-transition:0s 1s; transition:0s 1s; } .menuHoldermbs:hover .menuWindow {width:310px; height:310px; -webkit-transition:0s 0s; -moz-transition:0s 0s; -ms-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s; } .menuHoldermbs span {display:block; -webkit-transform:rotate(5deg); -moz-transform:rotateZ(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } .menuHoldermbs ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;} .menuHoldermbs:hover ~ img.close {width:100%; height:100%;}

Add HTML Code wherever You Want To show Your Menu

<div class="menuHoldermbs"><div class="menuWindow">
<ul class="p1">
<li class="s1"><a href="#url">Menu</a>
<ul class="p2">
<li class="s2"><a href="http://mybloggerskill.blogspot.com"><span>Home</span></a></li>
<li class="s2"><a href="#url"><span>Services</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Logo</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Editing</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Storage</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contacts</span></a>
<ul class="p3 a6">
<li><a href="http://mybloggerskill.blogspot.com">Support</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Sales</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Buying</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Photographers</a></li>
<li><a href="mybloggerskill.blogspot.com">Stockist</a></li>
<li><a href="http://mybloggerskill.blogspot.com">General</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Stores</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">South Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">North Region</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Central Region</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>Contact Us</span></a>
<ul class="p3 a3">
<li><a href="http://mybloggerskill.blogspot.com">Email</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Post</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Telephone</a></li>
</ul>
</li>
<li class="s2 b6"><a href="#url"><span>Sales</span></a>
<ul class="p3 a5">
<li><a href="http://mybloggerskill.blogspot.com">DSLR Cameras</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Lenses</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Flash Guns</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Tripods</a></li>
<li><a href="http://mybloggerskill.blogspot.com">Filters</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div></div>