Skip to content

Instantly share code, notes, and snippets.

@djzhao627

djzhao627/circular-remote-control-menu.markdown

Created August 25, 2020 09:21
Show Gist options
  • Save djzhao627/ba1c030c87b57705c5ae282a84cf1988 to your computer and use it in GitHub Desktop.
Save djzhao627/ba1c030c87b57705c5ae282a84cf1988 to your computer and use it in GitHub Desktop.
Download ZIP
Circular remote control menu
Raw
circular-remote-control-menu.markdown

Circular remote control menu

Simple remote control menu with options that can be switched on/off with central menu for channels (left - right) and volume (up - down)

A Pen by Ivan Pozderac on CodePen.

License.

Raw
index.html
<div class="crc-wrapper">
<ul class="crc">
<li class="crc-item"><a href="#"><i class="far fa-calendar-alt"></i></a></li>
<li class="crc-item active"><a href="#"><i class="far fa-clock"></i></a></li>
<li class="crc-item"><a href="#"><i class="fas fa-volume-mute"></i></a></li>
<li class="crc-item"><a href="#"><i class="fas fa-tv"></i></a></li>
<li class="crc-item"><a href="#"><i class="fas fa-bars"></i></a></li>
<li class="crc-item"><a href="#"><i class="fab fa-apple"></i></a></li>
<li class="crc-item"><a href="#"><i class="far fa-closed-captioning"></i></a></li>
<li class="crc-item"><a href="#"><i class="fas fa-photo-video"></i></a></li>
</ul>
<div class="crc-directions-wrapper">
<div class="crc-directions">
<div class="crc-directions-up"><i class="fas fa-chevron-up"></i></div>
<div class="crc-directions-left"><i class="fas fa-chevron-left"></i></div>
<div class="crc-directions-right"><i class="fas fa-chevron-right"></i></div>
<div class="crc-directions-down"><i class="fas fa-chevron-down"></i></div>
</div>
</div>
</div>
Raw
script.js
// look ma, no js!
Raw
style.scss
*{
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
height: 100vh;
background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
}
.crc {
&-wrapper {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
border-radius: 50%;
border: 2px solid white;
}
position: relative;
list-style-type: none;
margin: 0;
transform: translate(calc(-50% - 4px),-50%); //2px border offset fix
&-item {
position: absolute;
width: 125px;
height: 125px;
background-color: white;
transform-origin: 100% 100%;
overflow: hidden;
border-bottom: 1px solid #d9d3d5;
top: 50%;
left: 50%;
transition: border 0.3s ease;
i {
transition: all 0.2s ease-in-out;
}
&.active {
background-color: teal;
border-bottom: 2px solid teal;
a {
i {
color: white;
}
&:hover { i {color: white;}}
}
}
&:hover {
border-bottom: 4px solid teal;
a i {color: teal;}
}
&:first-child {
transform: rotate(0deg) skew(45deg);
i {
transform: skew(-45deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(2) {
transform: rotate(45deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-45deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(3) {
transform: rotate(90deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-90deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(4) {
transform: rotate(135deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-135deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(5) {
transform: rotate(180deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-180deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(6) {
transform: rotate(225deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-225deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(7) {
transform: rotate(270deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-270deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
&:nth-child(8) {
transform: rotate(315deg) skew(45deg);
i {
transform: skew(-45deg) rotate(-315deg) scale(1);
margin-top: 60%;
color: black;
margin-left: 20%;
}
}
a {
position: absolute;
width: 100%;
height: 100%;
text-decoration: none;
color: #fff;
text-align: center;
transition: opacity 0.3s, color 0.3s;
&:hover {
color: rgba(255, 255, 255, 0.5);
}
}
}
&-directions {
position: absolute;
display: block;
height: 100px;
width: 100px;
background: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50%;
box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.25);
i {
color: gray;
}
&-wrapper {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
background-color: white;
transform: translate(-50%, -50%);
z-index: 1;
border-radius: 50%;
}
&-up {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
tranistion: all 250ms ease-in-out;
&:hover {
i {
color: teal;
}
}
}
&-down {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
tranistion: all 250ms ease-in-out;
&:hover {
i {
color: teal;
}
}
}
&-left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
cursor: pointer;
tranistion: all 250ms ease-in-out;
&:hover {
i {
color: teal;
}
}
}
&-right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
cursor: pointer;
tranistion: all 250ms ease-in-out;
&:hover {
i {
color: teal;
}
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment