website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

accordion-menu-with-dropdown

Accordion Menu with Dropdown

  • 115
  • 18-Nov-2021
  • Codepen

  • Details

    index.html
    <!DOCTYPE html>
    
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
    
        <link rel="stylesheet" href="css/style.css" />
    
        <title>Accordion Menu</title>
      </head>
    
      <body>
        <div class="container">
          <ul class="accordion-menu">
            <li>
              <div class="dropdownlink">
                <i class="fa fa-heart" aria-hidden="true"></i> Accordion
    
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
    
              <ul class="submenuItems">
                <li><a href="#">Accordion 1</a></li>
    
                <li><a href="#">Accordion 2</a></li>
    
                <li><a href="#">Accordion 3</a></li>
              </ul>
            </li>
    
            <li>
              <div class="dropdownlink">
                <i class="fa fa-heart" aria-hidden="true"></i> Accordion
    
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
    
              <ul class="submenuItems">
                <li><a href="#">Accordion 1</a></li>
    
                <li><a href="#">Accordion 2</a></li>
    
                <li><a href="#">Accordion 3</a></li>
              </ul>
            </li>
    
            <li>
              <div class="dropdownlink">
                <i class="fa fa-heart" aria-hidden="true"></i> Accordion
    
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
    
              <ul class="submenuItems">
                <li><a href="#">Accordion 1</a></li>
    
                <li><a href="#">Accordion 2</a></li>
    
                <li><a href="#">Accordion 3</a></li>
              </ul>
            </li>
    
            <li>
              <div class="dropdownlink">
                <i class="fa fa-heart" aria-hidden="true"></i> Action
    
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
    
              <ul class="submenuItems">
                <li><a href="#">Action 1</a></li>
    
                <li><a href="#">Action 2</a></li>
    
                <li><a href="#">Action 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
    
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
        <script src="js/main.js"></script>
      </body>
    </html>
    

     

    style.css
    * {
         margin: 0;
         padding: 0;
    }
     body {
         font-family: "Montserrat", sans-serif;
         background-color: #f7b42c;
         background-image: linear-gradient(315deg, #f7b42c 0%, #fc575e 74%);
    }
     .lead {
         font-size: 1.5rem;
         font-weight: 300;
    }
     .container {
         margin: 150px auto;
         max-width: 960px;
    }
     ul {
         list-style: none;
    }
     a {
         text-decoration: none;
    }
     h2 {
         text-align: center;
         margin: 20px auto;
         color: #fff;
    }
     .accordion-menu {
         width: 100%;
         max-width: 450px;
         margin: 60px auto 20px;
         background: #fff;
         border-radius: 4px;
    }
     .accordion-menu li.open .dropdownlink {
         color: #f7b42c;
    }
     .accordion-menu li.open .dropdownlink .fa-chevron-down {
         transform: rotate(180deg);
    }
     .accordion-menu li:last-child .dropdownlink {
         border-bottom: 0;
    }
     .dropdownlink {
         cursor: pointer;
         display: block;
         padding: 15px 15px 15px 45px;
         font-size: 18px;
         border-bottom: 1px solid #ccc;
         color: #212121;
         position: relative;
         transition: all 0.4s ease-out;
    }
     .dropdownlink i {
         position: absolute;
         top: 17px;
         left: 16px;
    }
     .dropdownlink .fa-chevron-down {
         right: 12px;
         left: auto;
    }
     .submenuItems {
         display: none;
         background: #ffe5d9;
    }
     .submenuItems li {
         border-bottom: 1px solid #f5c4c6;
    }
     .submenuItems a {
         display: block;
         color: #727272;
         padding: 12px 12px 12px 45px;
         transition: all 0.4s ease-out;
    }
     .submenuItems a:hover {
         background: #ffa47a;
         color: #fff;
    }
    

     

    main.js
    $(function ()
    {
        var Accordion = function (el, multiple)
        {
            this.el = el ||
            {};
            //More Than One Menu Open
            this.multiple = multiple || false;
            var dropdownlink = this.el.find('.dropdownlink');
            dropdownlink.on('click',
            {
                el: this.el,
                multiple: this.multiple
            }, this.dropdown);
        };
        Accordion.prototype.dropdown = function (e)
        {
            var $el = e.data.el,
                $this = $(this),
                $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');
            if (!e.data.multiple)
            {
                //Show Only one Menu at the same time
                $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
            }
        };
        var accordion = new Accordion($('.accordion-menu'), false);
    });

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat