Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  1. Components
  2. MENUS

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.

PreviousMENUSNextMega Menu #1

Last updated 1 year ago