I have a bootstrap menu that is working fine, you can see the code below, but I want to display the dropdown submenu when I clicked each item in the menu.
For example, if I click on the about us item it doesn't display anything, but when I click the plus sign on that item it displays the submenu.
Any suggest to figure out this functionality?
Thanks.
$(document).ready(function(){ if ($(window).width() < 980) { // mobile menu $('.hamburger').click(function (event) { $(this).toggleClass('h-active'); $('.main-nav').toggleClass('slidenav'); }); $('.header-home .main-nav ul li a').click(function (event) { $('.hamburger').removeClass('h-active'); $('.main-nav').removeClass('slidenav'); }); } $(".main-nav .fl").on('click', function(event) { var $fl = $(this); $(this).parent().siblings().find('.submenu').slideUp(); $(this).parent().siblings().find('.fl').addClass('flaticon-plus').text("+"); if($fl.hasClass('flaticon-plus')){ $fl.removeClass('flaticon-plus').addClass('flaticon-minus').text("-"); }else{ $fl.removeClass('flaticon-minus').addClass('flaticon-plus').text("+"); } $fl.next(".submenu").slideToggle(); }); }); .hamburger { position: relative; width: 40px; height: 30px; cursor: pointer; border: 5px solid transparent; float: right; margin-top: 35px } .hamburger span { width: 100%; height: 2px; background: #08509e; display: block; position: absolute; right: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all 0.3s } .hamburger span.h-top { top: 0 } .hamburger span.h-bottom { bottom: 0; width: 27px } .hamburger span.h-middle { top: 50%; margin-top: -1px; width: 25px } .hamburger.h-active span { width: 100% } .hamburger.h-active span.h-top { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 50%; margin-top: -1px } .hamburger.h-active span.h-middle { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0 } .hamburger.h-active span.h-bottom { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 50%; margin-bottom: -1px } .bottombar { background-color: #08509e } .main-nav>ul { padding: 0; margin: 0; list-style: none } .main-nav>ul>li { display: inline-block; position: relative; margin-left: -4px; padding-right: 15px } .main-nav>ul>li+li { padding: 0 15px } .main-nav>ul>li>a { text-transform: uppercase; display: block; text-decoration: none; color: #000; line-height: 45px; font-size: 16px; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all 0.3s } .main-nav>ul>li:hover>a { color: #00b7d7 } .submenu { position: absolute; left: 0; top: auto; right: 0; min-width: 200px; list-style: none; margin: 0; padding: 0; padding: 15px; background: #fff; border: 1px solid #f7f7f7; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; z-index: 9999; -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all 0.3s } .submenu>li { display: block; margin: 0 -15px } .submenu>li a { display: block; padding: 10px 15px; color: #666; line-height: 1; font-size: 14px; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all 0.3s } .submenu>li a:hover { background: #f7f7f7; color: #08509e } .main-nav .fl { width: 30px; font-size: 20px; line-height: 35px; text-align: center; color: #fff; font-style: normal; position: absolute; right: 5px; top: 0; z-index: 999; display: none } .main-nav .fl:before { font-size: 14px; text-align: center; line-height: 35px } .main-nav>ul>li+li .submenu { left: 25px } .main-nav>ul>li:hover .submenu { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1 } .content-block { padding: 70px 0; position: relative } .slideInUp { visibility: hidden; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: translate3d(0, 30px, 0); -moz-transform: translate3d(0, 30px, 0); -ms-transform: translate3d(0, 30px, 0); -o-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out } .is-active .slideInUp { visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slideInUp2 { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s } @media (min-width:980px) { .hamburger { display:none; } } @media (max-width: 980px) { .main-nav { position: fixed; top: 0; left: 0; width: 250px; padding: 20px; z-index: 99999; height: 100%; overflow: auto; background: #000; -webkit-overflow-scrolling: touch; -webkit-transform: translateX(-250px); -moz-transform: translateX(-250px); -ms-transform: translateX(-250px); -o-transform: translateX(-250px); transform: translateX(-250px); -webkit-transition: -webkit-transform .3s ease-in; -moz-transition: -moz-transform .3s ease-in; -o-transition: -o-transform .3s ease-in; transition: transform 0.3s ease-in } .main-nav.slidenav { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .main-nav>ul { float: none } .main-nav>ul>li { display: block; padding: 0 !important; margin-left: 0 } .main-nav>ul>li>a { font-size: 14px; color: #fff; line-height: 35px } .main-nav .fl { display: block; line-height: 35px } .submenu { position: static; min-width: 200px; background: transparent; border: none; padding: 5px 15px 5px 25px; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; visibility: visible; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; display: none } .submenu>li a { display: block; padding: 10px 0; color: #666; line-height: 0.8; font-size: 14px; color: #ccc; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all 0.3s } .submenu>li a:hover { background: transparent; color: #08509e } .slideInUp { visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none } }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <a href="javascript:void(0)" class="hidden-lg hamburger"> <span class="h-top"></span> <span class="h-middle"></span> <span class="h-bottom"></span> </a> <nav class="main-nav"> <ul> <li> <a href="#">ABOUT US</a> <i class="fl flaticon-plus">+</i> <ul class="submenu"> <li><a href="mission-statement.php">Mission Statement</a></li> <li><a href="participating-dentists.php">Participating Dentists</a></li> <li><a href="services.php">Services</a></li> </ul> </li> <li> <a href="#">PATIENT</a> <i class="fl flaticon-plus">+</i> <ul class="submenu"> <li><a href="medical-history-forms.php">Medical History Forms</a></li> <li><a href="before-surgery.php">Before Surgery</a></li> <li><a href="after-surgery.php">After Surgery</a></li> <li><a href="children-and-special-needs-adults.php">Children and Special Needs Adults</a></li> <li><a href="privacy.php">Privacy</a></li> <li><a href="rights-and-responsibilities.php">Rights and Responsibilities</a></li> <li><a href="financial-information.php">Financial Information</a></li> </ul> </li> <li> <a href="javascript:void(0)">INFORMATION</a> <i class="fl flaticon-plus">+</i> <ul class="submenu"> <li><a href="privileging-criteria.php">Privileging Criteria</a></li> <li><a href="privileging-board-members.php">Privileging Board Members</a></li> <li><a href="privileging-criteria.php#reqInfo">Request for Information</a></li> </ul> </li> <li><a href="map-and-directions.php">MAP & DIRECTIONS</a></li> <li><a href="news.php">NEWS</a></li> <li><a href="employment.php">EMPLOYMENT</a></li> <li><a href="#">CONTACT US</a></li> </ul> <div class="mob-login hidden-lg"> <a href="#" class="btn btn-outline">LOGIN</a> </div> </nav>
没有评论:
发表评论