CSS Radial menu đơn giản

  Bài viết hay nhất1
HTML:

%input#check{:type => "checkbox"}
%label.main{:for => 'check'}
.title
%i.fa.fa-bars
.container
%a.plate{:href => 'https://codepen.io/Oka/'}
%i.fa.fa-codepen
%a.plate{:href => 'https://github.com/Oka-'}
%i.fa.fa-github
%a.plate{:href => 'http://stackoverflow.com/users/2505965/oka'}
%i.fa.fa-stack-overflow
%a.plate{:href => 'http://oka.io'}
%i.fa.fa-server
%a.plate{:href => '#'}
%i.fa.fa-heartbeat
%a.plate{:href => 'https://codepen.io/Oka/details/BNjwNz/', :target => '_top'}
%i.fa.fa-comments
%a.plate{:href => 'https://codepen.io/Oka/full/BNjwNz/', :target => '_top'}
%i.fa.fa-terminal
%a.plate{:href => 'https://twitter.com/Okahyphen', :target => '_blank'}
%i.fa.fa-twitter




CSS:

@import "bourbon";

@function c($mn, $mx) {
@return max($mn, random($mx));
}

@function rngrbga($min: 0, $max: 255, $alpha: 1) {
@return #{rgba(c($min, $max), c($min, $max), c($min, $max), random($alpha * 10) / 10)};
}

$main-c: #B81365;
$main-size: 100px;
$plate-size: 50px;

$side: -180%;
$edge: -130%;

html,
body {
width: 100%;
height: 100%;
}

body {
position: relative;
background-color: #ddd;
overflow: hidden;
}

#check {
display: none;
}

.main,
.container {
margin: auto;
@include position(absolute, 0 0 0 0);
width: $main-size;
height: $main-size;
border-radius: 50%;
}

.main {
background-color: $main-c;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
cursor: pointer;
z-index: 50;

&:hover {
background-color: lighten($main-c, 5%);
}
&:active {
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35), inset 1px 2px 2px rgba(0, 0, 0, 0.35);
background-color: darken($main-c, 5%);
}

.title {
margin: auto;
@include position(absolute, 0 0 0 0);
width: 100%;
height: 80px;

font: {
size: 3em;
}
line-height: 80px;
text-align: center;

color: #fafafa;
}
}

.container {
z-index: 10;
}

.plate {
margin: auto;
@include position(absolute, 0 0 0 0);
width: $plate-size;
height: $plate-size;
opacity: 0;
border-radius: 50%;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);

@include transition(all 0.4s ease-in);

i {
width: 100%;
font: {
size: 2em;
}
line-height: $plate-size + 3px;
text-align: center;
color: #333;
}

&:hover {
i {
color: #111;
}
}
}

$base: 0;

@for $i from 1 through 8 {
.plate:nth-of-type(#{$i}) {
background-color: rngrbga(80);
@include transition-delay(#{$base + s});
}
$base: $base + 0.1;
}

#check:checked ~ .main + .container {
.plate {
opacity: 1;
}
.plate:nth-of-type(1) {
top: $side;
}

.plate:nth-of-type(2) {
top: $edge;
right: $edge;
}

.plate:nth-of-type(3) {
right: $side;
}

.plate:nth-of-type(4) {
right: $edge;
bottom: $edge;
}
.plate:nth-of-type(5) {
bottom: $side;
}
.plate:nth-of-type(6) {
bottom: $edge;
left: $edge;
}
.plate:nth-of-type(7) {
left: $side;
}
.plate:nth-of-type(Cool {
top: $edge;
left: $edge;
}
}






JS:

// JS Random state function, no effect on actual implementation

;(function (window, document) {
var check, RNG;
check = document.getElementById('check');
RNG = Math.round(Math.random());
check.checked = !!RNG;
}(window, document));
Bạn không có quyền trả lời bài viết