A Pen by JuliaRietveld on CodePen.
Created
May 6, 2019 13:45
-
-
Save xyeig/880dfbb0ca3566d2c1205b370645298c to your computer and use it in GitHub Desktop.
Accordion menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h2>Favorite books</h2> | |
| <ul class="accordion-menu"> | |
| <li> | |
| <div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> History | |
| <i class="fa fa-chevron-down" aria-hidden="true"></i> | |
| </div> | |
| <ul class="submenuItems"> | |
| <li><a href="#">History book 1</a></li> | |
| <li><a href="#">History book 2</a></li> | |
| <li><a href="#">History book 3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i> Fiction | |
| <i class="fa fa-chevron-down" aria-hidden="true"></i> | |
| </div> | |
| <ul class="submenuItems"> | |
| <li><a href="#">Fiction book 1</a></li> | |
| <li><a href="#">Fiction book 2</a></li> | |
| <li><a href="#">Fiction book 3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i> Fantasy | |
| <i class="fa fa-chevron-down" aria-hidden="true"></i> | |
| </div> | |
| <ul class="submenuItems"> | |
| <li><a href="#">Fantasy book 1</a></li> | |
| <li><a href="#">Fantasy book 2</a></li> | |
| <li><a href="#">Fantasy book 3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <div class="dropdownlink"><i class="fa fa-motorcycle" aria-hidden="true"></i> Action | |
| <i class="fa fa-chevron-down" aria-hidden="true"></i> | |
| </div> | |
| <ul class="submenuItems"> | |
| <li><a href="#">Action book 1</a></li> | |
| <li><a href="#">Action book 2</a></li> | |
| <li><a href="#">Action book 3</a></li> | |
| </ul> | |
| </li> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var Accordion = function(el, multiple) { | |
| this.el = el || {}; | |
| // more then one submenu 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), | |
| //this is the ul.submenuItems | |
| $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); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: #388E3C; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| h2 { | |
| text-align: center; | |
| margin: 20px auto; | |
| color: #fff; | |
| } | |
| .accordion-menu { | |
| width: 100%; | |
| max-width: 350px; | |
| margin: 60px auto 20px; | |
| background: #fff; | |
| border-radius: 4px; | |
| } | |
| .accordion-menu li.open .dropdownlink { | |
| color: #CDDC39; | |
| .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; | |
| i { | |
| position: absolute; | |
| top: 17px; | |
| left: 16px; | |
| } | |
| .fa-chevron-down { | |
| right: 12px; | |
| left: auto; | |
| } | |
| } | |
| .submenuItems { | |
| display: none; | |
| background: #C8E6C9; | |
| li { | |
| border-bottom: 1px solid #B6B6B6; | |
| } | |
| } | |
| .submenuItems a { | |
| display: block; | |
| color: #727272; | |
| padding: 12px 12px 12px 45px; | |
| transition: all 0.4s ease-out; | |
| &:hover { | |
| background-color: #CDDC39; | |
| color: #fff; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat'" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment