Explore Navigation // UI

Developer
Brian Haferkamp
Size
9,984 Kb
Views
10,120
  1. Explore Navigation // UI Previews
  2. Explore Navigation // UI HTML Codes
  3. Explore Navigation // UI CSS Codes
  4. Explore Navigation // UI JS Codes

How do I make an explore navigation // ui?

A hidden navigation concept that also utilizes a large navigation pane to add more context to your navigation. Just click on the right side of the viewport to open the navigation pane.. What is a explore navigation // ui? How do you make a explore navigation // ui? This script and codes were developed by Brian Haferkamp on 29 October 2022, Saturday.

Explore Navigation // UI Previews
IQ Test

Explore Navigation // UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Explore Navigation // UI</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Source+Sans+Pro" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <header> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolorem aliquam a, quas dicta incidunt alias optio qui sed sint.</h1> </header> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit consectetur praesentium itaque, deleniti qui quia aut eaque minus id! Fuga laboriosam tempora repellendus <a href="#">veritatis</a> ab natus libero in neque culpa dolorem nobis perspiciatis, cum dolores similique ducimus minima reiciendis veniam sunt fugit quas voluptate? Saepe asperiores dicta possimus, fugit omnis consectetur tempore ab, recusandae sunt non expedita facere delectus deleniti suscipit! Nisi quae blanditiis, dignissimos nihil at ut aperiam inventore ratione neque doloremque? Quos quisquam aut quas vero labore obcaecati, iure doloribus accusamus beatae perferendis nostrum soluta est quidem eligendi sint dolore hic quod illo rerum molestias recusandae nam. Dolorem repellendus exercitationem, similique possimus aliquam, dolorum odit reiciendis! Nulla sint et neque nostrum minima quidem pariatur facere aspernatur explicabo delectus quibusdam eos esse, eius. Quod corporis repellat, distinctio eum quisquam, deleniti consequatur nisi similique placeat illo optio tempore, nostrum. Sapiente blanditiis id praesentium, repellendus quas sint minus eum esse similique dignissimos, assumenda repudiandae nostrum, magni illo voluptates vel placeat dolor error aspernatur ea minima debitis, consequuntur ducimus commodi. Omnis maiores placeat suscipit quae aut, neque quas veniam, libero tenetur dicta. Fuga adipisci ullam officiis voluptatibus dolorem saepe enim sed nostrum ad explicabo, inventore, itaque laboriosam qui ab. Tempore rem debitis dolorum nulla inventore sed, esse voluptate illum tempora quibusdam velit optio atque eos illo perferendis ab veniam. Cupiditate, dolorem fugiat nihil ex itaque esse magnam aperiam asperiores dicta! Quos dolore odio praesentium iste odit blanditiis fugiat eveniet est ipsa totam aspernatur enim, voluptatibus sunt nihil. Omnis sit perferendis velit vitae ipsum tenetur asperiores ab similique cupiditate facere ipsam in optio magni earum eaque alias quasi illo tempore voluptate, vel ut. Iusto porro quia dicta ratione nulla voluptate dolorem aspernatur similique doloribus omnis consectetur voluptatibus, voluptatum officia architecto, quae. Saepe dicta et ab a magnam adipisci nostrum perspiciatis dolore autem cupiditate doloribus consequatur itaque, harum porro assumenda sit animi rem consectetur aperiam, earum excepturi officia fuga. Inventore provident voluptatem facilis repudiandae nulla delectus quisquam, in laudantium modi et eius explicabo laborum placeat ad, totam odit neque. Consequuntur accusantium consectetur, voluptate amet magnam minus dolorum eos, fugit, nulla, maxime unde porro in expedita. Cumque reiciendis, vitae omnis tempore magnam inventore, exercitationem enim sequi sapiente est, praesentium explicabo aperiam quasi ea quidem impedit iste. Modi vitae magni quaerat magnam animi adipisci eveniet facere, laboriosam vel, odit, incidunt eligendi quibusdam quidem veniam aspernatur possimus tenetur deleniti eum culpa porro nemo dolore minus quia tempore. Vero laudantium fugiat quia amet. Nostrum aperiam ex repellat porro harum rem delectus pariatur vel quaerat tempora recusandae labore beatae excepturi architecto laudantium soluta, esse veniam, eveniet voluptatum natus facilis aut? Hic dicta atque, debitis nemo, vitae voluptatem accusantium consectetur esse sequi ullam numquam asperiores eaque? Facilis sed illum eligendi molestias fuga id porro quod vel et, assumenda aperiam delectus obcaecati hic, sint. Dolor, velit, numquam consequuntur qui quae, similique, ut quis harum aut vel rem! Dolorem excepturi tempore, quidem debitis vero temporibus perspiciatis vel, dicta quisquam neque distinctio, porro ipsum natus deleniti atque! Eius pariatur libero dignissimos nihil sunt nulla ratione odit soluta velit ipsum fugiat maxime esse possimus officia, temporibus quidem quasi quam aspernatur neque, officiis facilis eaque eligendi tenetur. Omnis vitae aliquid inventore odio, consectetur aut autem aspernatur porro. Quam asperiores, tenetur, ab, error nostrum, aut ipsa doloribus aliquid repellendus cum est quos modi neque sunt nesciunt eligendi a molestias ducimus itaque distinctio expedita voluptatibus. Vitae provident, nisi eum ipsam labore nulla distinctio sit inventore qui animi sunt fugiat quos saepe, reiciendis corporis, blanditiis natus beatae repellat. Magni explicabo quae nulla rerum blanditiis laboriosam ullam enim porro dolore earum ab, totam saepe. Quod repellendus et expedita dolorem voluptatibus laudantium commodi distinctio cum quam autem, blanditiis! Omnis commodi recusandae maxime, tempore iusto, voluptatem nam cum quas ipsa voluptatum quos quam impedit quaerat corrupti dolorum quae quisquam eligendi dolorem incidunt mollitia officia libero! Hic consequatur modi culpa nisi eligendi enim quod harum, facilis est impedit repellendus tenetur, delectus beatae quis sit magni rerum nam voluptates ea. Quidem quae sint, dolores doloremque doloribus quod atque. Tempore accusamus sint perferendis esse rem suscipit dolores pariatur rerum sunt beatae incidunt consequatur eaque dignissimos quasi excepturi aliquam reiciendis nihil temporibus officiis autem a magnam hic consequuntur labore, minus. Maiores unde molestiae sunt veniam saepe mollitia, ipsum assumenda laboriosam, atque quasi fugit accusantium voluptate a! Laborum recusandae unde incidunt enim eligendi dicta odit, aut quasi, perspiciatis et maxime, voluptatum non eos porro. Fugiat quos nisi facilis ratione obcaecati accusamus veniam minus odit, libero aperiam delectus laborum temporibus sequi, eos aliquam similique debitis autem laudantium. Laboriosam perferendis nulla reprehenderit iure ipsam delectus, eaque dolores voluptates neque autem, adipisci. Cumque cupiditate eligendi labore, incidunt, nobis veniam sunt beatae sapiente dolore iusto voluptas tenetur reiciendis, eius natus. Voluptas sed magni, eveniet natus cumque sunt modi maiores molestias animi, recusandae officia dolores minima asperiores distinctio cupiditate, eum nam architecto sit harum tempora optio minus nulla accusantium! Odit illo atque non voluptatum reiciendis aperiam dolore repellat autem quos. Ipsam magnam vitae quaerat blanditiis ex nisi eos distinctio minima aliquam et officia ratione, magni laborum, similique earum reprehenderit molestias commodi sapiente optio reiciendis. Sunt facere vitae, consequatur repudiandae perferendis vero autem! Quas laudantium omnis aut vel voluptas neque autem. A, tenetur, expedita! Nesciunt rerum reprehenderit recusandae magnam suscipit labore nobis ea iure iste ipsam, tempora accusantium molestiae tempore eligendi aspernatur, excepturi illo quis pariatur. Voluptas incidunt inventore, quas magnam impedit accusamus dolorem soluta architecto animi repellendus molestiae, saepe fugit facere quibusdam nisi! Dolorem quisquam accusantium tempore asperiores delectus atque tempora voluptatibus veritatis, doloremque ullam dignissimos dolores perferendis debitis ut aliquam ipsa repudiandae facere ipsum, saepe maiores voluptatum, mollitia necessitatibus cum temporibus? Incidunt necessitatibus suscipit beatae fuga asperiores neque, odio esse, praesentium voluptatem sapiente repudiandae assumenda dolores dicta sunt recusandae, porro pariatur ea provident velit aspernatur a quidem harum architecto! Enim accusamus veniam non reprehenderit reiciendis, id quod, quaerat molestiae labore at sapiente rerum facilis dolor nihil dicta neque doloremque cum! Amet voluptatibus nihil eligendi quae, ipsum dolorem, perspiciatis molestias, veniam repudiandae numquam deserunt optio? Consequuntur culpa accusamus sint tempora adipisci.</p> </article>
</main>
<div class="nav-trigger"> <p class="nav-close hide"><i class="zmdi zmdi-close"></i></p>
</div>
<section class="navigation"> <div class="navigation-inner"> <nav class="nav-wrapper"> <h1><i class="zmdi zmdi-map"></i> Explore</h1> <h2>Pages</h2> <ul class="pages-wrapper"> <li><a href="page1">About</a> <p>Learn more about what we do, why we do it, and our team</p> </li> <li><a href="page1">Services</a> <p>We do more than design pretty sites! Read about all the services we offer.</p> </li> <li><a href="page1">Pricing</a> <p>Curious about how much it will cost? We break it all down for you.</p> </li> <li><a href="page1">Contact</a> <p>Ready to get started or have a question? We're happy to talk to you!</p> </li> </ul> <h2>FAQ</h2> <div class="button-wrapper"> <button>How much do you charge?</button> <button>How long does it take to create a website?</button> <button>What are some sites you've created before?</button> <button>How long have you been making websites?</button> <button>Who actually makes the websites?</button> <button>Do you take credit cards?</button> </div> </nav> </div>
</section>
<div class="border-nav-trigger"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Explore Navigation // UI - Script Codes CSS Codes

* { box-sizing: border-box;
}
p,
a,
button { font-family: "Source Sans Pro", sans-serif;
}
h1,
h2,
h3,
h4 { font-family: "Montserrat", sans-serif;
}
main { margin-right: 5vw;
}
article p { color: #666; line-height: 1.5;
}
.button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 1rem;
}
button { background: #444; color: white; border: 1px solid #444; padding: 1rem; line-height: 1.5; cursor: pointer; -webkit-box-flex: 0; -ms-flex: 0 1 45%; flex: 0 1 45%; margin: 0.5rem 1rem 0.5rem 0; -webkit-transition: background 200ms ease; transition: background 200ms ease;
}
button:hover { background: rgba(68, 68, 68, 0.8);
}
.navigation { position: fixed; top: 0; left: 100vw; width: 100vw; height: 100vh; background: white; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); -webkit-transition: left 300ms ease; transition: left 300ms ease;
}
.nav-out { left: 0;
}
@media (min-width: 1100px) { .navigation { width: 40vw; height: 100vh; } .nav-out { left: 60vw; }
}
.navigation-inner { height: 90vh; overflow-y: auto;
}
@media (min-width: 1100px) { .navigation-inner { padding: 2rem; }
}
.nav-trigger { position: fixed; bottom: 0; right: 0; font-size: 2rem; margin: 0; cursor: pointer; z-index: 100; background: #444; color: white;
}
.nav-trigger p { margin: 0; padding: 5px 15px;
}
.nav-wrapper h1 { margin: 0; text-align: center; font-size: 0.8rem; font-weight: 400; background: #444; color: white; padding: 0.5rem 0; font-family: "Open Sans Condensed", sans-serif;
}
.nav-wrapper i { margin-right: 0.5rem;
}
.nav-wrapper h2 { padding: 0 1rem; margin-top: 2rem;
}
.pages-wrapper { list-style: none; padding: 0 1rem;
}
.pages-wrapper p,
.pages-wrapper a { font-size: 0.8rem;
}
.pages-wrapper a { text-decoration: none; text-transform: uppercase;
}
.pages-wrapper p { margin: 0.5rem 0 1rem;
}
.pages-wrapper li { margin-top: 1.5rem;
}
.hide { display: none;
}
.border-nav-trigger { position: fixed; width: 0; height: 100vh; top: 0; right: 0; border-left: 5vw solid #f9f9f9; margin: 0; padding: 0; z-index: 50;
}
.hide-border-color { border-left: 5vw solid transparent;
}

Explore Navigation // UI - Script Codes JS Codes

// traditional menu toggle button
$('.nav-open').on('click', function() { $(this).addClass('hide'); $('.nav-close').removeClass('hide'); $('.navigation').addClass('nav-out');
});
// unconventional hidden nav on right side of viewport
$('.border-nav-trigger').on('click', function() { $(this).addClass('hide-border-color'); $('.navigation').addClass('nav-out'); $('.nav-close').removeClass('hide');
});
// close menu on nav close click
$('.nav-close').on('click', function() { $(this).addClass('hide'); $('.nav-open').removeClass('hide'); $('.navigation').removeClass('nav-out'); setTimeout(function() { $('.border-nav-trigger').removeClass('hide-border-color'); }, 350);
});
Explore Navigation // UI - Script Codes
Explore Navigation // UI - Script Codes
Home Page Home
Developer Brian Haferkamp
Username brianhaferkamp
Uploaded October 29, 2022
Rating 3
Size 9,984 Kb
Views 10,120
Do you need developer help for Explore Navigation // UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian Haferkamp (brianhaferkamp) Script Codes
Name
Brutal, Bro
Travel Blog Design with Sticky Nav and Sidebar
Emoji-Driven Survey
RADIOLOGY
2-Up Magazine Layout
Follow Your Heart
Brutalism Web Design School
Gradient Transitions Between Sections
Creating a CSS Flexbox Grid
Full-Width Hero with Image Using Flexbox
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!