How we can create a corner menu using JS or any JS library? Solution: See this jQuery Corner Expand Menu With CSS, Expanding Nav For Corner.
Previously I have shared a Circular Menu, but this is a corner menu with 1/4 circle shape expand. Basically, this type of corner menu used by a few websites, which are design related or with modern design. This design is very creative and an attractive UI, because it expands with a circle line that’s why it looks pretty.
Today you will learn to create Expanding Nav For Corner Side. Basically, there is a menu button in the top-left corner side on the webpage. When you will click on that then 4 items will reveal with a circle line shape. Each menu item and the main menu button contain an icon, like the main button contains a home icon. And the menu items are basically a link so users navigate import URLs easily.
So, Today I am sharing jQuery Corner Expand Menu With CSS. There I have used jQuery for creating the functions, for less code save time. As we know jQuery is a JS library that’s why I am putting this in the JavaScript category. Also, the icons are based on a third-party icon library. This is a good example of how we can use jQuery to save time, also you can use it on your website.
If you are thinking now how this expands the corner menu actually is, then see the preview given below.
Preview Of Expanding Nav For Corner
See this video preview to getting an idea of how this menu looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Option Tag Select Menu
- Full Page Navigation
- Sticky Navbar With Sliding Underline
- Horizontal Scroll Menu
jQuery Corner Expand Menu With CSS Source Code
Before sharing source code, let’s talk about it. First I have created a main div named ‘container’ and put 5 hyperlinks inside it for creating the menu items. Inside each hyperlink tag, I have placed a class name and placed an icon tag. For the main menu button, I have used a home icon and for the other four, I have placed various icons.
For placing icons I have used the font-awesome library and linked it in the HTML file. Now using CSS I have placed all the elements in the right place, as you can see in the preview. In CSS file, I gave height, width, color, etc to all the elements, also gave 50% border-radius for creating the circle shape. Also, I have used a transition for the animation effect when items reveal.
jQuery handling here show/hide menu items feature in the program. Basically, there used if{} else{} statements for show/hide. When its active them it transforms otherwise transform is none. Left all other things you will understand after getting the codes, I can’t explain all things in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery Corner Menu | Webdevtrick.com</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <a href="#" class="first"><i class="fa fa-briefcase fa-2x"></i></a> <a href="#" class="second"><i class="fa fa-server fa-2x"></i></a> <a href="#" class="third"><i class="fa fa-code fa-2x"></i></a> <a href="#" class="fourth"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="#" class="bigOne"><i class="fa fa-home fa-3x"></i></a> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background: #f3f3f3; } .container { top:15px; left:15px; position:fixed; display:block; width:100px; height:100px; background-color:transparent; border-radius:50%; z-index:20; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } .first { width:60%; height:60%; background-color:#ff3131; border-radius:50%; position:absolute; color:white; text-align:center; line-height:75px; top:25%; left:25%; z-index:19; transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); position:absolute; } .second { width:60%; height:60%; background-color:#ff3131; border-radius:50%; position:absolute; color:white; text-align:center; line-height:75px; top:25%; left:25%; z-index:19; transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s; } .third { width:60%; height:60%; background-color:#ff3131; border-radius:50%; position:absolute; color:white; text-align:center; line-height:70px; top:25%; left:25%; transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s; } .fourth { width:60%; height:60%; background-color:#ff3131; border-radius:50%; position:absolute; color:white; text-align:center; line-height:70px; top:25%; left:25%; transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s; } .bigOne { top:15px; left:15px; width:100px; height:100px; background:#212121; border-radius:50%; position:absolute; z-index:21; color:white; text-align:center; line-height:120px; cursor:pointer; position:fixed; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function() { var active1 = false; var active2 = false; var active3 = false; var active4 = false; $('.container').on('mousedown touchstart', function() { if (!active1) $(this).find('.first').css({'background-color': '#ff3131', 'transform': 'translate(0px,125px)'}); else $(this).find('.first').css({'background-color': 'gray', 'transform': 'none'}); if (!active2) $(this).find('.second').css({'background-color': '#ff3131', 'transform': 'translate(60px,105px)'}); else $(this).find('.second').css({'background-color': 'gray', 'transform': 'none'}); if (!active3) $(this).find('.third').css({'background-color': '#ff3131', 'transform': 'translate(105px,60px)'}); else $(this).find('.third').css({'background-color': 'gray', 'transform': 'none'}); if (!active4) $(this).find('.fourth').css({'background-color': '#ff3131', 'transform': 'translate(125px,0px)'}); else $(this).find('.fourth').css({'background-color': 'gray', 'transform': 'none'}); active1 = !active1; active2 = !active2; active3 = !active3; active4 = !active4; }); }); |
That’s It. Now you have successfully created jQuery Corner Expand Menu With CSS, Expanding Nav For Corner. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks for the tips. It is lovely