Responsive overlay menu - button close only example
How do I make an responsive overlay menu - button close only example?
This is example #3 from responsive overlay menu framework. Closing menu only with button. This is a framework for creating responsive cross-browser overlay menus. Made with css3, jquery and ionicons. Fork and star on github https://github.com/marioloncarek/responsive-overlay-menu. What is a responsive overlay menu - button close only example? How do you make a responsive overlay menu - button close only example? This script and codes were developed by Mario Loncarek on 03 July 2022, Sunday.
Responsive overlay menu - button close only example Previews
Responsive overlay menu - button close only example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive overlay menu - button close only example</title> <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h4>Example #3 - Closing menu only with button</h4>
<div class="menu-btn"> <a class="btn-open" href="javascript:void(0)"></a>
</div>
<div class="overlay"> <div class="menu"> <ul> <li><a href="#">About</a> <ul> <li><a href="#">About Company</a></li> <li><a href="#">Designers</a></li> <li><a href="#">Developers</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Apps</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Seo</a></li> </ul> </li> <li><a href="#">Work</a> <ul> <li><a href="#">Web</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Apps</a></li> <li><a href="#">Seo</a></li> </ul> </li> <li><a href="#">Social</a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Codepen</a></li> <li><a href="#">Behance</a></li> <li><a href="#">Dribbble</a></li> </ul> </li> </ul> </div>
</div>
<!-- Github button -->
<a href="https://github.com/marioloncarek/responsive-overlay-menu" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
<a href="http://codepen.io/collection/ANqMpL/" target="_blank"><div class="allexamples">View all examples</div></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive overlay menu - button close only example - Script Codes CSS Codes
/*
- Name: Responsive overlay menu framework
- Version: 1.0
- Latest update: 15.9.2015.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/
body,
html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Raleway', sans-serif;
}
h3 { color: #e9e9e9; text-align: center; margin: 0; padding: 10px 0 0;
}
h4 { color: #333; text-align: center; margin: 0; padding: 10px 0 0;
}
a { text-decoration: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
}
/* OPEN / CLOSE BTNS */
.menu-btn { position: absolute; top: 6px; right: 20px; z-index: 999; display: inline; font-size: 32px;
}
.menu-btn a { display: inline-block; text-decoration: none; /* safari hack */
}
.btn-open:after { color: #333; content: "\f394"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s;
}
.btn-open:hover:after { color: #34B484;
}
.btn-close:after { color: #fff; content: "\f2d7"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s;
}
.btn-close:hover:after { color: #34B484;
}
/* OPEN / CLOSE BTNS */
.menu-btn { position: absolute; top: 6px; right: 20px; z-index: 999; display: inline; font-size: 32px;
}
.menu-btn a { display: inline-block; text-decoration: none; /* safari hack */
}
.btn-open:after { color: #333; content: "\f394"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s;
}
.btn-open:hover:after { color: #34B484;
}
.btn-close:after { color: #fff; content: "\f2d7"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s;
}
.btn-close:hover:after { color: #34B484;
}
/* OVERLAY */
.overlay { position: fixed; top: 0; z-index: 99; display: none; overflow: auto; width: 100%; height: 100%; background: #333;
}
.overlay .menu { margin: 10% auto; width: 80%;
}
.overlay .menu ul { margin: 0; padding: 0; width: 100%;
}
.overlay .menu ul li { float: left; padding: 20px 0; width: 25%; list-style: none; text-align: center; text-transform: uppercase;
}
.overlay .menu ul li a { color: #34B484; font-weight: bold; font-size: 20px;
}
.overlay .menu ul ul { margin-top: 50px;
}
.overlay .menu ul ul li { position: relative; float: none; margin: 0; width: 100%; border: 0;
}
.overlay .menu ul ul li a { color: #fff; text-transform: capitalize; font-weight: bold; font-size: 14px;
}
.overlay .menu ul ul li a:hover { color: #34b484;
}
/* RESPONSIVE */
@media screen and (max-width: 768px) { .overlay .menu ul li { float: none; margin-bottom: 50px; width: 100%; border-bottom: 1px solid #575757; } .overlay .menu ul li:last-child { border: 0; } .overlay .menu ul ul { margin-top: 20px; } .menu-btn { right: 25px; }
}
.allexamples{ position:absolute; bottom:0; font-size:18px; font-weight:bold; width:100%; text-align:center; background:#e9e9e9; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#333; position:fixed;
} Responsive overlay menu - button close only example - Script Codes JS Codes
$(document).ready(function () { $(".menu-btn a").click(function () { $(".overlay").fadeToggle(200); $(this).toggleClass('btn-open').toggleClass('btn-close'); }); $('.menu a').on('click', function () { $(".overlay").fadeToggle(200); $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close'); });
});
| Developer | Mario Loncarek |
| Username | riogrande |
| Uploaded | July 03, 2022 |
| Rating | 3 |
| Size | 3,475 Kb |
| Views | 54,648 |
Do you need developer help for Responsive overlay menu - button close only example?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mario Loncarek (riogrande) Script Codes
| Name | Size |
| Responsive overlay menu - grid example | 3,289 Kb |
| Buttons with icons made easy - with font awesome | 2,097 Kb |
| Responsive overlay menu - full menu with second menu example | 3,613 Kb |
| Responsive navigation mobile menu toggle | 2,148 Kb |
| Responsive overlay menu - rows menu example | 3,182 Kb |
| IOs 7 phone screen | 2,567 Kb |
| Responsive overlay menu - anchor links example | 3,289 Kb |
| Responsive carousel with hover effects - owl carousel | 4,334 Kb |
| Sticky nav - demo from designmodo | 2,862 Kb |
| Responsive full width carousel with owl-carousel | 4,226 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Resize image | Happyhj | 1,892 Kb |
| CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
| Airbnb Homepage | SindhujaD | 2,480 Kb |
| Price table | Serluk | 5,928 Kb |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| Background-blend-mode Test | 0x04 | 4,744 Kb |
| A Pen by Shidhin | Shidhincr | 5,015 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!