Меню на CSS

P

Prosto

Гость
#1

В то место, куда хотите вставить меню

HTML:
<div id="menu">
   
    <input type="checkbox" id="on-check" name="on-check" />
   
    <label id="on-button" for="on-check">
        <span><span class="ss-plus"><!-- Разместите иконку плюса здесь, если вы не используете специальный шрифт --></span></span>
        <span><span class="ss-hyphen"><!-- Разместите иконку минуса здесь, если вы не используете специальный шрифт --></span></span>
    </label>
   
    <input type="radio" id="info-home" name="radio-check" />
    <input type="radio" id="info-compass" name="radio-check" checked />
    <input type="radio" id="info-heart" name="radio-check" />
    <input type="radio" id="info-rss" name="radio-check" />
    <input type="radio" id="info-refresh" name="radio-check" />
    <input type="radio" id="info-star" name="radio-check" />
   
    <div id="menu-items">
        <div class="middle">
            <div class="top">
                <span class="bg-piece"> </span>
                <label class="ss-home" for="info-home"><!-- Разместите иконку главной страницы здесь, если вы не используете специальный шрифт --></label>
                <span class="bg-piece"> </span>
                <label class="ss-compass" for="info-compass"><!-- Разместите иконку компаса здесь, если вы не используете специальный шрифт --></label>
                <span class="bg-piece"> </span>
                <label class="ss-heart" for="info-heart"><!-- Разместите иконку сердца здесь, если вы не используете специальный шрифт --></label>
            </div>
            <div class="bottom">
                <span class="bg-piece"> </span>
                <label class="ss-rss" for="info-rss"><!-- Разместите иконку RSS, если вы не используете специальный шрифт --></label>
                <span class="bg-piece"> </span>
                <label class="ss-refresh" for="info-refresh"><!-- Разместите иконку обновления здесь, если вы не используете специальный шрифт --></label>
                <span class="bg-piece"> </span>
                <label class="ss-star" for="info-star"><!-- Разместите иконку звезды здесь, если вы не используете специальный шрифт --></label>
            </div>
        </div>
       
    </div>
   
    <div class="info home-info">Вернуться домой</div>
    <div class="info compass-info">Куда двигаемся?</div>
    <div class="info heart-info">Любимое</div>
    <div class="info rss-info">RSS</div>
    <div class="info star-info">Доминирование в вселенной</div>
    <div class="info refresh-info">Обновление</div>
   
    <div class="faux-shadow"> </div>
</div>
В main.css добавить
Код:
/* Для правильного позиционирования меню */
#menu {
    position: relative;
    width: 230px;
    margin: 0px auto;
    top: 100px;
    left: 37px;
}
 
/* Используем свойство overflow: hidden;, поэтому надо создать имитацию тени */
.faux-shadow {
    position: absolute;
    content:  " ";
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
    border-radius: 300px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    z-index: -9999;
}
 
/* Кнопка в центре меню служит для активации меню */
#on-button {
    border-radius: 100px;
    width: 150px;
    height: 150px;
    color: #fff;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    background-color: #313b3d;
    pointer-events: none;
    font-size: 5em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);
}
 
/* При наведении курсора мыши */
#on-button:hover {
    box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);   
}
 
/* При нажатии кнопки мыши*/
#on-button:active {
    box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.3);
}
 
/* Элемент spans внутри кнопки будет вращаться */
#on-button > span {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;   
    -ms-backface-visibility: hidden;   
    -o-backface-visibility: hidden;   
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear;
    -ms-transition: -moz-transform 0.2s linear;
    -o-transition: -moz-transform 0.2s linear;
    transition: -moz-transform 0.2s linear;
    display: block;
    width: 122px;
    height: 122px;
    background: #313b3d;
    border-radius: 120px;
    pointer-events: auto;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 34px;
    margin: 14px;
    box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5);
}
 
/* Изменение тени при наведении курсора мыши,  что бы она соответствовала тени контейнера */
#on-button:hover > span {
    box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5);
}
 
 
/* Вращение последнего элемента span, чтобы он был перевернутым */
#on-button > span:last-of-type {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 
/* Добавляем псевдо элемент с белым фоном, который будет создавать 
  иллюзию, что кнопка имеет отверстие */
#on-button:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width:  120px;
    height: 120px;
    margin: 15px;
    border-radius: 120px;
    background: #fff;
    z-index: 2;
}
 
/* Когда элемент ввода отмечен, поворачиваем элементы span вокруг на 180 градусов */
#on-check:checked + #on-button > span:first-of-type {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#on-check:checked + #on-button > span:last-of-type {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
 
/* Также изменяем ширину и высоту тени */
#on-check:checked ~ .faux-shadow {
width: 300px;
height: 300px;
top: -75px;
left: -75px;
}
 
/* Элементы div с информацией не выводятся для неотмеченных кнопок */
#menu #on-check:not(:checked) ~ .info {
opacity: 0;
}
 
/* Выводим дополнительную информацию с задержкой 0.4s, чтобы пункты меню закончили анимацию растягивания */
#menu #on-check:checked ~ .info {
-webkit-transition: all 0.2s linear 0.4s;
-moz-transition: all 0.2s linear 0.4s;
-ms-transition: all 0.2s linear 0.4s;
-o-transition: all 0.2s linear 0.4s;
transition: all 0.2s linear 0.4s;
}
 
 
/* Растягиваем пункты меню, когда кнопка нажата */
#on-check:checked ~ #menu-items {
width: 300px;
height: 300px;
left: -75px;
top: -75px;
}
/* Стили для контейнера пунктов меню */
#menu-items {
width: 150px;
height: 150px;
border-radius: 250px;
background: #aaa;
position: absolute;
top: 0;
left: 0;
z-index: -99;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
/* Меню разделено на две части: верх и низ. */
#menu-items .top, #menu-items .bottom {
width: 100%;
float: left;
z-index: 1;
height: 50%;
} 
#menu-items .bottom {
top: 50%;
}
/* Средняя часть увеличивается для фиксации ошибки, выражающейся в 
   выходе содержания за рамки при установленном свойстве overflow: hidden; */
   
#menu-items .middle {
height: 100%;
white-space: nowrap;
}
/* Стили для фонового элемента. Данный контейнер ничего не делает. */
   
#menu-items .middle .bg-piece {
width: 33.3%;
height: 100%;
text-align: center;
display: inline-block !important;
background: #eee;
font-size: 2.5em;
position: absolute;
display: block;
}
/* Очень важно, чтобы все части фона находились в правильном положении.
   Ниже привденный код служит для указанной цели. */
   
#menu-items .middle > div .bg-piece:nth-of-type(2) {
position: absolute;
width: 0;
height: 0;
}
#menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after {  
content: " ";
position: absolute;
border-color: transparent transparent #eee transparent;
border-width: 148px;
border-style: solid;
top: -142px;
left: 0px;
z-index: 999;
}
#menu-items .middle .top .bg-piece:nth-of-type(2):after {
border-color: #eee transparent transparent transparent;
top: -5px;
left: 0;
}
#menu-items .middle .top .bg-piece:nth-of-type(1) { 
box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}
#menu-items .middle .top .bg-piece:nth-of-type(3) { 
box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}
#menu-items .middle > div .bg-piece:nth-of-type(1) {
width: 50%;
box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1);
}
#menu-items .middle > div .bg-piece:nth-of-type(3) {
width: 50%;
right: 0;
box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1);
}
/* Метки, которые содержат иконки. */
#menu-items label {
position: absolute;
z-index: 9999999;
font-size: 2em;
border-radius: 5px;
cursor: pointer;
text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
}
/* при наведении курсора они подсвечиваются синим. */
#menu-items label:hover {
text-shadow: 0 0 15px #a6d8f4;
}
/* Блок информации, который появляется при выборе меню. */
#menu .info {
opacity: 0;
position: absolute;
left: 55px;
top: -136px;
display: inline-block;
background-color: #d2d2d2;
padding: 10px;
color: #343434;
z-index: 9999999;
font: normal normal 1.5em Arial, sans-serif;
background: #eee;
border: 1px solid #ddd;
font-weight: bold;
border-radius: 8px;
box-shadow: inset 0px 40px 200px -30px rgba(255, 255, 255, 1), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
/* маленькая стрелка для блока меню. */
#menu .info:after {
position: absolute;
content: " ";
top: 37px;
left: 8px;
border-color: #f3f3f3 transparent transparent transparent;
border-width: 10px;
border-style: solid;
 
}
/* Рамка для стрелки. */
#menu .info:before {
position: absolute;
content: " ";
top: 38px;
left: 8px;
border-color: #ddd transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
/* Скрываем ради кнопки и чекбоксы. */
#menu input[type='checkbox'], input[type='radio'] { display: none; }
/* Позиционируем иконки. */
#menu-items .top .ss-home { top: 90px; left: 34px; }
#menu-items .top .ss-heart {  top: 90px; left: 241px; }
#menu-items .top .ss-compass { top: 21px; left: 137px; }
#menu-items .bottom .ss-rss {  top: 181px; left: 35px; }
#menu-items .bottom .ss-star {  top: 181px; left: 243px; }
#menu-items .bottom .ss-refresh { top: 249px; left: 139px; }
/* Вращаем пункты меню в нужное полжение, когда нажата кнопка мыши. */
#info-home:checked ~ #menu-items, #menu-items .top .ss-heart { 
-webkit-transform: rotateZ(66deg); 
-moz-transform: rotateZ(66deg); 
-ms-transform: rotateZ(66deg); 
-o-transform: rotateZ(66deg); 
transform: rotateZ(66deg); 
}
#info-heart:checked ~ #menu-items, #menu-items .top .ss-home { 
-webkit-transform: rotateZ(-66deg); 
-moz-transform: rotateZ(-66deg); 
-ms-transform: rotateZ(-66deg); 
-o-transform: rotateZ(-66deg); 
transform: rotateZ(-66deg); 
}
#info-rss:checked ~ #menu-items, #menu-items .bottom .ss-star { 
-webkit-transform: rotateZ(114deg); 
-moz-transform: rotateZ(114deg); 
-ms-transform: rotateZ(114deg); 
-o-transform: rotateZ(114deg); 
transform: rotateZ(114deg); 
}
#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss { 
-webkit-transform: rotateZ(-114deg); 
-moz-transform: rotateZ(-114deg); 
-ms-transform: rotateZ(-114deg); 
-o-transform: rotateZ(-114deg); 
transform: rotateZ(-114deg); 
}
#info-refresh:checked ~ #menu-items, #menu-items .bottom .ss-refresh { 
-webkit-transform: rotateZ(180deg); 
-moz-transform: rotateZ(180deg); 
-ms-transform: rotateZ(180deg); 
-o-transform: rotateZ(180deg); 
transform: rotateZ(180deg); 
}
/* --------------------------------------------------------------- */
/* Выделяем выбранный пункт. */
#info-home:checked ~ #menu-items .ss-home,
#info-heart:checked ~ #menu-items .ss-heart,
#info-rss:checked ~ #menu-items .ss-rss,
#info-star:checked ~ #menu-items .ss-star,
#info-refresh:checked ~ #menu-items .ss-refresh,
#info-compass:checked ~ #menu-items .ss-compass { 
text-shadow: 0 0 15px #3facf2;
color: #24434f;
}
/* Делаем видимым блок информации по нажатию кнопки мыши. */
#info-home:checked ~ .home-info,
#info-heart:checked ~ .heart-info,
#info-rss:checked ~ .rss-info,
#info-star:checked ~ .star-info,
#info-refresh:checked ~ .refresh-info,
#info-compass:checked ~ .compass-info {
opacity: 1;
}
 

Вложения

Сверху