Foundation CSS Kitchen Sink Off-canvas
Foundation CSS Kitchen Sink provides Foundation’s elements that can be used in our websites and apps. Kitchen Sink Off-canvas panels slide while active and are placed outside of the viewport. This off-canvas menu may overlap, push, and use sticky items. It can be accessible from the left, right, top, or bottom of the screen. These patterns are mobile-friendly and were made with mobile devices in mind. On medium and desktop screens, this can furthermore be utilized as a sidebar.
Foundation CSS Kitchen Sink Off-canvas Classes:
- off-canvas-wrapper: This class is used to wrap up the whole off-canvas container and this wraps multiple off-canvas panels together.
- off-canvas: This class is to create the off-canvas container.
- position-left: This class is used to indicate that the off-canvas should pop from the left.
- position-right: This class is used to indicate that the off-canvas should pop from the right.
- off-canvas-content: This class encloses the content which is adjacent to the off-canvas.
Foundation CSS Kitchen Sink Off-canvas Attributes:
- data-off-canvas-wrapper: This attribute is added to the wrapper that is wrapping the whole content inside off-canvas.
- data-off-canvas: This attribute is added to the off-canvas element.
- data-off-canvas-content: This attribute is added to the container having all the content.
<body> <div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas> <!-- left off-canvas markup --> </div> ... <div class="off-canvas-content" data-off-canvas-content> <!-- page content --> </div> </div> </body> <button type="button" class="button" data-toggle="offCanvasLeft/offCanvasRight"> Open Menu </button>
We can use Foundation CSS Sticky classes and attributes simultaneously with this attribute. Although when we use the .data-sticky attribute the element is by default fixed with the scrolling and the opening of the off-canvas. But using the data-off-canvas-sticky attribute will on;y keep it fixed when the off-canvas is opened.
Example 1: This code example below demonstrates how to have a basic Kitchen Sink Off-canvas using above given classes and attributes:
Example 2: The code below demonstrates how we can make a top bar stay in its position when the off-canvas is opened using the Foundation CSS Sticky attributes:
Please Login to comment...