Меню работает с применением 2D трансформации,без применения скриптов.Применяется свойство  transform
Свойство transform управляет 2D & 3D трансформацией элемента,производя изменение его положения по внутренним и внешним сторонам,а так же по всем координатам оси.Довольно интересное свойство в котором можно осуществить абстрактное видение элемента,который можно наклонить и повернуть,сузить расширить по указанным значениям.Могут быть применены несколько видов трансформации,для этого указывайте их через пробел.transform,почитайте статью о возможностях свойства чтобы быть в курсе.Количество пунктов установленно в количестве 7.Применяется псевдокласс :nth-child
Псевдокласс :nth-child задает стиль для элемента если он является определенным дочерним элементом своего родителя.:nth-child,почитайте о возможностях свойства чтобы быть в курсе.Для изменения расположения общего элемента измените значение внешнего отступа margin
Свойство margin это сокращённый способ установить параметры отступов для всех четырёх сторон элемента относительно родительского элемента.Не путать со свойством padding устанавливающим отступ внутри элемента.Для более объективного сценария указывайте расширенные свойства margin.Если вы хотите применить несколько значений расширенных свойств для margin,прописывайте их через пробел,можно указать от одного до четырёх значений.Дополнительно,существует порядок установки расширенных свойств,свойства устанавливаются по часовой стрелке начиная с верхней части.margin:150px auto;,для смещения общего элемента ниже от верхней части страницы.Расчёт начинается из центрального объекта и обкладывается по кругу всеми остальными.Стили можно прописать на месте установки меню или вынести их во внешний файл стилей,но старайтесь не перегружать файл основных стилей.
Пример кода меню
<style>
ul.hex {padding:0; margin:150px auto; list-style:none; width:104px; height:60px; position:relative;}
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;
text-shadow: rgba(0,0,0,0.8) 0px 2px 2px;
}
ul.hex li a:before {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#c60;
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%);
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%);
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%);
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%);
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%);
}
ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#c00;
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%);
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%);
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%);
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%);
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%);
}
ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#fa0; color:#000;}
ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#0a0; color:#000;}
ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}
ul.hex li:nth-child(1) {left:0;}
ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}
ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
ul.hex li:nth-child(6) {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
ul.hex li:nth-child(6) a {
-webkit-transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-ms-transform: rotate(-240deg);
-o-transform: rotate(-240deg);
transform: rotate(-240deg);
}
ul.hex li:nth-child(7) {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
ul.hex li:nth-child(7) a {
-webkit-transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
transform: rotate(-300deg);
}
</style>
<ul class="hex">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
|
