Sliding Navigation Panel
Thanks to the sliding navigation panel, you can place the website menu outside of the browser screen. This solution is fancy and very effective.
The sliding navigation panel slide out from the right to left or left to right side of browser screen. When you click the toggle icon, the main content is pushes to the left or right.
The default position of the sliding navigation panel is on the right side of the browser screen.
Practical utilization of the sliding navigation panel you can find in templates
Designery and Fullwidth Plus
The correct structure of a website with the sliding navigation panel:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="size-1280">
<!-- Sliding nav panel -->
<nav class="slide-nav aside-nav">
<ul>
...
<ul>
</nav>
<!-- End of Sliding nav panel -->
<!-- Content -->
<section class="slide-content">
<header>
...
</header>
<section class="text-center">
...
</section>
<footer>
...
</footer>
</section>
<!-- End of Content -->
</body>
</html>
Move the sliding navigation panel to the left
If you want to move the sliding navigation panel to the left side of the screen, add the class “slide-to-left” to the “body” element:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="size-1280 slide-to-left">
<!-- Sliding nav panel -->
<nav class="slide-nav aside-nav">
<ul>
...
<ul>
</nav>
<!-- End of Sliding nav panel -->
<!-- Content -->
<section class="slide-content">
<header>
...
</header>
<section class="text-center">
...
</section>
<footer>
...
</footer>
</section>
<!-- End of Content -->
</body>
</html>
