"Slide dropdown navigation"
Bootstrap 3.3.0 Snippet by joshuaedwardk

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/index.php"> NSTP <i class="fa fa-home"></i></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <!--about us--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">ABOUT NSTP<b class="caret"></b></a> <ul class="dropdown-menu nav nav-list"> <li><a href="/aboutus.php"> About NSTP</a></li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Meet NSTP</a> <ul class="dropdown-menu nav nav-list"> <li class="menu-item "><a href="/meet_the_board.php"> Board of Directors</a></li> <li class="menu-item "><a href="/executive_director.php"> Executive Director</a></li> <li class="menu-item "><a href="/instructors.php"> NSTP Instructors</a></li> <li class="menu-item "><a href="/meet_the_office.php"> Meet the Office</a></li> </ul> <li><a href="/nstp_awards.php"> Awards</a></li> <li><a href="/classifieds.php"> Classifieds</a></li> <li><a href="/testimonial.php"> Testimonials</a></li> <li><a href="/codeandrules.php"> Code of Ethics</a></li> <li><a href="/contactus.php"> Contact Us</a></li> </li> </ul> </li> <!--Education--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">EDUCATION<b class="caret"></b></a> <ul class="dropdown-menu nav nav-list"> <li><a href="/expanded_research_hotline.php"> NSTP Tax Research Service</a></li> <li><a href="/AFTR_course.php#"> 2015 Annual Federal Tax Refresher Course</a></li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 2015 Special Topics Workshops</a> <ul class="dropdown-menu nav nav-list"> <li class="menu-item "><a href="/2015_st/Cabo.php"> 2015 Cabo San Lucas, Mexico</a></li> <li class="menu-item "><a href="/2015_st/napa.php"> 2015 Napa, CA</a></li> <li class="menu-item "><a href="/2015_st/Niagara.php"> 2015 Niagara Falls, NY</a></li> <li class="menu-item "><a href="/2015_st/williamsburg.php"> 2015 Williamsburg, VA</a></li> </ul> <li><a href="/webinar.php">2015 Webinar</a> </li> <li><a href="/ea_bootcamp.php"> 2015 EA Boot Camp</a> </li> <li><a href="/self-study.php"> Self-Studies</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications</a> <ul class="dropdown-menu nav nav-list"> <li class="menu-item "><a href="http://online.pubhtml5.com/rlgi/glvf/" target="_blank"> Form 3115</a></li> </ul> </li> <li><a href="/self_study/2014/federal-tax-update-DVD.php"> 2014 DVD Federal Tax Update </a> </li> <li><a href="/irs_tax_forum.php"> 2015 IRS Nationwide Tax Forums</a> </li> <li><a href="/amazon_promotion.php"> Amazon Promotion</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Fast Forward Academy Programs</a> <ul class="dropdown-menu nav nav-list"> <li class="menu-item "><a href="http://store.fastforwardacademy.com/enrolled-agent-exam-prep.htm?partner_id=34" target="_blank"> EA Program</a></li> <li class="menu-item "><a href="http://store.fastforwardacademy.com/cpa-exam-review.htm?partner_id=34" target="_blank"> CPA Program</a></li> </ul> </li> </li> </ul> </li> <!--membership--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Membership<b class="caret"></b></a> <ul class="dropdown-menu nav nav-list"> <li><a href="/whyjoin.php"> Become an NSTP Member</a></li> <li><a href="/whyjoin.php"> Renew Now</a></li> <li><a href="/dividend_rewards.php"> Dividend Reward Program</a></li> </ul> </li> <!--News--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">News<b class="caret"></b></a> <ul class="dropdown-menu nav nav-list"> <li><a href="http:/blog/"> NSTP Blog</a></li> <li><a href="/irs_tax_forum.php">2015 IRS Nationwide Tax Forums</a></li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications</a> <ul class="dropdown-menu nav nav-list"> <li class="menu-item "><a href="http://online.pubhtml5.com/rlgi/glvf/" target="_blank"> Form 3115</a></li> </ul> </li> </ul> </li> <!--===============Login Information===========--> <?php if(Yii::app()->user->isGuest):?> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href=""class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> Login <b class="caret"></b></a> <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> <!--===============EVERYONE SEES===========--> <?php $form = $this->beginWidget('CActiveForm', array( 'action' => Yii::app()->baseUrl . '/Sessions/checklogin', )); ?> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2"> Member Number</label> <input name="myusername" type="text" id="myusername" placeholder="Member Number" required> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2"> Password</label> <input name="mypassword" type="password" id="mypassword" placeholder="Password" required> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <div class="form-group"> <button type="submit" class="btn btn-danger btn-block">Sign in</button> </div> </form> </div> </div> </li> <li class="divider"></li> <li> <a class="btn btn-default btn-block" href="/Sessions/PasswordRecovery">New Member ?</a> <a class="btn btn-default btn-block" href="/Sessions/PasswordRecovery">Forgot password ?</a> </li> </ul> </li> </ul> <?php $this->endWidget(); ?> <?php else: ?> <!--===============MEMBER SEE===========--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> Profile <b class="caret"></b></a> <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <strong> Welcome: <?php echo Yii::app()->user-> getName(); ?></strong> </div> <div class="form-group"> <a class="btn btn-default btn-block btn-primary" href="/member/login_success.php">Visit the member area</a> </div> <div class="form-group"> <a class="btn btn-default btn-block" href="/Account/Rewards">View Dividend Rewards</a> </div> </form> </div> </div> </li> <li class="divider"></li> <div class="form-group"> <a href="/Sessions/Destroy" target="_self" class="renewallink btn btn-danger btn-block" >Logout</a> </div> </ul> </li> </ul> <?php endif; ?> </div> </li> </ul> </div> </nav>
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); });

Questions / Comments: