Круглое меню – Коллекция потрясающих меню для сайта | html, css и javascript (jQuery) — Вебджем.рф

Содержание

Как создать круглое меню для сайта на CSS3

/* Для правильного позиционирования меню */

#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;

}

Лучшие круговые меню для сайта (код)

Здравствуйте, круговое меню на сайте выглядит оригинально и превлекательно, представляю Вам подборку кода для его создания:
Скачать исходники для статьи можно ниже

1. “codepen.io/mahmoud-nb/pen/pbNBYP”

2. “codepen.io/lenymo/pen/rwmBGq”

3. “codepen.io/CreativePunch/pen/lAHiu”

4. “codepen.io/r8n5n/pen/doJGZz”

5. “codepen.io/taboo09/pen/GaFjz”

6. “codepen.io/maskedcoder/pen/zqgpr”

7. “codepen.io/marlenesco/pen/XbNByy”

8. “codepen.io/didac/pen/ZKZpmQ”

9. “codepen.io/logrithumn/pen/yMwYXX”

10. “codepen.io/tgrant54/pen/lBHwK”

11. “codepen.io/jet/pen/LwiGu”

12. “codepen.io/Stan59/pen/nmHGx”

13. “codepen.io/hadarweiss/pen/WvEXeK”

14. “codepen.io/thebabydino/pen/Bzuti”

15. “codepen.io/tknomad/pen/JhqdD”

16. “codepen.io/farnabaz/pen/Otley”

17. “codepen.io/abergin/pen/gbYNYe”

18. “codepen.io/__barnett/pen/VvjyrO”

19. codepen.io/lamiajoyee/pen/QEWxRQ

20. “codepen.io/jjmartucci/pen/WryZeR”

21. “codepen.io/chrissimari/pen/qmnkF”

22. “codepen.io/rojus/pen/role”

23. “codepen.io/Harder/pen/boZwjN”

24. “codepen.io/mbrandorff/pen/FBwhv”

25. “codepen.io/simgooder/pen/BNLGXm”

26. “codepen.io/Span4ev/pen/OQpqgO”

На этом всё! Красивых Вам менюшек!

Круглое сворачиваемое меню на CSS3

@import url(‘http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’) all;

.menu-toggler {

display: block;

width: 40px;

height: 40px;

z-index: 2;

opacity: 0;

cursor: pointer;

}

.menu-toggler:hover + label,

.menu-toggler:hover + label:before,

.menu-toggler:hover + label:after {

background: white;

}

.menu-toggler:checked + label {

background: transparent;

}

.menu-toggler:checked + label:before,

.menu-toggler:checked + label:after {

top: 0;

width: 40px;

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

.menu-toggler:checked + label:before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.menu-toggler:checked + label:after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.menu-toggler:checked ~ ul .menu-item {

opacity: 1;

}

.menu-toggler:checked ~ ul .menu-item:nth-child(1) {

-webkit-transform: rotate(0deg) translateX(-110px);

transform: rotate(0deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item:nth-child(2) {

-webkit-transform: rotate(60deg) translateX(-110px);

transform: rotate(60deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item:nth-child(3) {

-webkit-transform: rotate(120deg) translateX(-110px);

transform: rotate(120deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item:nth-child(4) {

-webkit-transform: rotate(180deg) translateX(-110px);

transform: rotate(180deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item:nth-child(5) {

-webkit-transform: rotate(240deg) translateX(-110px);

transform: rotate(240deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item:nth-child(6) {

-webkit-transform: rotate(300deg) translateX(-110px);

transform: rotate(300deg) translateX(-110px);

}

.menu-toggler:checked ~ ul .menu-item a {

pointer-events: auto;

}

.menu-toggler + label {

width: 40px;

height: 5px;

display: block;

z-index: 1;

border-radius: 2.5px;

background: rgba(255, 255, 255, 0.7);

-webkit-transition: top 0.5s, -webkit-transform 0.5s;

transition: top 0.5s, -webkit-transform 0.5s;

transition: transform 0.5s, top 0.5s;

transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;

position: absolute;

display: block;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: 190px 170px;

}

.menu-toggler + label:before,

.menu-toggler + label:after {

width: 40px;

height: 5px;

display: block;

z-index: 1;

border-radius: 2.5px;

background: rgba(255, 255, 255, 0.7);

-webkit-transition: top 0.5s, -webkit-transform 0.5s;

transition: top 0.5s, -webkit-transform 0.5s;

transition: transform 0.5s, top 0.5s;

transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;

content: «»;

position: absolute;

left: 0;

}

.menu-toggler + label:before {

top: 10px;

}

.menu-toggler + label:after {

top: -10px;

}

.menu-item:nth-child(1) a {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.menu-item:nth-child(2) a {

-webkit-transform: rotate(-60deg);

transform: rotate(-60deg);

}

.menu-item:nth-child(3) a {

-webkit-transform: rotate(-120deg);

transform: rotate(-120deg);

}

.menu-item:nth-child(4) a {

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

.menu-item:nth-child(5) a {

-webkit-transform: rotate(-240deg);

transform: rotate(-240deg);

}

.menu-item:nth-child(6) a {

-webkit-transform: rotate(-300deg);

transform: rotate(-300deg);

}

.menu-item {

position: absolute;

display: block;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: 150px;

width: 80px;

height: 80px;

display: block;

opacity: 0;

-webkit-transition: 0.5s;

transition: 0.5s;

}

.menu-item a {

display: block;

width: inherit;

height: inherit;

line-height: 80px;

color: rgba(255, 255, 255, 0.7);

background: rgba(255, 255, 255, 0.2);

border-radius: 50%;

text-align: center;

text-decoration: none;

font-size: 40px;

pointer-events: none;

-webkit-transition: .2s;

transition: .2s;

}

.menu-item a:hover {

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);

color: white;

background: rgba(255, 255, 255, 0.3);

font-size: 44.44444px;

}

Круглое вращающееся меню на JQuery, зеленый стиль!

В этом уроке мы создадим невероятно красивое вращающееся меню на основе JQuery скрипта от Zachary Johnson, который может быть найден здесь.

Мы создадим горизонтальное меню jquery

с маленькими иконками, которые будут вращаться при наведении курсора. Кроме того, каждый пункт меню будет выдвигаться и показывать другие подпункты, вроде ссылок, формы поиска или даже можно вставить картинку, при желании (в общем, что угодно). Ещё советую посмотреть на другое, выдвигающееся меню навигации на JQuery – возможно, оно Вам понравиться больше.

Итак, давайте начнем, и Вы поймете, что на самом деле это не так сложно как кажется.

HTML код

Для этого меню мы не будем создавать маркированный список ul, но сделаем все на основе тегов div. Все меню будет обернуто в div с классом menu.

Каждый пункт меню будет иметь иконку, как элемент ссылки, а также весь контент с классом item_content, включающий в себя заголовок и все подпункты, или форма поиска:

<div>

<a></a>

<div>

<h3>Контакты</h3>

<p>

<a href=»#»>Twitter |</a>

<a href=»#»>Facebook</a>

</p>

</div>

<div>

<a></a>

<div>

<h3>Помощь</h3>

<p>

<a href=»#»>Онлайн помощь |</a>

<a href=»#»>Тикет</a>

</p>

</div>

<div>

<a></a>

<div>

<h3>Поиск</h3>

<p>

<a href=»»>Искать</a>

</p>

</div>

<div>

<a></a>

<div>

<h3>Галерея изображений</h3>

<p>

<a href=»#»>Категории</a>

<a href=»#»>Архив</a>

<a href=»#»>Избранное</a>

</p>

</div>

<div>

<a></a>

<div>

<h3>Начать здесь</h3>

<p>

<a href=»#»>Сервисы |</a>

<a href=»#»>Портфолио |</a>

</p>

</div>

Изначально div с классом item, будет таких же размеров, как и иконка, но при наведении расширится, и мы увидим его содержимое.

CSS стилизация

Общий стили для всего меню:

.menu{

width:800px;

height:52px;

position:relative;

top:200px;

left:100px;

font-family: «Trebuchet MS», sans-serif;

font-size: 16px;

font-style: normal;

font-weight: bold;

text-transform: uppercase;

}

все элементы внутри item будут позиционированы float:right;, так как мы будем расширять пункты меню слева:

.item{

position:relative;

background-color:#f0f0f0;

float:right;

width:52px;

margin:0px 5px;

height:52px;

border:2px solid #ddd;

-moz-border-radius:30px;

-webkit-border-radius:30px;

border-radius:30px;

-moz-box-shadow:1px 1px 3px #555;

-webkit-box-shadow:1px 1px 3px #555;

box-shadow:1px 1px 3px #555;

cursor:pointer;

overflow:hidden;

}

Далее мы определяем стили иконок (зададим класс для каждой ссылки) следующим образом:

.link{

left:2px;

top:2px;

position:absolute;

width:48px;

height:48px;

}

.icon_home{

background:transparent url(../images/home.png) no-repeat top left;

}

.icon_mail{

background:transparent url(../images/mail.png) no-repeat top left;

}

.icon_help{

background:transparent url(../images/help.png) no-repeat top left;

}

.icon_find{

background:transparent url(../images/find.png) no-repeat top left;

}

.icon_photos{

background:transparent url(../images/photos.png) no-repeat top left;

}

Для других элементов, которые могут содержаться внутри, мы пропишем такие стили:

.item_content{

position:absolute;

height:52px;

width:220px;

overflow:hidden;

left:56px;

top:7px;

background:transparent;

display:none;

}

.item_content h3{

color:#aaa;

text-shadow: 1px 1px 1px #fff;

background-color:transparent;

font-size:14px;

}

.item_content a{

background-color:transparent;

float:left;

margin-right:7px;

margin-top:3px;

color:#bbb;

text-shadow: 1px 1px 1px #fff;

text-decoration:none;

font-size:12px;

}

.item_content a:hover{

color:#0b965b;

}

.item_content p {

background-color:transparent;

display:none;

}

.item_content p input{

border:1px solid #ccc;

padding:1px;

width:155px;

float:left;

margin-right:5px;

}

С параметрами text-shadow, мы создали хороший эффект выгравированного текста. Ладно, все это хорошо, но ведь без Javascript это никуда не годится! Идем далее…

Javascript скрипт

Сначала нам нужно подключить скрипты JQuery от Zachary Johnson, а затем добавим следующие функции:

$(‘.item’).hover(

function(){

var $this = $(this);

expand($this);

function(){

var $this = $(this);

collapse($this);

}

);

function expand($elem){

var angle = 0;

var t = setInterval(function () {

if(angle == 1440){

clearInterval(t);

return;

}

angle += 40;

$(‘.link’,$elem).stop().animate({rotate: ‘+=-40deg’}, 0);

},10);

$elem.stop().animate({width:’268px’}, 1000)

.find(‘.item_content’).fadeIn(400,function(){

$(this).find(‘p’).stop(true,true).fadeIn(600);

});

}

function collapse($elem){

var angle = 1440;

var t = setInterval(function () {

if(angle == 0){

clearInterval(t);

return;

}

angle -= 40;

$(‘.link’,$elem).stop().animate({rotate: ‘+=40deg’}, 0);

},10);

$elem.stop().animate({width:’52px’}, 1000)

.find(‘.item_content’).stop(true,true).fadeOut()

.find(‘p’).stop(true,true).fadeOut();

}

Чтобы облегчить задачу, мы создали две функции:

функция расширения expand – будет вращать значок вокруг себя 4 раза (360 х 4 = 1440). Мы также расширим пункт меню с помощью анимации увеличения его ширины. Затем мы показываем его содержимое.
функция закрытия collapse – будет вращать значок назад, в первоначальное положение, уменьшает ширину и скрывает содержимое пункта меню.

И вот все готово! Я надеюсь, что вам понравилось! Жду Ваших комментариев!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

Круглое меню через плагин Flower Navigation на jQuery

Добавить в закладки

Скачать [RAR] [77 КБ]

Данный плагин позволяет создавать стильную навигацию для вашего сайта

Для начала посмотрите ДЕМО

Установка:

1#: После </head> на нужных страницах вставляйте:

2#: Следующий код сразу после предыдущего:

<nav> <ul> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> <li><a href=»#»><img src=»Ссылка на картинку»/></a></li> </ul> <a>Кликни</a> </nav>

<nav>

<ul>

</ul>

<a>Кликни</a>

</nav>

Осталось лишь залить два JS файла из прикреплённого архива в папку js и один CSS файл в папку css

Если вас не устраивает абсолютное позиционирование меню по центру — адаптируйте style.css под свои потребности

Оригинальное круглое меню сайта ZR

  Mail


  Mail 1
  Mail 2
  Mail 3
  Mail 3



  Главная
  Draw


  Draw 1
  Draw 2
  Draw 3



  Talk


  Talk 1
  Talk 2
  Talk 3
  Talk 4



  Фото


  Фото 1
  Фото 2
  Фото 3
  Фото 4
  Фото 5



  Cart


  Cart 1
  Cart 2
  Cart 3
  Cart 4
  Cart 5



  Cash


  Cash 1
  Cash 2
  Cash 3



  Audio


  Audio 1
  Audio 2
  Audio 3

Круглое меню – Коллекция потрясающих меню для сайта | html, css и javascript (jQuery)

Как создать круглое меню для сайта на CSS3

Лучшие круговые меню для сайта (код)

Круглое сворачиваемое меню на CSS3

Круглое вращающееся меню на JQuery, зеленый стиль!

HTML код

CSS стилизация

Javascript скрипт

Круглое меню через плагин Flower Navigation на jQuery

Оригинальное круглое меню сайта ZR

Добавить комментарий Отменить ответ

Рубрики