fb24m-pro-plus v1.1.0
FB24M Pro Plus Modules - The best solution to common problems
I will be happy to see and implement your suggestions in the package if you suggest them in the issues section on github. There you can also write about all the errors that you notice. Project repository
Changes in version 1.0.5
- Added documentation for each module
- The burger menu has been renamed to a hidden block and has new functionality
FB24M Pro Plus Modules will help you solve the most common front-end tasks such as burger menus, tabs, popups, and so on. The package comes with basic styles that are included with Javascript modules and are available in css, min css and scss.
hiddenBlock.js (early burger-menu)
The hidden block opens at the touch of a button and is most often used to create a menu on the phone. To import write in the main file
import "fb24m-pro-plus/hidden-block.js";<div data-open-block="hello-world"></div>
<!-- on click -->
<html class="_hello-world-opened">
. . .After that create an icon with data-open-block. Clicking on it will toggle the class with the attribute value on the html tag.
dropDownMenu.js
This module will allow you to make a dropdown menu responsive to touchscreens. Module import:
import "fb24m-pro-plus/drop-down-menu.js";To create such a menu item, use the following structure in html:
<!-- only required classes are used here, styles should be added through your own -->
<div href="#" data-drop-down-menu>
<div class="menu__link">Lorem</div>
<div class="menu-drop-down">
<a href="#">Lorem, ipsum </a>
<a href="#">dolor sitamet </a>
<a href="#">adipisicing dolor</a>
<a href="#">elit. Eius, </a>
<a href="#">impedit.</a>
</div>
</div>Now when you hover over a link on a PC or when you click on the arrow on a device with a touchscreen, the _drop-dawn class will be added to the data-drop-down-menu , which you can refer to in css to add animation. The arrow can be removed with the following code:
.dropdown-open { display: none }
.dropdown-open::before { display: none }
.dropdown-open::after { display: none }You can also add styles to these three elements by drawing or inserting your own arrow
Popup.js
The popup consists of two elements - the popup itself data-popup and its button data-popup-toggle. When the button is clicked, the popup receives the _popup-opened class, in standard styles a closed popup is assigned display:none, so to create an animation, you need to set it to display:block. Inside the popup itself, you can place any content, blocks, and so on.
Popup example:
import "fb24m-pro-plus/popup.js";<button data-popup-toggle="popup">open popup</button>
<div data-popup="popup">
<button data-popup-toggle="popup">close popup</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ad placeat, unde corrupti fugit obcaecati nam quibusdam maiores beatae dolorum a suscipit autem minima quis rerum corporis sed ea dolores.
</div>Spoilers.js
A spoiler is a block in which you can put a lot of text that you initially want to hide, when you click on its title, it will hide. The module searches for all data-spoiler blocks on the page, and inside them is a title with the spoiler-title class and a body with the spoiler-content class. As always, you can put anything into the body.
import "fb24m-pro-plus/spoilers.js";<div class="spoilers__spoiler spoilers-spoiler" data-spoiler>
<div class="spoilers-spoiler__title spoiler-title">title</div>
<div class="spoilers-spoiler__content spoiler-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam magni repudiandae praesentium minima voluptatibus temporibus porro provident, fugit omnis! Earum molestiae laudantium magnam odio sed necessitatibus, et exercitationem praesentium nulla.</div>
</div>Tabs.js
Tabs are a place where you can put a lot of content with a short title and they will show up like browser tabs.
Tabs example:
import "fb24m-pro-plus/tabs.js";<div class="tabs">
<div class="tabs-tab-list">
<div class="tabs-tab _tab-opened">Tab 1</div>
<div class="tabs-tab">Tab 2</div>
</div>
<div class="tabs-contents">
<div class="tabs-content _tab-opened">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam ex harum pariatur maxime non earum error, fugiat illum deserunt a at et velit accusamus tenetur corrupti, hic, distinctio quisquam?</div>
<div class="tabs-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, omnis fuga voluptas fugit consectetur similique exercitationem non culpa corrupti labore, itaque optio ab blanditiis odio! Quae impedit illum dolorum doloribus.</div>
</div>
</div>Tooltip.js
A tooltip will help you put a long title or button caption into a small space or even an icon. On hover, it will be displayed, unlike standard browser tips, it can be styled as you like, and if there is too much text, a scroll will appear
import "fb24m-pro-plus/tooltip.js";<div data-tooltip="Lorem ipsum dolor sit amet consectetur, adipisicing elit.">hover me</div>