How to create circular menu | circular menu using html css file
CIRCULAR MENU | CIRCULAR MENU USING HTML CSS
Hello, Welcome to codewithrandom today I am showing how to make circular menu using html and css. It is a responsive desing using css.
Now a day circular menu are using in many of website.It make website good and attractive look.
Now,Here I am showing that how to make circular menu using Html and css.
CODE:-
For creating this program we want to creates file i.e. HTML and CSS both separate file.
HTML CODE:-
Create the file index.html and then copy the given code.
In this we want to add link rel which is stylesheet and href is style.css.
next in body we want to add the link rel and in this we want to add font .
<html>
<link rel="stylesheet" href="style.css">
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
here, we want to add div class menu in this we want to add input type check box with id toggle and label id as given in code.
<div class="menu">
<input type="checkbox" id="toggle" />
<label id="result" for="toggle"> In this step we are adding div class which is btn and i class is material icon and in toggle btn we are adding menu btn and close btn.
In reamaning div class we are adding photo camera,photo,music notes,chat bubble,setting,phone,cloud,videocam.
<div class="btn">
<i class="material-icons md-36 toggleBtn menuBtn">menu</i>
<i class="material-icons md-36 toggleBtn closeBtn">close</i>
</div>
<div class="btn">
<i class="material-icons md-36">photo_camera</i>
</div>
<div class="btn">
<i class="material-icons md-36">photo</i>
</div>
<div class="btn">
<i class="material-icons md-36">music_note</i>
</div>
<div class="btn">
<i class="material-icons md-36">chat_bubble</i>
</div>
<div class="btn">
<i class="material-icons md-36">settings</i>
</div>
<div class="btn">
<i class="material-icons md-36">phone</i>
</div>
<div class="btn">
<i class="material-icons md-36">cloud</i>
</div>
<div class="btn">
<i class="material-icons md-36">videocam</i>
</div>
</label>
</div>
<footer>
<p>
Created by
<a target="_blank" href="">Max</a>
</p>
</footer>
</body>
</html>
Html output:-
Css code:-
For css create the file index.css.
In this code here given how to design menu, icons,box shadow,toogle footer etc are given in the css code.
First step is to add body in body their is input the position is absolute and display is none. In this we want to design menu and btn.
body {overflow: hidden; background: #ff6f61}
input {position: absolute; display: none}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu {
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
.btn {
width: 70px;
height: 70px;
border-radius: 70px;
position: absolute;
overflow: hidden;
cursor: pointer;
} here we are adding material icon and btn child as show in code.
.material-icons.md-36 { font-size: 36px; color: yellowgreen} .btn {
background: #ECEFF1; font-size: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
} .btn:not(:first-child) {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: -2;
-webkit-transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
}
.btn:nth-child(2) {top:0px;-webkit-transition-delay: 0s;transition-delay: 0s}
.btn:nth-child(3) {top:0px;left:0px;-webkit-transition-delay: 0.1s;transition-delay: 0.1s}
.btn:nth-child(4) {left:0px;;-webkit-transition-delay: 0.2s;;transition-delay: 0.2s}
.btn:nth-child(5) {top:0px;left:0px;-webkit-transition-delay: 0.3s;transition-delay: 0.3s}
.btn:nth-child(6) {top:0px;-webkit-transition-delay: 0.4s;transition-delay: 0.4s}
.btn:nth-child(7) {top:0px;left:0px;-webkit-transition-delay: 0.5s;transition-delay: 0.5s}
.btn:nth-child(8) {left:0px;-webkit-transition-delay: 0.6s;transition-delay: 0.6s}
.btn:nth-child(9) {top:0px;left:0px;-webkit-transition-delay: 0.7s;transition-delay: 0.7s}
input#toggle:checked ~ #result .btn:nth-child(2) {
top:-150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(3) {
top:-100px;left:100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(4) {
left:150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(5) {
top :100px;left:100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(6) {
top:150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(7) {
top:100px;left:-100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(8) {
left:-150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
input#toggle:checked ~ #result .btn:nth-child(9) {
top:-100px;left:-100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.menuBtn, .closeBtn {
position: absolute;
transition: all 0.3s ease;
}
.closeBtn {
transform: translateY(50px);
opacity: 0;
}
input#toggle:checked ~ #result .btn .menuBtn {
transform: translateY(-50px);
opacity: 0;
}
input#toggle:checked ~ #result .btn .closeBtn {
transform: translateY(0px);
opacity: 1;
}
footer {
background-color: #555;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer a {
color: #ff6f61;
text-decoration: none;
margin-right:5px;
}
Final output:-
Now you have successfully created a CIRCULAR MENU If you have any doubt or question comment down below.
If you face any difficulty comment down your problem.I hope you may like it.
Written by:-Sayali Kharat
