F6 Overlay Menu

Developer
Jennifer Tso
Size
2,699 Kb
Views
20,240
  1. F6 Overlay Menu Previews
  2. F6 Overlay Menu HTML Codes
  3. F6 Overlay Menu CSS Codes
  4. F6 Overlay Menu JS Codes

How do I make an f6 overlay menu?

What is a f6 overlay menu? How do you make a f6 overlay menu? This script and codes were developed by Jennifer Tso on 11 September 2022, Sunday.

F6 Overlay Menu Previews
IQ Test

F6 Overlay Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>F6 Overlay Menu</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="simple-panel" id="my-panel" data-toggler=".is-active"> <ul class="vertical menu" data-drilldown> <li><a href="#">Home</a></li> <li><a href="#">Join Now</a></li> <li><a href="#">Calendar</a></li> <li> <a href="#">Property Listings</a> <ul class="vertical menu"> <li><a href="">Single Family</a></li> <li><a href="">Multi Family</a></li> </ul> </li> </ul> <br> <button class="button expanded" data-toggle="my-panel">Close</button>
</div>
<div class="simple-panel right" id="my-panel-right" data-toggler=".is-active"> <h4 class='text-center'>Hello, I'm a panel</h4> <p>I'm just a css entity, but I'm controlled with the Toggler JS plugin.</p> <br> <button class="button expanded" data-toggle="my-panel-right">Close</button>
</div>
<div class="simple-panel top" id="my-panel-top" data-toggler=".is-active"> <h4 class='text-center'>Hello, I'm a panel</h4> <p>I'm just a css entity, but I'm controlled with the Toggler JS plugin.</p> <br> <button class="button expanded" data-toggle="my-panel-top">Close</button>
</div>
<div class="simple-panel bottom" id="my-panel-bottom" data-toggler=".is-active"> <h4 class='text-center'>Hello, I'm a panel</h4> <p>I'm just a css entity, but I'm controlled with the Toggler JS plugin.</p> <br> <button class="button expanded" data-toggle="my-panel-bottom">Close</button>
</div>
<div class="row column"> <h2>This is my main content</h2> <button class="button" data-toggle="my-panel">Open Left</button> <button class="button" data-toggle="my-panel-right">Open Right</button> <button class="button" data-toggle="my-panel-top">Open Top</button> <button class="button" data-toggle="my-panel-bottom">Open Bottom</button>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

F6 Overlay Menu - Script Codes CSS Codes

.simple-panel { position: fixed; height: 100%; width: 400px; background: #EAEAEA; padding: 1em; z-index: 9999; overflow-y: auto; transform: translateX(-100%); transition: transform ease 0.5s; box-shadow: none; } .simple-panel.right { right: 0; transform: translateX(100%); } .simple-panel.top { width: 100%; height: 300px; transform: translateY(-100%); } .simple-panel.bottom { width: 100%; height: 300px; bottom: 0; transform: translateY(100%); } .simple-panel.is-active { box-shadow: 0.01em 0 0.5em #737373; transform: translate(0, 0); } .simple-panel::-webkit-scrollbar { display: none; }
$panel-width: 400px !default;
$panel-height: 300px !default;
$panel-background: #EAEAEA !default;
$panel-transition-easing: ease !default;
$panel-transition-timing: .25s !default;
$panel-content-padding: 1em !default;
$panel-z-index: 9999 !default;
$panel-shadow-color: #737373 !default;
$panel-shadow: .01em 0 .5em $panel-shadow-color !default;
$panel-translate: translateX(-100%);
$panel-side: "left" !default;
@mixin simple-panel { position: fixed; height: 100%; width: $panel-width; background: $panel-background; padding: $panel-content-padding; z-index: $panel-z-index; overflow-y: auto; transform: $panel-translate; transition: transform $panel-transition-easing $panel-transition-timing; box-shadow: none; &.right { right: 0; transform: translateX(100%); } &.top { width: 100%; height: $panel-height; transform: translateY(-100%); } &.bottom { width: 100%; height: $panel-height; bottom: 0; transform: translateY(100%); } &.is-active { box-shadow: $panel-shadow; transform: translate(0, 0); } &::-webkit-scrollbar { display: none; }
}
.simple-panel { @include simple-panel;
}
/* Small only */
@media screen and (max-width: 39.9375em) { .simple-panel { width: 100%; }
}

F6 Overlay Menu - Script Codes JS Codes

(function($) { var $body = $('body'); $(document).foundation(); $body.on('click.bb.panel', function(e) { var activePanel = $('.simple-panel.is-active'); if (activePanel.length && !($.contains(activePanel[0], e.target) || activePanel.is(e.target)) && (e.target.getAttribute('data-toggle') !== activePanel[0].id)) { activePanel.foundation('toggle'); } });
})(jQuery);
F6 Overlay Menu - Script Codes
F6 Overlay Menu - Script Codes
Home Page Home
Developer Jennifer Tso
Username jen188
Uploaded September 11, 2022
Rating 3
Size 2,699 Kb
Views 20,240
Do you need developer help for F6 Overlay Menu?

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!

Jennifer Tso (jen188) Script Codes
Name
Print Worksheet Alignment Issue
Foundation 6 Mega Menu
Simple Phone Number Picker
Owl Carousel 2 URL Hash Nav Issue
PhotoSwipe Plugin Test
REP F6 Small Overriding Large Breakpoint
Foundation 6 Tabs and Equalizer Issues
A Pen by Jennifer Tso
Parallax Fixed Counter
Stacked FontAwesome Icons Test
Create amazing marketing copy 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!