Bottom Nav #1
Component Structure
BOTN1 COMPONENT (Block): The foundational element of the bottom navigation, fixed at the bottom of the viewport. It is styled with the
botn1__component
class, which may include positioning and layout styles.BOTN1 CONTAINER (Container): Hosts the navigation elements, aligned and spaced with the help of the
botn1__container
class for optimal layout and aesthetics.BOTN1 MENU (Div): A container for the navigation links, arranged in a row or column depending on the viewport. The
botn1__menu
class applies central alignment, spacing, and possibly background styling to this element.BOTN1 MENU ITEM (Div): Each navigation link, wrapped in a
botn1__menu-item
class for padding, border radius, and relative positioning. Inside, you'll find:Menu Link (Text-Basic): Displays the link text with the
botn1__menu-link
class applied for typography color and positioning.Menu Shape (Div): An optional decorative feature within the menu item, styled with the
botn1__menu-shape
class for absolute positioning and background color.
BOTN1 M WRAPPER (Div): A mobile-specific navigation element wrapper, visible under certain conditions, and uses the
botn1__mobile-trigger
class for styling. It encases mobile navigation triggers:BOTN1 M BAR (Div): Forms part of the mobile interaction, changing appearance in response to user actions. Styled with the
botn1__mobile-bar
class for background color, width, and height adjustments.
Animation Structure
Timelines
BOTN1 - MOBILE: Animates the
.botn1__menu
to transition smoothly on mobile devices. It uses scaling and opacity changes to show or hide the menu and individual items, enhancing the mobile user experience.
Events
BOTN1 - MOUSEENTER: Triggers on hovering over a menu item, adding visual cues such as changing the menu shape appearance to indicate the hover state, utilizing classes for hover styling.
BOTN1 - MOUSELEAVE: Reverses the hover state animations, ensuring a seamless transition out of the hover state and maintaining a clean and intuitive navigation experience.
Last updated