cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- This demo uses flex grid but you can use float grid too -->

<div class="row">
  <div class="columns">
    <h2 class="demo-title">Magellan</h2>
    <p class="demo-paragraph">Magellan allows you to create navigation that tracks the active section of a page your user is in. It has <code>Smooth Scroll</code> built into it.</p>
    <p class="demo-paragraph"><strong>Setup:</strong> You can use Magellan with any navigation element, like our <a href="menu.html">Menu</a> or your own custom component. Just add the attribute <code>data-magellan</code> to the container, and links to specific sections of your page. Each section needs a unique ID.</p>
  </div>
</div>

<div class="row">
  <div class="columns">
    <ul class="menu expanded" data-magellan>
      <li><a href="#first">First Arrival</a></li>
      <li><a href="#second">Second Arrival</a></li>
      <li><a href="#third">Third Arrival</a></li>
    </ul>
    <div class="sections">
      <section id="first" data-magellan-target="first">
        <h4>First section</h4>
        <p>Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cum obcaecati ratione maiores praesentium a illum tempore expedita aperiam voluptate. Enim a pariatur, illum explicabo dignissimos distinctio sed ducimus, doloremque harum maiores accusamus itaque, aliquid laboriosam! Autem debitis commodi facilis corporis aliquam, ratione odit quas natus placeat dolorum, error vel dolorem quaerat illum omnis non modi animi ipsam fugiat magni distinctio mollitia. Nobis molestiae illo, impedit atque velit, explicabo quaerat repellendus ea asperiores? Maxime temporibus nostrum quas ipsam, ea exercitationem accusamus laboriosam voluptatem, incidunt, ipsa aspernatur, aliquam iste quibusdam reprehenderit iure consequuntur molestiae optio id aliquid quisquam odit assumenda pariatur. Inventore consequatur voluptas veniam ullam aliquam explicabo reiciendis minima porro, quasi ipsa nostrum dignissimos labore, pariatur quam quas natus facilis itaque laudantium cum! Pariatur dignissimos necessitatibus explicabo libero. Quod laboriosam ducimus sunt quaerat eius? Rerum amet dolore ipsum consectetur nemo, sit itaque voluptates molestiae, eaque quae nisi dolorem, ipsa eaque animi tempora. Voluptatum consequatur dolores rerum sed fuga nihil velit enim nemo, eius doloribus voluptates veritatis aspernatur, magni officiis, fugit molestiae. Omnis nulla molestias, tempore qui, nesciunt incidunt unde vero illum ad adipisci animi doloremque</p>
      </section>
      <section id="second" data-magellan-target="second">
        <h4>Second section</h4>
        <p>Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt. Aspernatur facere consequatur exercitationem placeat earum magnam. Animi provident eum vel tenetur accusantium optio inventore, ad voluptas odio, dignissimos ex enim. Qui quam cumque fugit ullam eos maiores culpa ab asperiores incidunt facilis cum doloremque nam, non in ut consequatur. Molestiae quia necessitatibus accusantium ipsa doloribus debitis ex laudantium suscipit aliquid recusandae pariatur libero veniam maxime, voluptatum tempore, dolore laborum mollitia incidunt numquam harum impedit! Sit dolores commodi ipsam dolor, velit itaque quae totam harum quis fugiat molestiae quod excepturi tempore aut consequuntur repellat quia officiis tenetur sed, doloribus nobis nam nulla neque? Porro perferendis mollitia qui rem. Ducimus similique modi, saepe dicta voluptatem cupiditate velit illo consequuntur neque fugit, nemo non deserunt ex enim dolor sint doloremque eveniet, iusto architecto autem tempore mollitia asperiores, fugiat tempora veniam. Tempore ipsam facilis inventore sit. Amet, similique, autem nobis laudantium adipisci repellendus quas officiis iure nemo error, quaerat, blanditiis! Ex aliquid repudiandae cum, consectetur voluptas adipisci, fugit, deleniti atque nostrum, labore necessitatibus. Totam, earum assumenda! Asperiores obcaecati fuga provident nobis natus consequuntur molestias harum modi error, voluptate velit tenetur magni vitae odio soluta earum incidunt. Ea sunt optio modi ex magni ipsa iure earum, labore tempora ipsam repellendus quas enim eos a voluptas quaerat libero quod provident soluta, fugiat numquam. Perferendis qui accusantium consectetur quia est obcaecati, ullam alias molestiae illo repellat praesentium quas ipsum molestias, libero, perspiciatis inventore quos suscipit officiis vero! Temporibus, voluptas quod? Deleniti corrupti officia, dolores cum enim molestiae numquam quidem facilis commodi assumenda, quasi, officiis eum ex cumque. Fuga in explicabo, rerum quaerat dolor impedit laudantium</p>
      </section>
      <section id="third" data-magellan-target="third">
        <h4>Third section</h4>
        <p>Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt. In debitis ex repudiandae et, earum, distinctio deserunt beatae quibusdam quidem laborum ea ut! Veniam tempora quia perspiciatis illum accusantium voluptatibus eligendi aspernatur ea. Tempora pariatur quasi aliquam nulla rem porro mollitia quas minima accusantium, sit repellat in hic, minus neque sed perspiciatis praesentium libero similique quos nobis labore iste! Placeat nobis quidem accusantium facere consequatur ut, unde nulla inventore possimus, quam atque a deserunt similique ad deleniti voluptate qui? Minus porro deserunt, labore debitis cumque alias autem amet maxime nam obcaecati hic aspernatur doloribus veniam! Culpa aliquid, corporis nemo odit odio error enim fuga! Odit numquam modi ullam sapiente voluptate nemo deserunt autem quaerat, eos placeat temporibus voluptates ducimus quos blanditiis excepturi vero aut doloremque laudantium possimus id fugit. Quos asperiores magni reprehenderit illum, ipsam cupiditate unde quam. Corporis, nulla, doloribus! Minima ipsa sapiente, eligendi maxime possimus suscipit fuga nulla dicta quidem odio doloribus assumenda delectus, dolor? Odit at minus voluptas saepe officiis ipsa dolores ad possimus, facilis eligendi laudantium fugit, alias nulla minima sapiente quasi distinctio corporis temporibus voluptatum illum pariatur similique autem ea delectus! Harum eveniet quasi incidunt nihil impedit minus alias, sapiente omnis maxime error illo! Consectetur facere quisquam non aperiam, impedit quos atque pariatur totam quis provident alias placeat mollitia laboriosam soluta aspernatur modi, officiis nesciunt cumque. Ea magni earum ab, aliquam dicta omnis, eaque id dolore delectus iure repellat optio voluptas doloremque aut harum ad aperiam. Nulla, numquam, iure. Illum, harum neque non quae! Ab officiis, odio praesentium laborum maiores qui modi, voluptatum cupiditate corporis assumenda. Suscipit delectus, eaque dolore rem optio. Dolorem eum porro consequuntur, tempore quam sunt nulla inventore voluptates, minus non fugiat iste nobis doloremque dolorum beatae. Dolor ullam corrupti nesciunt aperiam perferendis, sit aliquid itaque eius perspiciatis illum maiores dicta repudiandae eum nostrum officiis architecto ipsa incidunt error placeat! Dignissimos nobis nihil magni sit blanditiis et.</p>
      </section>
    </div>
  </div>
</div>
            
          
!
            
              /* Demo Styles */

body {
  padding: 2rem 1rem;
}

.sections,
.demo-title,
.demo-paragraph {
  padding: 0 15px;
}

.sections {
  margin-top: 0.5rem;
}
            
          
!
999px
Loading ..................

Console