Circular Menu items


Preview :


Pure CSS Circle Menu Source Code
Before sharing source code, Let’s talk a little bit about the program. As you know this is a Pure HTML CSS Circle or Circular Menu with icons and responsivedesign. To create this program I used only an external library for icons, that’s I told about before.  I mostly used CSS transition and transform property to creating this. I also use duplicate animation property with -WebKit- extension. Because most browsers can run this program properly.
I also used CSS @media property to create this program responsively.
For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.

Home  Web Design  CSS  CSS Circle Menu With Icons | Pure HTML CSS Circular Menu
Web Design
CSS
HTML
Web Development
CSS Circle Menu With Icons | Pure HTML CSS Circular Menu
How we can create a circle shape menu with HTML & CSS? Solution: CSS Circle Menu With Icons, Pure HTML CSS Circular Menu.
Maybe you have seen a circular menu before, Nowadays some websites use this type of menu. Peoples who want to make their website good looking and attractive they always use different kinds of elements. This is also a part of good UI & UX design.
Now question is that how we can also create a circular menu?  After seeing this post, you will be able to create this. Because I am providing a solution to your need. So, Today I am sharing CSS Circle Menu With Icons, a pure HTML CSS Circular menu. This also has a responsive design using CSS, you can call this Pure CSS Responsive Circular Menu.
This menu has something like the material designbecause I used good shadow combination. & I had put two times on every CSS animation property because all browsers can support this program. Last time my one visitor says, it’s not working on Edge browser, That’s why I am doing that this time. I used the font-awesome (get) library for creating icons.
If you are thinking now, how the program actually is which I am talking about, then see this preview given below.
Preview Of Circular Menu With Material Design
See this video preview to getting an idea of how this program looks like.
Now you can see this program visually. If you like this, then get the source code of its.
You May Also Like:
CSS Custom Checkbox
Animated Contact Form With HTML CSS
Reveal Text In Pure CSS
HTML CSS Autoplay Slider
Pure CSS Circle Menu Source Code
Before sharing source code, Let’s talk a little bit about the program. As you know this is a Pure HTML CSS Circle or Circular Menu with icons and responsivedesign. To create this program I used only an external library for icons, that’s I told about before.  I mostly used CSS transition and transform property to creating this. I also use duplicate animation property with -WebKit- extension. Because most browsers can run this program properly.
I also used CSS @media property to create this program responsively.
For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>CSS Circle Menu </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <nav class="menu">
   <input type="checkbox" href="#" class="expandmenu" name="expandmenu" id="expandmenu" />
   <label class="expandmenu-button" for="expandmenu">
    <span class="lines first-line"></span>
    <span class="lines sec-line"></span>
    <span class="lines third-line"></span>
  </label>

   <a href="#" class="menu-item col1"> <i class="fas fa-home"></i> </a>
   <a href="#" class="menu-item col2"> <i class="fas fa-palette"></i> </a>
   <a href="#" class="menu-item col3"> <i class="fas fa-bell"></i> </a>
   <a href="#" class="menu-item col4"> <i class="fas fa-cart-arrow-down"></i> </a>
   <a href="#" class="menu-item col5"> <i class="fa fa-phone"></i> </a>
   <a href="#"  class="menu-item col6"> <i class="fas fa-info"></i> </a>
</nav>
</body>
</html>

In css write the following code

body {
   padding: 0;
   margin: 0;
   background: #333;
   color: #EEEEEE;
   text-align: center;
   font-family: "Lato", sans-serif;
}

a {
   color: inherit;
}
.expandmenu {
   display: none;
}

.menu-item,
.expandmenu-button {
   background: #EEEEEE;
   border-radius: 100%;
   width: 80px;
   height: 80px;
   margin-left: -40px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 80px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

.first-line {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.sec-line {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.third-line {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.expandmenu:checked + .expandmenu-button .first-line {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.expandmenu:checked + .expandmenu-button .sec-line {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.expandmenu:checked + .expandmenu-button .third-line {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 80px;
   height: 80px;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
}


.menu-item:hover {
   background: #EEEEEE;
   color: #3290B1;
}

.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.expandmenu-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.expandmenu-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.expandmenu:checked + .expandmenu-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.expandmenu:checked ~ .menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.expandmenu:checked ~ .menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
   transform: translate3d(0.08361px, -104.99997px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
   transform: translate3d(90.9466px, -52.47586px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
   transform: translate3d(90.9466px, 52.47586px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
   transform: translate3d(0.08361px, 104.99997px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
   transform: translate3d(-90.86291px, 52.62064px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
   transform: translate3d(-91.03006px, -52.33095px, 0);
}

.expandmenu:checked ~ .menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
   transform: translate3d(-0.25084px, -104.9997px, 0);
}

.col1 {
   background-color: #24BCFC;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col1:hover {
   color: #24BCFC;
   text-shadow: none;
}

.col2 {
   background-color: #FF3A3D;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col2:hover {
   color: #FF3A3D;
   text-shadow: none;
}

.col3 {
   background-color: #FFC431;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col3:hover {
   color: #FFC431;
   text-shadow: none;
}

.col4 {
   background-color: #FF670C;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col4:hover {
   color: #FF670C;
   text-shadow: none;
}

.col5 {
   background-color: #35FFD6;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col5:hover {
   color: #35FFD6;
   text-shadow: none;
}

.col6 {
   background-color: #0340D0;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.col6:hover {
   color: #0340D0;
   text-shadow: none;
}

@media screen and (max-width: 700px) {
   body {
      padding: 170px 0 0 0;
      width: 100%;
   }
}
That’s It. Now you have successfully created a CSS Circle Menu With Icons, or Pure HTML CSS Circular Menu With Responsive design. If you have any doubt or question comment down below.

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Introducing Cloudflare Pages ⚡

Image
https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user. You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note: This pages are only for front end developers, it didn't have a database and did not support php.
Read more