Оригинальная навигация по сайту, виде дизайн соты, которое полностью работает на CSS. Здесь вы можете красиво разместить на сайте его, но не на каждый подойдет. Так как стилистика его и сама ширина требует больше места , чем обычно для такой темы. Но зато, здесь все очень просто, вы можете в каждый отдел прописать, то что вам нужно, но основном это категорий, которые отлично отображаются на этом материале. Его рабочая зона в 2D трансформации, и главное не применяется не один код. Здесь выходят на первое место свойства Informationtransform, преобразования, которые и будут управлять 2D и 3D трансляций самого элемента.
Установка.
Ставим в нужное место по своему ресурсу
Код
<br> <style> <br> ul.hex {padding:0; margin:150px auto; list-style:none; width:104px; height:60px; position:relative;} <br> ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0; z-index:100; text-align:center; text-decoration:none; font:normal 20px/60px 'Neucha', cursive; color:#fff; <br> text-shadow: rgba(0,0,0,0.8) 0px 2px 2px; <br> } <br> ul.hex li a:before {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1; <br> -webkit-transform: rotate(60deg); <br> -moz-transform: rotate(60deg); <br> -ms-transform: rotate(60deg); <br> -o-transform: rotate(60deg); <br> transform: rotate(60deg); <br> } <br> ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1; <br> -webkit-transform: rotate(-60deg); <br> -moz-transform: rotate(-60deg); <br> -ms-transform: rotate(-60deg); <br> -o-transform: rotate(-60deg); <br> transform: rotate(-60deg); <br> }ul.hex li:nth-child(1) a, <br> ul.hex li:nth-child(1) a:before, <br> ul.hex li:nth-child(1) a:after {background:#c60; <br> background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> } <br> ul.hex li:not(:first-child) a, <br> ul.hex li:not(:first-child) a:before, <br> ul.hex li:not(:first-child) a:after {background-color:#c00; <br> background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%); <br> } <br> ul.hex li:nth-child(1) a:hover, <br> ul.hex li:nth-child(1) a:hover:before, <br> ul.hex li:nth-child(1) a:hover:after {background-color:#fa0; color:#000;} <br> ul.hex li:not(:first-child) a:hover, <br> ul.hex li:not(:first-child) a:hover:before, <br> ul.hex li:not(:first-child) a:hover:after {background-color:#0a0; color:#000;} <br> ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0; <br> -webkit-transform-origin: -54px 30px; <br> -moz-transform-origin: -54px 30px; <br> -ms-transform-origin: -54px 30px; <br> -o-transform-origin: -54px 30px; <br> transform-origin: -54px 30px; <br> } <br> ul.hex li:nth-child(1) {left:0;} <br> ul.hex li:nth-child(3) { <br> -webkit-transform: rotate(60deg); <br> -moz-transform: rotate(60deg); <br> -ms-transform: rotate(60deg); <br> -o-transform: rotate(60deg); <br> transform: rotate(60deg); <br> } <br> ul.hex li:nth-child(3) a { <br> -webkit-transform: rotate(-60deg); <br> -moz-transform: rotate(-60deg); <br> -ms-transform: rotate(-60deg); <br> -o-transform: rotate(-60deg); <br> transform: rotate(-60deg); <br> } <br> ul.hex li:nth-child(4) { <br> -webkit-transform: rotate(120deg); <br> -moz-transform: rotate(120deg); <br> -ms-transform: rotate(120deg); <br> -o-transform: rotate(120deg); <br> transform: rotate(120deg); <br> } <br> ul.hex li:nth-child(4) a { <br> -webkit-transform: rotate(-120deg); <br> -moz-transform: rotate(-120deg); <br> -ms-transform: rotate(-120deg); <br> -o-transform: rotate(-120deg); <br> transform: rotate(-120deg); <br> } <br> ul.hex li:nth-child(5) { <br> -webkit-transform: rotate(180deg); <br> -moz-transform: rotate(180deg); <br> -ms-transform: rotate(180deg); <br> -o-transform: rotate(180deg); <br> transform: rotate(180deg); <br> } <br> ul.hex li:nth-child(5) a { <br> -webkit-transform: rotate(-180deg); <br> -moz-transform: rotate(-180deg); <br> -ms-transform: rotate(-180deg); <br> -o-transform: rotate(-180deg); <br> transform: rotate(-180deg); <br> } <br> ul.hex li:nth-child(6) { <br> -webkit-transform: rotate(240deg); <br> -moz-transform: rotate(240deg); <br> -ms-transform: rotate(240deg); <br> -o-transform: rotate(240deg); <br> transform: rotate(240deg); <br> } <br> ul.hex li:nth-child(6) a { <br> -webkit-transform: rotate(-240deg); <br> -moz-transform: rotate(-240deg); <br> -ms-transform: rotate(-240deg); <br> -o-transform: rotate(-240deg); <br> transform: rotate(-240deg); <br> } <br> ul.hex li:nth-child(7) { <br> -webkit-transform: rotate(300deg); <br> -moz-transform: rotate(300deg); <br> -ms-transform: rotate(300deg); <br> -o-transform: rotate(300deg); <br> transform: rotate(300deg); <br> } <br> ul.hex li:nth-child(7) a { <br> -webkit-transform: rotate(-300deg); <br> -moz-transform: rotate(-300deg); <br> -ms-transform: rotate(-300deg); <br> -o-transform: rotate(-300deg); <br> transform: rotate(-300deg); <br> } <br> </style> <br> <ul class="hex"> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> <li><a href="#">Menu</a></li> <br> </ul>
