"Jackson Library Redesign"
Bootstrap 3.3.0 Snippet by pchilders

<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <div class="row iwu-red containter-fluid" id="header_row"> <div id="logoHeader"> <img class="logo" src="https://libapps.s3.amazonaws.com/accounts/13288/images/IWU_JLB.png"> <button type="button" class="navbar-toggle collapsed btn-default" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-menu-hamburger"></span> Menu </button> <div class="navbar-right"> <form class="navbar-form navbar-search-dropdown" data-navbar-search="content"> <div class="form-group"> <label class="sr-only" for="navbarSearch">Search</label> <input class="form-control" data-navbar-search="input" id="navbarSearch" placeholder="Search" tabindex="1" type="search"> </div> <button class="navbar-toggle navbar-search" data-navbar-search="toggle" data-track="event" data-track-action="click" data-track-category="Header Search" data-track-label="Search" type="button"> <span class="sr-only">Toggle Search</span> <i aria-hidden="true" class="fa fa-search"></i> </button> </form> <ul class="nav navbar-nav topLinks"> <li class="topLinks"><a href="https://oak.indwes.edu/patroninfo~S0/">My Library Account</a></li> <li class="topLinks"><a onclick="return SnapABug.startLink();">Chat</a></li> <li class="topLinks"><a href="https://indwes.libguides.com/researchservices">Contact Us</a></li> </ul> </div> </div> </div> <div class="row" id="header_row" style="background-color:#ffffff;padding:2px"></div> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav iwu-gray "> <!-- begin Find --> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle border-side" data-toggle="dropdown">Find <b class="caret"></b></a> <ul class="dropdown-menu megamenu"> <li class="row"> <div class="col-md-6"> <ul class="multi-column-dropdown"> <li>Search By Type</li> <li class="divider"></li> <li><a href="https://indwes.libguides.com/c.php?g=949465&p=6846842">Articles</a></li> <li><a href="https://indwes.libguides.com/c.php?g=949465&p=6846856">Books & Ebooks</a></li> <li><a href="https://indwes.libguides.com/c.php?g=949465&map;p=6846860">Journals & Magazines</a></li> <li><a href="#">CLEP & Study Guides</a></li> <li><a href="#">Teaching Tools</a></li> <li><a href="#">Children's Books</a></li> <li><a href="#">Encyclopedias & Dictionaries</a></li> <li><a href="#">Databases</a></li> <li><a href="https://indwes.libguides.com/c.php?g=949465&p=6854944">Videos</a></li> <li><a href="#">Theses & Dissertations</a></li> <li><a href="#">Music Scores & Recordings</a></li> <li><a href="#">Images</a></li> <li><a href="#">Statistics</a></li> <li><a href="#">Equipment</a></li> <li><a href="#">Course Reserves</a></li> <li><a href="#">Primary Sources</a></li> </ul> </div> <div class="col-md-6"> <ul class="multi-column-dropdown"> <li>Search By Tool</li> <li class="divider"></li> <li><a href="https://search.ebscohost.com/login.aspx?direct=true&authtype=ip,guest&scope=site&type=1&custid=s8876267&groupid=main&profile=eds">QUICKsearch</a></li> <li><a href="https://oak.indwes.edu">IWU Library Catalog</a></li> <li><a href="https://indwes.libguides.com/az.php">Databases</a></li> <li><a href="https://search.ebscohost.com/login.aspx?authtype=ip,sso&custid=s8876267&groupid=main&profile=pfi&bool">Journal Finder</a></li> <li><a href="https://www.worldcat.org/">Worldcat - Don't have what you need</a></li> </ul> </div> </li> </ul> </li> <!-- end Find --> <!-- begin Using the Library --> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle border-side" data-toggle="dropdown"> Using the Library <b class="caret"></b> </a> <ul class="dropdown-menu megamenu"> <li class="row"> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Services For</li> <li class="divider"></li> <li><a href="#">Students</a></li> <li><a href="#">Faculty</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Visitors</a></li> <li><a href="#">Distance Users</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Use Your Library</li> <li class="divider"></li> <li><a href="#">My Library Account</a></li> <li><a href="#">Borrowing Materials</a></li> <li><a href="#">Interlibrary Loan</a></li> <li><a href="#">Course Reserves</a></li> <li><a href="#">Renew Materials</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Computers & Technology</li> <li class="divider"></li> <li><a href="#">Print, Copy, Scan & Fax</a></li> <li><a href="#">Computer Labs</a></li> <li><a href="#">Cameras & Equipment Loans</a></li> <li><a href="#">One Button Studio</a></li> <li><a href="#">IT Xpress Computer Support</a></li> <li><a href="#">Laminating & Art Production</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Studying at the Library</li> <li class="divider"></li> <li><a href="#">Reserve a Study Room</a></li> <li><a href="#">Study Room FAQ</a></li> <li><a href="#">Study Spaces</a></li> <li><a href="#">Floor Plans</a></li> <li><a href="#">Tutoring</a></li> </ul> </div> </li> </ul> </li> <!-- end Using the Library --> <!-- begin Research Help --> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle border-side" data-toggle="dropdown"> Research Help <b class="caret"></b> </a> <ul class="dropdown-menu megamenu"> <li class="row"> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Getting Started</li> <li class="divider"></li> <li><a href="#">Research Tips</a></li> <li><a href="#">Improve Your Research Skills</a></li> <li><a href="#">Citing Sources</a></li> <li><a href="#">Research By Topic</a></li> </ul> </div> <div class="col-md-2"> <ul class="multi-column-dropdown"> <li>Guides & Tutorials</li> <li class="divider"></li> <li><a href="#">Course Guides</a></li> <li><a href="#">Subject Guides</a></li> <li><a href="#">Tutorials & Videos</a></li> </ul> </div> <div class="col-md-2"> <ul class="multi-column-dropdown"> <li>Research Support</li> <li class="divider"></li> <li><a href="#">Research Appointments</a></li> <li><a href="#">Subject Librarians</a></li> <li><a href="#">Faculty Support</a></li> <li><a href="#">Copyright</a></li> </ul> </div> <div class="col-md-2"> <ul class="multi-column-dropdown"> <li>Contact Us</li> <li class="divider"></li> <li><a href="#">Chat</a></li> <li><a href="#">Email</a></li> <li><a href="#">Phone</a></li> <li><a href="#">In Person</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Access From Anywhere</li> <li class="divider"></li> <li><a href="#">Library Account</a></li> <li><a href="#">Renew Books</a></li> <li><a href="#">Request Books</a></li> <li><a href="#">Databases</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Ebooks & E-journals</a></li> <li><a href="#">Interlibrary Loan</a></li> <li><a href="#">Chat/Contact Us</a></li> </ul> </div> </li> </ul> </li> <!-- end Research Help --> <!-- begin About the Library --> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> About the Library <b class="caret"></b> </a> <ul class="dropdown-menu megamenu"> <li class="row"> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Who We Are</li> <li class="divider"></li> <li><a href="#">Vision, Philosophy, Policies & Guildelines</a></li> <li><a href="#">Codes of Conduct</a></li> <li><a href="#">Copyright</a></li> <li><a href="#">Use of Databases</a></li> <li><a href="#">Computer Policy</a></li> <li><a href="#">Staff Directory</a></li> <li><a href="#">Jobs at the Library</a></li> <li><a href="#">Lewis A. Jackson</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Get Involved</li> <li class="divider"></li> <li><a href="#">Events</a></li> <li><a href="#">News</a></li> <li><a href="#">Support the Library</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Visit Us</li> <li class="divider"></li> <li><a href="#">Hours</a></li> <li><a href="#">Maps & Parking</a></li> <li><a href="#">Visitor Information</a></li> </ul> </div> <div class="col-md-3"> <ul class="multi-column-dropdown"> <li>Collections</li> <li class="divider"></li> <li><a href="#">Circulating Collection</a></li> <li><a href="#">Reference Collection</a></li> <li><a href="#">Teaching Tools</a></li> <li><a href="#">Curriculum</a></li> <li><a href="#">Juvenile Collection</a></li> <li><a href="#">Media Collection</a></li> <li><a href="#">Periodical Collection</a></li> <li><a href="#">Archives</a></li> </ul> </div> </li> </ul> </li> <!-- end About the Library --> <!-- end of file --> </ul> </div> </div> </div> <div class="container-fluid" id="main-banner"> <div class="row" id="mainRow"> <div class="col-md-12"> <div id="catsearch"> <div class="form-inline"> <div class="form-group"><label class="sr-only" for="searchBox">QUICKSearch: find articles, journals, books, media and more...</label> <div class="input-group"><input class="form-control" id="ebscohostsearchtext" name="ebscohostsearchtext" placeholder="QUICKSearch: find articles, journals, books, media and more..." type="text" /> <div class="input-group-btn"><button class="btn btn-default dropdown-toggle advtoggle" data-toggle="dropdown" type="button"><i aria-hidden="true" class="fa fa-caret-down"></i></button><button class="btn btn-primary searchBtn" onclick="checkCustomLimiters()" style="vertical-align:middle"><span aria-hidden="true" class="fa fa-search" style="color:#fff;"> </span></button> <div class="dropdown-menu dropdown-menu-right" role="menu"> <form role="form"> <div class="form-group"> <div class="row"> <div class="col-md-4"> <div id="searchBox1"> <ul> <li class="search-item first">Search For:</li> <li class="search-item"><input id="chkPeerReviewed" name="chkPeerReviewed" type="checkbox" /> <label for="chkPeerReviewed">Scholarly (Peer Reviewed) Journals</label></li> <li class="search-item"><input id="chkPrintBooksOnly" name="chkPrintBooksOnly" type="checkbox" /> <label for="chkPrintBooksOnly">Print Books Only</label></li> <li class="search-item"><input id="chkPrintBooksEbooks" name="chkPrintBooksEbooks" type="checkbox" /> <label for="chkPrintBooksEbooks">Print Books and eBooks</label></li> <li class="search-item"><input id="chkArticlesOnly" name="chkArticlesOnly" type="checkbox" /> <label for="chkArticlesOnly">Articles Only</label></li> </ul> </div> </div> <div class="col-md-4"> </div> <div class="col-md-4"> <div id="searchBox2"> <ul> <li class="search-item first">Show Only:</li> <li class="search-item"><label for="chkOnlineOnly"><input id="chkOnlineOnly" name="chkOnlineOnly" type="checkbox" /> Full Text</label></li> </ul> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> <div id="advanced-search"><span style="color: white;">Other Tools:</span> <a class="advanced-search" href="/advanced-search/" rel="noindex,nofollow">Catalog</a>   <a class="advanced-search" href="/resources">Databases</a>   <a class="advanced-search" href="/resources">Journals</a></div> </div> </div> </div> </div>
/*---------Main Code --------*/ html, body { margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline; font-family: Open Sans,Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857; color: #484848; } .caret{ border-width: 6px; color:white; } .btn .caret { margin-left: 10px; } .row { margin-right: 0px!important; margin-left: 0px!important; } /*----------Header Code ------------*/ a:active { outline: none; } #s-lg-guide-tabs-title-bar { display: none; } .row.iwu-red { background-color: #a6192e; } .iwu-gray { background-color:#737373; padding-left:30%; } .navbar { margin-bottom:0px; } .navbar-default{ border-bottom:0px; } .navbar .navbar-nav { display: inline-block; float: none; width:100%; } .navbar-nav { margin: 0; width:100%; } .navbar .navbar-collapse { text-align: center; } .topLinks .dropdown-menu { float:left; position:relative; background-color: transparent; } .navbar-nav.topLinks> li { float: none; display: inline-block; color:#fff; padding-right:30px; padding-left:10px; padding-top:0px; border:none; } .navbar-nav.topLinks>li> a { position: relative; display: block; padding: 0px; color:#fff; } .nav.topLinks >li> a:hover { position: relative; display: block; padding: 0px; color:#fff; text-decoration: underline; background-color: transparent; border:none; outline: none; } .navbar-na>li> a:focus { background-color: transparent; border:none; } #logoHeader { padding: 10px 0px 0px 0px; } .border-side{ border-right: 1px solid #b2adad; display: inline-block; float: none; } /*------------New Dropdown Code----------------- */ .navbar-default{ color: #fff; background-color: #737373; } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > .dropdown > a .caret{ border-top-color: #fff; border-bottom-color: #fff; } .navbar-default .navbar-brand{ color:#fff; } .menu-large { position: static !important; } .megamenu{ padding: 20px 0px; width:100%; } .megamenu> li > ul { padding: 0; margin: 0; } .megamenu> li > ul > li { list-style: none; } .megamenu> li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu> li ul > li > a:hover, .megamenu> li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.disabled > a, .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { color: #999999; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #fff; } .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .megamenu.dropdown-header { color: #428bca; font-size: 18px; } .multi-column-dropdown { list-style: none; } .multi-column-dropdown li { display: block; clear: both; line-height: 1.428571429; color: #000; white-space: nowrap; font-weight:600; padding-left: 15px; left:auto; font-size: 15px; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; font-weight:200; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } /*Main Search Styles */ #s-lg-box-wrapper-23826064{ padding-bottom:0px; } #s-lg-box-20301367-container { background-color:#dddddd; } #s-lib-bc { display:none; } #s-lg-guide-header-info { display:none; } #s-lg-guide-header-search { display:none; } #s-lg-tabs-container{ display:none; } #s-lg-col-boxes { padding-right:0px; padding-left:0px; } /*Background and Banner*/ #main-banner { background-image:url(https://libapps.s3.amazonaws.com/accounts/13288/images/Homepage_Photo_Resized.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #fff; max-width: 100%; min-height: 300px; background-size: cover; background-position: center; padding-left:0px; padding-right:0px; margin-right:0px; margin-left:0px; opacity: 0.7; filter: alpha(opacity=70); /* For IE8 and earlier */ } #mainRow { margin-right:0px; margin-left:0px; } .list-group { padding:0px; margin-bottom:0px; } .input-group-btn { display: block!important; padding: 0px; } .input-group-btn>.btn { position: relative; border-radius: 0%; height:30px; } .btn btn-default dropdown-toggle advtoggle { display: block; width: 3.6rem; background: hsl(0, 100%, 100%); border-style: solid; border-color: hsl(0, 0%, 70%); border-width: 1px 0; position: relative; background-color: white; border-radius: 0%!important; } /*Style for dropdown form*/ .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex; height:30px; } .btn-group .btn { border-radius: 1; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .input-group { position: relative; display: inline-table; border-collapse: separate; vertical-align: middle; } /* - Begin searchBox1 Box */ #searchBox1{ padding:10px; background-color:#fff; /* white */ opacity:.9; filter:alpha(opacity=95); /* For IE8 and earlier */ border-radius:0; height:100%; min-width:200px; width:100%; float:left; } #searchBox1 ul { list-style:none; padding:10px; } #searchBox1 li.search-item { padding:5px 5px 0px 25px; position: relative; display: block; } /* End searchBox1 Box */ /* - Begin searchBox2 Box */ #searchBox2{ padding:10px; background-color:#fff; border-style:solid; border-width:medium; border-color:#ddd; /* white */ opacity:.9; filter:alpha(opacity=95); /* For IE8 and earlier */ border-radius:0; height:100%; min-width:200px; } #searchBox2 ul { list-style:none; padding:10px; } #searchBox2 li.search-item { padding:5px 5px 0px 25px; position: relative; display: block; } .searchBtn { background-color:#2F5597; background-repeat: repeat-x; border: none; border-radius: 0; margin: 0; cursor: pointer; font-family: Source Sans Pro, Helvetica, Arial, sans-serif; padding-left: 1.25em; padding-right: 1.25em; height: 1.875em; width: 4em; } /* End searchBox2 Box */ #catsearch { text-align:center; position: absolute; max-width: 690px; width: 100%; padding: 40px 0 20px 0; background-color:rgb(120, 120, 120, 0.7); border-radius: 20px; left: 50%; top: 42%; -webkit-transform: translate(-50%, -42%); -moz-transform: translate(-50%, -42%); transform: translate(-50%, -42%); margin-top: 100px; } #catsearch input, #catsearch .btn { font-size: 16px !important; font-family: 'Lato', sans-serif !important; font-style: italic; } #ebscohostsearchtext{ -webkit-box-flex: 12; -webkit-flex: 12; /* flex: 12; */ border-right: none; margin: 0; font-size: 1.6em; border-radius: 0.3em 0 0 0.3em; font-weight: 600; padding: 0.7em 0.8em 0.8em; position: relative; z-index: 1; float: left; } #catsearch #advanced-search { margin-top:1em; } #catsearch #advanced-search a { color: #ffffff; } #s-lg-box-20301367-container { background-color: #dddddd; } #s-lg-box-19677974-container { background-color: #dddddd; } #s-lg-box-21038348-container { background-color: #dddddd; } #s-lg-box-19678081-container { background-color: #dddddd; } #s-lg-box-22566598-container { background-color: #dddddd; } .slick-slide { background-color: #ffffff; } @media (max-width: 768px) { .border-side{ border-right: 1px solid #b2adad; font-size:14pt; display: inline-block; float: none; } #adv-search { width: 500px; margin: 0 auto; min-height:400px; } .dropdown.dropdown-lg { position: static; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } .megamenu{ margin-left: 0 ; margin-right: 0 ; } .megamenu> li { margin-bottom: 30px; } .megamenu> li:last-child { margin-bottom: 0; } .megamenu.dropdown-header { padding: 3px 15px !important; } .navbar-nav .open .dropdown-menu .dropdown-header{ color:#fff; } }
$(document).ready(function() { jQuery(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop().fadeIn("fast"); }, function() { $('.dropdown-menu', this).stop().fadeOut("fast"); }); }); }); $('.dropdown-toggle').click(function(e) { if ($(document).width() > 768) { e.preventDefault(); var url = $(this).attr('href'); if (url !== '#') { window.location.href = url; } } });

Related: See More


Questions / Comments: