Demo of site navigation with the <details> element

This page is a demo of site navigation using the <details> HTML element. Try opening it in different browsers and devices. This page contains no JavaScript. The code for this page is available here.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius purus metus, id finibus arcu aliquam et. Integer nec ligula est. Morbi nec ipsum eu felis sodales hendrerit. Cras posuere dui at cursus tempus. Nullam eget malesuada ante, sed dictum magna. Mauris rhoncus mauris sed justo ornare faucibus. Vivamus convallis lorem eget dui sagittis, non placerat ante dignissim. Aliquam consectetur finibus magna nec aliquam. Maecenas porta sagittis sapien, et aliquet est aliquet in. Pellentesque non ullamcorper nisi. Curabitur urna metus, efficitur vel ornare ac, dictum vel augue.

Section 2

Nam dapibus id lacus in rutrum. Curabitur ut sagittis nulla. Aliquam erat dui, mollis eget ipsum id, bibendum fermentum est. Etiam viverra aliquam tortor vitae venenatis. Donec et dictum magna, in dapibus ligula. Quisque convallis interdum sodales. Aliquam dignissim dolor id nunc laoreet blandit. Proin luctus viverra dictum. Cras quis erat dictum, pellentesque quam at, ullamcorper sem. Donec non urna neque. Fusce accumsan nisl vitae maximus tincidunt. Integer aliquam dui at faucibus vehicula. Integer at vestibulum libero. Duis vestibulum nibh condimentum est pellentesque, bibendum aliquet augue volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas cursus ultricies tortor, quis facilisis nulla rhoncus at.

Section 3

Cras sed pulvinar enim. In ornare pharetra ante, eu pharetra felis euismod sed. Sed non sem augue. Praesent iaculis molestie lectus. Suspendisse aliquet scelerisque hendrerit. Mauris vel ligula ullamcorper, gravida metus et, tempus lacus. Etiam non porttitor urna. Aenean malesuada luctus ante, nec eleifend metus lobortis id. Suspendisse nec consequat elit, vel mattis leo. Mauris sed aliquam erat.

Section 3 subsection 1

Integer pharetra, nisi at pulvinar ornare, erat ipsum porttitor libero, eu porta metus dolor sit amet nisi. Vestibulum porta odio et lectus lacinia, a elementum lectus finibus. Ut blandit, est in tempor fermentum, ante velit faucibus leo, sed cursus orci ante ac nunc. Vestibulum mauris ex, porta vitae ornare sit amet, efficitur sit amet turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam at mi in neque sollicitudin egestas. Morbi a iaculis lectus, vitae dapibus ante. Fusce ac tincidunt nunc. Praesent consequat luctus lorem, ac porttitor sem interdum at.