"LibGuide"
Bootstrap 3.0.0 Snippet by VitaminB

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <header> <div class="top_bar"> <div class="container"> <div class="col-md-6"> <ul class="social"> < </ul></div> <div class="col-md-6"> <ul class="rightc"> <li></i> <a href="https://www.ststephens.wa.edu.au/" >ST STEPHEN'S SCHOOL</a></li> </ul> </div> </div> </div> <!--top_bar--> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="http://library.ststephens.wa.edu.au/library"><img src="https://ststephensschool.sharepoint.com/SSSCorporate/SSSWebsite/_layouts/15/guestaccess.aspx?docid=0f123f73b13684dea95b0a466359fed0e&authkey=AUiWxYRcHZPKPajg2Dr3llk&expiration=2018-04-02T04%3a33%3a17.000Z" height="45.1" width="250"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="http://library.ststephens.wa.edu.au/library/primary" class="dropdown-toggle" data-toggle="dropdown"> Primary</a> <ul class="dropdown-menu"> <li class ="drop-link"><a href="http://library.ststephens.wa.edu.au/library/primary">Search</a></li> <li class ="drop-link"><a href="http://library.ststephens.wa.edu.au/group/primary">Research Guides</a></li> <li class ="drop-link"><a href="http://library.ststephens.wa.edu.au/library/primary/read">Read</a></li> <li class="divider"></li> <li class ="drop-link"><a href="http://library.ststephens.wa.edu.au/library/primary/watch_play">Watch and Play</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Secondary</a> <ul class="dropdown-menu"> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/library/secondary">Secondary</a></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/secondary">LibGuides</a></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/library/secondary/databases/general">Databases</a></li> <li class="divider"></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/library/secondary/learning_tools">Learning Tools</a></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/c.php?g=640720&p=4490286">eBooks & eAudio Books</a></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/c.php?g=640720&p=4563340">Homework & Study Links</a></li> <li class="divider"></li> <li class ="drop-link" ><a href="http://library.ststephens.wa.edu.au/c.php?g=640720&p=4642741">Online Reference Generator & Copyright</a></li> </ul> </li> <li class ="nav"><a href="http://library.ststephens.wa.edu.au/library/staff"> Staff</a></li> <li class ="nav"><a href="http://library.ststephens.wa.edu.au/library/community"> Community</a></li> <li class ="nav"><a href="http://library.ststephens.wa.edu.au/about/contact"> Contact</a></li> <li class="nav"><a href="http://library.ststephens.wa.edu.au/about/services">Services</a></li> <li class ="nav"><a href="https://blogs.ststephens.wa.edu.au/collinsonlibrary/">Blog</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header>
.top_bar { min-height:40px; /* background: #30bed6; /* Old browsers */ background: -moz-linear-gradient(left, #083050 0%, #083050 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #083050 0%,#083050 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #083050 0%,#083050100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#083050', endColorstr='#083050',GradientType=1 ); /* IE6-9 */} body { font-family: Arial,Helvetica,Verdana; font-size: 9pt; line-height: 1.75; padding-left: 0px; padding-right: 0px; } .navbar { margin-bottom:0px; !important; } li.drop-link { padding-top: 7px; padding-bottom: 7px; } .rightc li a { font-family: 'montserrat', 'Open Sans', sans-serif; font-size:12px; float:left; line-height:40px; color:#FFF, font-weight:400 ; } .Top-Bar { font-family: 'montserrat', 'Open Sans', sans-serif; font-size:12px; float:left; line-height:40px; color:#FFF, font-weight:400px; } .rightc li { margin: 0px 10px; font-size: 12px; float: left; line-height: 40px; color: #FFF; } li.nav:hover { background-color: #E7E7E7; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; height: 90px; padding-top: 10px; } .social { list-style-type:none; margin-bottom:0px; float:left; padding:0px; margin-left:0px;} .social li { float:left;} .social li a { padding:0 10px; font-size:13px; line-height:40px; color:#FFF;} .rightc { list-style-type:none; margin-bottom:0px; float:right;} .rightc li { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;} .rightc li a { color:#FFF; } .rightc ul col-md-6 { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;} .navbar-brand img { margin-top:10px; margin-left:0px;} .navbar-brand {padding:0px;} .header_image { margin-top:-70px; float:left;} .nav.navbar-nav.navbar-right span {font-family: 'montserrat', 'Open Sans', sans-serif; font-style:italic; font-weight:200; font-size:16px; color:#062a47} .navbar-right li a {font-family: 'montserrat', 'Open Sans', sans-serif; font-size:16px; color:#062a47 !important;} x .dropdown-menu { margin-top: 20px; position: absolute; top: 100%; } .navbar-default .navbar-nav>li>a { color: #777; padding-top: 35px; @media screen and (max-width: 600px) { .col-md-6 { visibility: hidden; clear: both; float: left; margin: 10px auto 5px 20px; width: 28%; display: none; } } .cities :hover{ background-color: #083050; }
$(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'); } ); });

Related: See More


Questions / Comments: