How to create a dropdown menu

BookingTimes does not have dropdown menus by default. This guide will show you how to add dropdown menus using HTML and CSS.

Important Notes

Adding HTML code

You will need to aded a custom menu link. You can do this on the Analytics & Tracking page

Steps

1. Navigate to Setup > Integrations > Analytics and Tracking
2. Click on the Slugs tab
3. Paste the following code into the Custom Menu Links area

<div class="dropdown">    <a class="dropbtn">Menu Name <i class="fas fa-chevron-down" aria-hidden="true"></i></a>    
     <div class="dropdown-content">       
         <a href="/">Menu Link 1</a>       
         <a href="/">Menu Link 2</a>       
         <a href="/">Menu Link 3</a>        
         <a href="/">Menu Link 4</a>    
      </div> </div>

4. Modify the code as needed for the number of links you require
5. Click Save All

Add CSS

Add the following CSS to your header, footer or global CSS file and modify as needed to style the drop down menu.

Steps

1. Navigate to Setup > Website Content > Homepage and Footer
2. Click on the Tob Bar tab
3. Click on the source code button
   
4. Paste the following CSS code and modify as needed

/*----------------------------------------------------------------------------Dropdown Menu CSS------------------------------------------------------------------------------*/

/* Dropdown Button */
.dropbtn {
    color: #222;
    border: none;
    display: block;
    padding: 8px 10px;
    font-weight: 500;
}

.dropbtn:hover {
    color: #B22222 !important;
}

/* The container <div> - needed to position the dropdown content */
#ctl00_divMenuRow .dropdown {
    position: relative;
    display: inline-block;
    width: unset;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #ccc;
}

.dropdown li {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: auto;
    width: 100%;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #B22222;
    color: #fff !important;
}

.dropdown:hover .dropbtn {
    text-decoration: none !important;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}


/* Mobile responsiveness */
@media screen and (max-width:767px) {
    #ctl00_divMenuRow .dropdown {
        display: block;
    }

    .dropdown-content {
        position: relative;
        background-color: unset;
        box-shadow: none;
    }

    .dropdown-content a {
        border-bottom: none;
    }

    .dropdown-content a:hover {
        background-color: unset;
    }

    i.fas.fa-chevron-down {
        float: right;
    }

    .dropdown li {
        width: unset;
    }

    .dropdown-content li {
        margin-left: 10px !important;
    }

    .dropbtn {
        font-weight: 400;
    }
}

5. Click Save All