Skip to content

Instantly share code, notes, and snippets.

@eSaner

eSaner/index.html

Created December 8, 2022 22:07
Show Gist options
  • Save eSaner/6180ca069b1e76da9cbb9b83a27769aa to your computer and use it in GitHub Desktop.
Save eSaner/6180ca069b1e76da9cbb9b83a27769aa to your computer and use it in GitHub Desktop.
Download ZIP
lib.jmu.edu header
Raw
index.html
<header>
<div id="nav2022" class="contain-to-grid">
<a href="#main" class="skip-link">Skip To Main Content</a>
<nav class="top-bar" data-topbar="" role="navigation">
<div class="title-area name">
<a href="https://www.lib.jmu.edu/">
<img src="https://esaner1.nyc3.cdn.digitaloceanspaces.com/jmu/logo_horizontal-white_lg.svg" alt="JMU Libraries logo, go to homepage">
</a>
<button class="toggle-topbar menu-icon">Menu</button>
</div>
<section class="top-bar-section">
<ul class="right notsubtopbar">
<!-- Find & Access Menu -->
<li class="divider"></li>
<li class="has-dropdown parentlink">
<button class="toggle-submenu parentlink active" aria-expanded="false" aria-controls="find_access" onclick="toggleSubmenu(this)">Find &amp; Access<span class="show-for-sr"> Library Resources</span></button>
<ul id="find_access" class="dropdown m-menu">
<li class="title back js-generated">
<p><a href="javascript:void(0)" id="backlink">Back</a></p>
</li>
<li class="parent-link show-for-small-only">
<h2 class="mmsubtitle">Find &amp; Access</h2>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Find:</h3>
<ul>
<li>
<a href="//guides.lib.jmu.edu/az.php">Databases</a>
</li>
<li>
<a href="https://search.lib.jmu.edu/discovery/jsearch?vid=01JMU_INST:01JMU">Journals</a>
</li>
<li>
<a href="https://search.lib.jmu.edu/">Library Search</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/music/">Music</a>
</li>
<li>
<a href="//guides.lib.jmu.edu/researchguides">Research &amp; Course Guides</a>
</li>
<li>
<a href="//commons.lib.jmu.edu/">Scholarly Commons</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/special/">Special Collections</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/video/">Video</a>
</li>
</ul>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Access:</h3>
<ul>
<li>
<a href="https://www.lib.jmu.edu/circulation/">Borrow &amp; Renew</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/stackguide/">Call Number Locations</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/connect/">Connect from Off-campus</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/reserves/">Course Reserves</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/delivery/">Delivery &amp; Duplication</a>
</li>
<li>
<a href="//illiad.lib.jmu.edu/illiad/">Interlibrary Loan</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/purchase-request/">Suggest a Purchase</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/visitor-parking/">Visitor Access &amp; Parking</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- END OF Find & Access Menu -->
<!-- Research & Teaching Menu -->
<li class="divider"></li>
<li class="has-dropdown parentlink">
<button class="toggle-submenu" aria-expanded="false" aria-controls="research_teaching" onclick="toggleSubmenu(this)">Research &amp; Teaching<span class="show-for-sr"> Support</span></button>
<ul id="research_teaching" class="dropdown m-menu">
<li class="title back js-generated">
<p><a href="javascript:void(0)" id="backlink">Back</a></p>
</li>
<li class="parent-link show-for-small-only">
<h2 class="mmsubtitle">Research &amp; Teaching</h2>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Research Support:</h3>
<ul>
<li>
<a href="//guides.lib.jmu.edu/citing">Citing Sources</a>
</li>
<li>
<a href="//guides.lib.jmu.edu/data">Data Management</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/liaison-librarians/">Liaison Librarians</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/mretoolkit/">Madison Research Essentials Toolkit</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/publishing">Publishing @ JMU</a>
</li>
<li>
<a href="//guides.lib.jmu.edu/researchguides">Research &amp; Course Guides</a>
</li>
<li>
<a href="//commons.lib.jmu.edu/">Scholarly Commons</a>
</li>
</ul>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Teaching Support:</h3>
<ul>
<li>
<a href="https://www.lib.jmu.edu/tech-support/">Canvas &amp; Classroom Tech Support</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/consultation-instruction/">Consultation &amp; Instruction</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/digital-scholarship/">Digital Scholarship</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/staff/departments/learning-innovations-design/instructional-design/">Instructional Design</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/media-production/">Media Production for Faculty</a>
</li>
<li>
<a href="//guides.lib.jmu.edu/OER">Open &amp; Affordable Course Materials</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/faculty/ed-tech/">Teaching with Educational Technology</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- END OF Research & Teaching Menu -->
<!-- Spaces & Technology Menu -->
<li class="divider"></li>
<li class="has-dropdown parentlink">
<button class="toggle-submenu" aria-expanded="false" aria-controls="spaces_technology" onclick="toggleSubmenu(this)"><span class="show-for-sr">Library </span>Spaces &amp; Technology</button>
<ul id="spaces_technology" class="dropdown m-menu">
<li class="title back js-generated">
<p><a href="javascript:void(0)" id="backlink">Back</a></p>
</li>
<li class="parent-link show-for-small-only">
<h2 class="mmsubtitle">Spaces &amp; Technology</h2>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Spaces:</h3>
<ul>
<li>
<a href="https://www.lib.jmu.edu/accessibility/">Accessibility</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/renovation/">Carrier Library Renovation</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/reserve-a-group-study-room/">Group Study Rooms</a>
</li>
<li><a href="https://www.lib.jmu.edu/hours/">Hours</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/spaces/">Library Locations</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/special/">Special Collections</a>
</li>
<li>
<a href="https://guides.lib.jmu.edu/seedlibrary">Seed Library</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/makery/">The Makery</a>
</li>
</ul>
</li>
<li class="has-submenu">
<h3 class="mmsubtitle">Technology:</h3>
<ul>
<li>
<a href="https://canvas.jmu.edu/">Canvas at JMU</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/tech-classrooms/">Classroom Technology</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/equipment-loans/">Equipment Loans</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/tech-support/">Library Tech Support</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/media-production/">Media Production for Faculty</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/printing/">Printing, Scanning, &amp; Software</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/students/online-courses/">Taking Online or Hybrid Courses</a>
</li>
<li>
<a href="https://www.lib.jmu.edu/faculty/ed-tech/online-hybrid-hyflex/">Teaching Online Courses</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- END OF Spaces & Technology Menu -->
<!-- About Menu -->
<li class="divider"></li>
<li class="parentlink">
<a href="https://www.lib.jmu.edu/about/" class="no-dropdown parentlink active" target="_top">
<i class="icon-circle-right cgone"></i>
About<span class="screen-reader-text"> JMU Libraries</span></a>
</li>
<!-- END OF About Menu -->
</ul>
<ul class="right subtopbar">
<li><a href="https://www.lib.jmu.edu/ask/">Ask</a></li>
<li><a href="https://www.lib.jmu.edu/hours/">Hours</a></li>
<li><a href="https://www.lib.jmu.edu/staff/">People</a></li>
<li class="has-dropdown parentlink accountsmenu not-click">
<button class="toggle-submenu" aria-expanded="false" aria-controls="services" onclick="toggleSubmenu(this)">Services</button>
<ul id="services" class="dropdown m-menu">
<li class="title back js-generated">
<p><a href="javascript:void(0)" id="backlink">Back</a></p>
</li>
<li class="parent-link show-for-small-only mmsubtitle">Services</li>
<li><a href="https://www.lib.jmu.edu/students/">
<i class="icon-circle-right"></i>
<span class="show-for-sr">Services </span>For Students </a></li>
<li><a href="https://www.lib.jmu.edu/graduate-students/">
<i class="icon-circle-right"></i>
<span class="show-for-sr">Services </span>For Grad Students</a></li>
<li><a href="https://www.lib.jmu.edu/faculty">
<i class="icon-circle-right"></i>
<span class="show-for-sr">Services </span>For Faculty</a></li>
<li><a href="https://www.lib.jmu.edu/services-for-staff/">
<i class="icon-circle-right"></i>
<span class="show-for-sr">Services </span>For Staff</a></li>
<li><a href="https://www.lib.jmu.edu/visitors/">
<i class="icon-circle-right"></i>
<span class="show-for-sr">Services </span>For Vistors &amp; Alumni</a></li>
</ul>
</li>
<li class="has-dropdown parentlink accountsmenu not-click">
<button class="toggle-submenu" aria-expanded="false" aria-controls="accounts" onclick="toggleSubmenu(this)">Accounts</button>
<ul id="accounts" class="dropdown m-menu">
<li class="title back js-generated">
<p><a href="javascript:void(0)" id="backlink">Back</a></p>
</li>
<li class="parent-link show-for-small-only mmsubtitle">Accounts</li>
<li><a href="https://www.lib.jmu.edu/accounts/">
<i class="icon-circle-right"></i>Accounts Overview</a></li>
<li><a href="https://search.lib.jmu.edu/discovery/login?vid=01JMU_INST:01JMU">
<i class="icon-circle-right"></i>
Library Account </a></li>
<li><a href="//canvas.jmu.edu/">
<i class="icon-circle-right"></i>
Canvas</a></li>
<li><a href="//illiad.lib.jmu.edu/illiad/">
<i class="icon-circle-right"></i>
Interlibrary Loan</a></li>
<li><a href="//sites.lib.jmu.edu/wp-login.php?redirect_to=https%3A%2F%2Fsites.lib.jmu.edu%2F&amp;action=shibboleth">
<i class="icon-circle-right"></i>
CampusPress</a></li>
<li><a href="https://jmu.illumira.net/Shibboleth.sso/DS?SAMLDS=1&amp;entityID=urn:mace:incommon:jmu.edu&amp;target=https%3A%2F%2Fjmu.illumira.net%2Fdlr%2Fshibauth2.php%3Freferer%3Dhttp%253A%252F%252Fjmu.illumira.net%252F">
<i class="icon-circle-right"></i>
illumira</a></li>
<li><a href="//commons.lib.jmu.edu/">
<i class="icon-circle-right"></i>
Scholarly Commons</a></li>
<li><a href="//aeon.lib.jmu.edu/logon">
<i class="icon-circle-right"></i>
Special Collections Requests</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!--end .contain-to-grid-->
<div class="todayshours"><span class="library_hours">Carrier &amp; Rose: <span id="lblHours">closed</span></span><span class="music_hours"> | Music: <span id="lblHours">closed</span></span></div>
</header>
<nav class="breadcrumbs full" typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumb">
<ol class="breadcrumb">
<!-- Breadcrumb NavXT 7.1.0 -->
<li class="home breadcrumb-item"><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to JMU Libraries." href="https://www.lib.jmu.edu" class="home"><span property="name">JMU Libraries</span></a>
<meta property="position" content="1">
</span></li>
<li class="post post-page current-item breadcrumb-item active" aria-current="page"><span class="post post-page current-item">Carrier Library Renovation and Expansion</span></li>
</ol>
</nav>
<main id="main" role="main">
<!-- section -->
<section>
<div class="full" style="margin-top:0;">
<h1>Carrier Library Renovation and Expansion</h1>
</div>
<!-- article -->
<article id="post-28365" class="post-28365 page type-page status-publish hentry">
<figure class="wp-block-image size-full is-style-default renovation-top-image"><a href="https://www.lib.jmu.edu/renovation/carrier"><img width="1958" height="575" src="https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more.png" alt="" class="wp-image-30333" title="Artist's conception of a future entrance to Carrier Library featuring seating, ramps, and stairs." srcset="https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more.png 1958w, https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more-250x73.png 250w, https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more-700x206.png 700w, https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more-768x226.png 768w, https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more-1536x451.png 1536w, https://cdn1.lib.jmu.edu/wp-content/uploads/learn-more-120x35.png 120w" sizes="(max-width: 1958px) 100vw, 1958px"></a>
<figcaption>Artist’s conception of a future entrance to Carrier Library featuring seating, ramps, and stairs. Learn more about the <a href="https://www.lib.jmu.edu/renovation/carrier">future Carrier Library.</a></figcaption>
</figure>
<div id="responsive-height-wrapper">
<div class="twofourth boxshadow boxborder" style="height: 437px;">
<div class="h2border">
<h2>News</h2>
</div>
<div style="padding: 10px;">
<ul style="margin:0; padding:0; list-style:none;">
<li style="margin-bottom:10px;">
<!-- post title -->
<a href="https://www.lib.jmu.edu/collections-renovation-update/" title="Carrier Library Renovation and Expansion: Update on Books and Other Collections">Carrier Library Renovation and Expansion: Update on Books and Other Collections</a><br>
<!-- /post title -->
<!-- post details -->
<span class="newsitemdate">November 7, 2022</span>
<span class="smaller"> - <a href="https://www.lib.jmu.edu/wp-admin/post.php?post=30748&amp;action=edit">Edit This Post</a></span>
<!-- /post details -->
</li>
<li style="margin-bottom:10px;">
<!-- post title -->
<a href="https://www.jmu.edu/news/2022/10/18-carrier-renovation.shtml" title="JMU announces Carrier Library renovations">JMU announces Carrier Library renovations</a><br>
<!-- /post title -->
<!-- post details -->
<span class="newsitemdate">November 1, 2022</span>
<span class="smaller"> - <a href="https://www.lib.jmu.edu/wp-admin/post.php?post=30740&amp;action=edit">Edit This Post</a></span>
<!-- /post details -->
</li>
<li style="margin-bottom:10px;">
<!-- post title -->
<a href="https://www.lib.jmu.edu/the-carrier-library-of-the-future/" title="The Carrier Library of the Future">The Carrier Library of the Future</a><br>
<!-- /post title -->
<!-- post details -->
<span class="newsitemdate">November 1, 2022</span>
<span class="smaller"> - <a href="https://www.lib.jmu.edu/wp-admin/post.php?post=30730&amp;action=edit">Edit This Post</a></span>
<!-- /post details -->
</li>
<li style="margin-bottom:10px;">
<!-- post title -->
<a href="https://www.lib.jmu.edu/libraries-operations-during-renovation-virtual-info-session-for-staff-and-faculty/" title="Libraries Operations During Renovation: Virtual Info Sessions for Staff and Faculty">Libraries Operations During Renovation: Virtual Info Sessions for Staff and Faculty</a><br>
<!-- /post title -->
<!-- post details -->
<span class="newsitemdate">October 20, 2022</span>
<span class="smaller"> - <a href="https://www.lib.jmu.edu/wp-admin/post.php?post=30465&amp;action=edit">Edit This Post</a></span>
<!-- /post details -->
</li>
<li style="margin-bottom:10px;">
<!-- post title -->
<a href="https://www.lib.jmu.edu/carrier-renovation-announcement/" title="Carrier Library Renovation and Expansion to Begin in May 2023">Carrier Library Renovation and Expansion to Begin in May 2023</a><br>
<!-- /post title -->
<!-- post details -->
<span class="newsitemdate">October 18, 2022</span>
<span class="smaller"> - <a href="https://www.lib.jmu.edu/wp-admin/post.php?post=29165&amp;action=edit">Edit This Post</a></span>
<!-- /post details -->
</li>
</ul>
<p class="moreLink" style="margin-top: -5px;"><a href="https://www.lib.jmu.edu/category/carrier-renovation/">more…</a></p>
</div>
</div>
<div class="twofourth boxshadow boxborder" style="height: 437px;">
<div class="h2border">
<h2>FAQs</h2>
</div>
<div style="padding: 10px;">
<div id="s-la-widget-17004" class="s-la-widget s-la-widget-embed">
<section id="s-la-widget-body-17004">
<div id="s-la-content-faqlist-17004" class="s-la-content-faqlist s-la-content clearfix">
<ul class="list-unstyled">
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/379101" target="_parent">How can I access books in storage?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 09, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">22</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/374684" target="_parent">How will I access library services while Carrier is closed for construction?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 09, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">323</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/379430" target="_parent">Where will I be able to use a microform reader machine to look at microfilm, microfiche, and other microform formats?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 09, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">33</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/374686" target="_parent">Where can I access in-person library services and resources during construction?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 09, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">104</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/379100" target="_parent">Will there be space for books in the renovated and expanded Carrier Library?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 07, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">36</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/374683" target="_parent">Where will students be able to study while Carrier is being renovated and expanded?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 04, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">243</span></span>
</div>
</li>
<li class="s-la-faq-listing">
<div class="s-la-faq-listing-q">
<a href="https://ask.lib.jmu.edu/carrier-renovation/faq/379102" target="_parent">When the renovated and expanded Carrier Library reopens, where will the books and other collections be located?</a>
</div>
<div class="s-la-faq-listing-meta">
<span class="s-la-faq-listing-updated"><span class="metalabel">Last Updated:</span> <span class="metavalue">Nov 04, 2022</span> <span class="divider">|</span></span>
<span class="s-la-faq-listing-views"><span class="metalabel">Views:</span> <span class="metavalue">44</span></span>
</div>
</li>
</ul>
</div>
</section>
</div>
<p class="moreLink"><a href="https://ask.lib.jmu.edu/carrier-renovation/">more…</a></p>
</div>
</div>
</div>
<div class="cf"></div>
<a id="timeline"></a>
<div class="boxshadow boxborder carrierTimeline">
<div class="h2border">
<h2>Carrier in Context: A History of JMU Libraries</h2>
</div>
<iframe loading="lazy" src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1vJ0S5jHwFBaCn1o7soO5l2gBTnTgjtBMEMcg6c34o8w&amp;font=Default&amp;lang=en&amp;initial_zoom=3&amp;height=650" width="100%" height="650" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>
</div>
<p class="has-text-align-center">Questions about the renovation? Contact <a href="mailto:[email protected]">[email protected]</a>.</p>
<div class="cf"></div>
<div class="full">
<a class="post-edit-link" href="https://www.lib.jmu.edu/wp-admin/post.php?post=28365&amp;action=edit">Edit This Page</a>
</div>
</article>
<!-- /article -->
</section>
<!-- /section -->
</main>
<footer class="jmulib-footer full" role="contentinfo">
<div class="onethird" style="text-align: center;">
<a href="https://www.lib.jmu.edu"><img src="https://esaner1.nyc3.cdn.digitaloceanspaces.com/jmu/logo_stacked-white_lg.svg" style="height: 91px" class="footerjmulogo" alt="JMU Libraries Logo"></a>
<div class="footersocialmedia">
<a href="//www.facebook.com/jmulibraries" title="JMU Library Facebook"><span class="visuallyhidden">JMU Library Facebook</span><span class="fa-stack">
<span class="fa fa-circle fa-stack-1x social-foreground" aria-hidden="true"></span>
<span class="fab fa-facebook-f fa-stack-1x social-background" aria-hidden="true"></span>
</span></a>
<a href="//twitter.com/jmuLibraries" title="JMU Library Twitter"><span class="visuallyhidden">JMU Library Twitter</span>
<span class="fa-stack">
<span class="fa fa-circle fa-stack-1x social-foreground" aria-hidden="true"></span>
<span class="fab fa-twitter fa-stack-1x social-background" aria-hidden="true"></span>
</span></a>
<a href="//instagram.com/jmulibraries" title="JMU Library Instagram"><span class="visuallyhidden">JMU Library Instagram</span>
<span class="fa-stack">
<span class="fa fa-circle fa-stack-1x social-foreground" aria-hidden="true"></span>
<span class="fab fa-instagram fa-stack-1x social-background" aria-hidden="true"></span>
</span></a>
<a href="//www.youtube.com/user/jmuLibraries" title="JMU Library Youtube"><span class="visuallyhidden">JMU Library Youtube</span><span class="fa-stack">
<span class="fa fa-circle fa-stack-1x social-foreground" aria-hidden="true"></span>
<span class="fab fa-youtube fa-stack-1x social-background" aria-hidden="true"></span>
</span></a>
</div>
</div>
<div class="onethird" style="text-align: center;">
<h3 style="text-align: center;">Contact Us:</h3>
<div class="footerjmucontact">
<span class="far fa-comment"></span> <a href="https://www.lib.jmu.edu/ask">Ask The Library</a><br>
<span class="fas fa-phone"></span> <a href="tel:+1-540-568-6150">(540) 568-6150</a><br>
<span class="fas fa-map-marker-alt"></span> MSC 1704<br> 880 Madison Dr, <br>Harrisonburg, VA 22807
</div>
</div>
<div class="onethird" style="text-align: center;">
<a href="https://www.lib.jmu.edu/giving" class="givingbuttonlink">
<div class="givingbuttontext">GIVE TO <span class="fas fa-gift"></span>
<div>JMU LIBRARIES</div>
</div>
</a>
</div>
<div class="cf"></div>
<!-- copyright -->
<div class="copyrightfootertext">
© 2022 JMU Libraries |
<a href="https://www.lib.jmu.edu/policies/electronic-resources/">
Electronic Resources Terms &amp; Conditions</a>
|
<a href="https://www.jmu.edu/policies/web-privacy-statement.shtml">
JMU Privacy Statement</a>
|
<a href="https://www.lib.jmu.edu/wp-admin/">Admin Login</a>
|
<a href="//www.jmu.edu">JMU Homepage</a>
</div>
<!-- /copyright -->
</footer>
Raw
script.js
$(document).foundation();
// Define nav elements
let nav = document.getElementById('nav2022'),
allButtons = nav.querySelectorAll("button.toggle-submenu");
// Collapse all submenus helper function
function collapseAllSubmenus() {
for (var i = 0; i < allButtons.length; i++) {
allButtons[i].closest('nav').removeAttribute('open');
allButtons[i].closest('li').removeAttribute('open');
allButtons[i].setAttribute('aria-expanded', 'false');
allButtons[i].nextElementSibling.removeAttribute('style');
}
}
// Toggle submenu expanded state
// Top level menu item button onclick
function toggleSubmenu(thisButton) {
// Don't run on mobile nav
if (!matchMedia('(min-width: 965px)').matches) {
return;
};
try {
// If this button is collpased
if (thisButton.getAttribute('aria-expanded') === 'false') {
// First collapse all buttons and submenus in case others are expanded
collapseAllSubmenus();
// Expanded this button and its submenu
thisButton.closest('nav').setAttribute('open', "");
thisButton.closest('li').setAttribute('open', "");
thisButton.setAttribute('aria-expanded', 'true');
thisButton.nextElementSibling.setAttribute(
'style',
'display: flex; height: auto; width: auto; overflow: visible; clip: auto; position: absolute;'
);
// Else this button is already expanded
// Close it, and no need to close others
} else {
thisButton.closest('nav').removeAttribute('open', "");
thisButton.closest('li').removeAttribute('open', "");
thisButton.setAttribute('aria-expanded', 'false');
thisButton.nextElementSibling.removeAttribute('style');
}
} catch (e) {
console.log('toggleSubmenu():' + e);
}
}
// Collapse all submenus when clicking outside the nav
nav.addEventListener('blur', (event) => {
let navContainsFocus = nav.contains(event.relatedTarget);
if (!navContainsFocus) {
collapseAllSubmenus();
}
}, true);
// Collapse all nav details with Esc key
document.onkeydown = function(event) {
event = event || window.event;
let isEscape = false;
if ("key" in event) {
isEscape = event.key == "Escape" || event.key == "Esc";
} else {
isEscape = event.keyCode == 27;
}
if (isEscape) {
collapseAllSubmenus();
}
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/jmulib-s3/js/jquery.iframeResizer.min.js"></script>
<script src="https://cdn1.lib.jmu.edu/js/scripts.v2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation/foundation.js"></script>
<script src="https://esaner1.nyc3.digitaloceanspaces.com/jmu/dd.js?"></script>
Raw
style.scss
:root {
--jmu-purple: #450084;
--jmu-gold: #cbb677;
}
body {
overflow-y: scroll;
}
#nav2022 {
position: relative;
}
// Screen reader text
.show-for-sr,
.show-on-focus {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
// Skip link
.skip-link {
background: var(--jmu-purple);
color: #fff;
display: flex;
align-items: center;
font-size: 1.5rem;
justify-content: center;
margin: 0.625rem;
padding: 0.5rem 0.875rem;
position: absolute;
transform: translateY(-120%);
transition: transform 0.3s;
z-index: 5;
&:focus {
transform: translateY(0%);
}
}
// Focus
#nav2022,
footer {
a,
button {
&:focus-visible {
outline: var(--jmu-gold) solid medium;
z-index: 100;
}
}
}
#nav2022 .top-bar-section {
a,
button {
&:focus-visible {
outline-offset: -3px;
}
}
}
main,
.breadcrumbs {
a:focus-visible {
outline: var(--jmu-purple) solid medium;
z-index: 100;
}
}
// Button reset
button {
border: 0;
}
// Subtitle reset
#nav2022 .mmsubtitle {
margin-left: 0;
}
// Remove space below logo
.title-area {
line-height: 0;
}
// Top bar
.top-bar {
// Logo
.title-area {
> a {
margin-left: 0.5rem;
}
img {
width: 100%;
max-width: 180px;
margin-top: 0.625rem;
}
}
// Top bar buttons
button {
background-color: inherit;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
padding: 12px 0 12px 0.9375rem;
position: relative;
text-align: left;
// Submenu button toggles
&.toggle-submenu::after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent rgba(128, 128, 128, 0.8);
border-left-style: solid;
margin-right: 0.6375rem;
margin-top: -4.5px;
position: absolute;
top: 50%;
right: 0;
}
// Mobile nav toggle
&.toggle-topbar {
padding: 0 2.5rem 0 0.6375rem;
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -0.5px;
}
&:not(.menu-icon) {
width: 100%;
}
&.menu-icon {
background-color: var(--jmu-purple);
&:after {
content: "";
position: absolute;
display: block;
height: 2px;
top: 50%;
margin-top: -10px;
right: 0.9375rem;
box-shadow: 0 2px 0 0px #ffffff, 0 9px 0 0px #ffffff, 0 16px 0 0px #ffffff;
width: 16px;
}
}
}
// Submenus
ul.dropdown {
padding: 0 0.9375rem 0.9375rem;
// Subtitles
.mmsubtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
}
h2.mmsubtitle {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
h3.mmsubtitle{
font-size: 1rem;
padding-left: 0.9375rem;
}
}
}
// Mobile nav only
@media (max-width: 964px) {
#nav2022 #backlink {
margin-bottom: 0;
}
.top-bar ul.dropdown li a:not(#backlink) {
border-bottom: 1px solid #515151;
}
// Match secondary nav to primary
.subtopbar li .dropdown li:not(.back) {
&.mmsubtitle {
border-top: none;
+ li {
border-top: none;
}
}
}
}
// Desktop nav only
@media (min-width: 965px) {
// Links
// why?
#nav2022 .top-bar-section .dropdown li a {
padding: 8px 0px 8px 15px !important;
line-height: 1.4;
}
// Top Bar
.top-bar {
// Logo desktop
// Better spacing for svg logo and focus
.title-area {
> a {
display: inline-block;
margin: 0.75rem 0 0 0.625rem;
}
img {
max-width: 258px;
margin-top: 0;
padding: 0.25rem;
}
}
// Switch to flex for wrapping of primary and secondary nav
.top-bar-section {
display: flex !important;
flex-direction: column;
align-items: flex-end;
}
// Desktop submenus
ul.dropdown {
background: #333333;
display: flex;
padding-bottom: 0;
}
// Buttons for all navs
button {
// Submenu toggles
// Copy styles from previous use of <a> element for top menu items
&.toggle-submenu {
text-align: center;
width: auto;
&:after {
border-color: rgba(128, 128, 128, 0.8) transparent transparent transparent;
border-top-style: solid;
}
}
}
// Desktop primary nav
.notsubtopbar {
height: 64px !important;
// Button hover or click
li.has-dropdown:hover > button,
button[aria-expanded=true] {
background: #333333;
color: var(--jmu-gold);
}
button {
background-color: var(--jmu-purple);
padding: 1.25rem 1.7rem 0.9375rem 1.25rem;
&:after {
margin-top: 4.5px;
top: 1.40625rem;
}
}
// Submenus for desktop primary nav
li.has-dropdown {
// Open on hover even with javascript disabled (fixes mystyle)
&:hover ul.dropdown {
display: flex;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
}
// Submenu items
ul.dropdown li.has-submenu {
padding-bottom: 0.875rem;
&:nth-last-of-type(2) {
border-right: 1px solid #595959;
padding-right: 1.75rem;
}
&:last-of-type {
border-left: 1px solid #595959;
padding-left: 0.875rem;
padding-right: 0.875rem;
}
}
}
// Links for desktop primary nav
a:focus {
color: var(--jmu-gold) !important;
}
}
// Secondary nav
.subtopbar {
border-top: 0;
margin-top: 0.25rem;
button {
background-color: black;
line-height: inherit;
padding: 5px 1.7rem 5px 0.9375rem;
&:hover,
&[aria-expanded=true] {
background-color: #555555;
color: #fff !important;
}
&:after {
margin-top: -2.5px;
top: 0.85rem;
}
}
ul.dropdown {
flex-direction: column;
min-width: 212px;
padding-bottom: 0.9375rem;
&:focus-within a:focus {
color: var(--jmu-gold) !important;
}
}
}
}
// Javascript enabled support for expand/collapse submenu with button click
// Should eventually be body.js instead of html.yjs
html.yjs .top-bar {
// Hide dropdowns from screen readers so they can be revealed with button click
ul.dropdown {
display: none;
}
// Don't allow hover to open submenus if a submenu has been opened with click
&[open] li:not([open]):hover ul.dropdown {
display: none;
}
}
// Javascript disabled support
// Should eventuall be body:not(.js) instead of html.njs
html.njs .top-bar {
// Primary nav
.notsubtopbar {
// Button and submenu focus styling
// Mimics hover style and make more sense on focus without js since submenus will open
li.has-dropdown:focus-within {
> button {
background: #333333;
color: var(--jmu-gold);
}
ul.dropdown {
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
}
}
}
}
// Foooter
footer {
// First widget
// Better focus styling for image links
> div:first-of-type a {
display: inline-block;
}
}
}
@media (min-width: 1440px) {
.top-bar button {
font-size: 1rem;
}
}
Raw
styles
<link href="https://www.lib.jmu.edu/wp-includes/css/dist/block-library/style.min.css?ver=5.9.3" rel="stylesheet" />
<link href="https://cdn1.lib.jmu.edu/css/normalize.css?ver=1.0" rel="stylesheet" />
<link href="https://jmulib-s3.s3.amazonaws.com/css/mystyle.css?ver=1.91" rel="stylesheet" />
<link href="https://jmulib-s3.s3.amazonaws.com/css/mynav.css?ver=1.7" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment