Toggle Overlay on UL

Developer
Bryan Fillmer
Size
2,509 Kb
Views
8,096
  1. Toggle Overlay on UL Previews
  2. Toggle Overlay on UL HTML Codes
  3. Toggle Overlay on UL CSS Codes
  4. Toggle Overlay on UL JS Codes

How do I make an toggle overlay on ul?

Toggle an overlay to act as an AJAX container over a UL item based on the list item chosen.. What is a toggle overlay on ul? How do you make a toggle overlay on ul? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.

Toggle Overlay on UL Previews
IQ Test

Toggle Overlay on UL - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Overlay on UL</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><p>Test One <a href="#">Toggle</a></p></li> <li><p>Test Two <a href="#">Toggle</a></p></li> <li><p>Test Three <a href="#">Toggle</a></p></li> <li><p>Test Four <a href="#">Toggle</a></p></li> <li><p>Test Five <a href="#">Toggle</a></p></li> <li><p>Test Six <a href="#">Toggle</a></p></li> <li class="ajax-overlay"><div class="ajax-container">AJAX CAUSE YOLO <a href="#" class="close-ajax-overlay">Close It</a></div></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toggle Overlay on UL - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
p { margin: 0; padding: 0; -webkit-transition: margin 0.6s ease-in-out; transition: margin 0.6s ease-in-out;
}
.slide-left { margin-left: -100%;
}
ul { position: relative; margin: 0; padding: 0;
}
li { display: block; width: 100%; padding: 20px; background: #3CB371;
}
li:nth-child(even) { background-color: #00FF7F;
}
.ajax-overlay { overflow: hidden; position: absolute; top: 0; right: 0; width: 0; height: 100%; margin: 0; padding: 0; background-color: #2E8B57; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
}
.full-width { width: 100%;
}

Toggle Overlay on UL - Script Codes JS Codes

var showOverlay = function() { $(this).closest('ul').find('p').addClass('slide-left'); $('.ajax-overlay').addClass('full-width'); return false;
}
var hideOverlay = function() { $(this).closest('ul').find('p').removeClass('slide-left'); $('.ajax-overlay').removeClass('full-width');
}
$('ul a').on('click', showOverlay);
$('ul a').on('dblclick', showOverlay);
$('.close-ajax-overlay').on('click', hideOverlay);
Toggle Overlay on UL - Script Codes
Toggle Overlay on UL - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3
Size 2,509 Kb
Views 8,096
Do you need developer help for Toggle Overlay on UL?

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!

Bryan Fillmer (bfillmer) Script Codes
Name
Attribute Module CSS Grid Mixins
JS Playground
Basic Javascript Chaining
Prototype Angular JS Workout Log
Continued Angular Testbed
Regex Sensei
Angular Animation Playground
Project Euler Problem 17
Attribute Modules for CSS
Five Programming Problems
Create amazing SEO content 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!