Striped Sliding Navigation

Developer
Sicontis
Size
4,272 Kb
Views
64,768
  1. Striped Sliding Navigation Previews
  2. Striped Sliding Navigation HTML Codes
  3. Striped Sliding Navigation CSS Codes
  4. Striped Sliding Navigation JS Codes

How do I make an striped sliding navigation?

Popular on a lot of websites, this sliding strip navigation is built with Flexbox and a little Vue JS. Based on a tutorial by George Martsoukos on Tutsplus, I've given it a Rogue One spin.. What is a striped sliding navigation? How do you make a striped sliding navigation? This script and codes were developed by Sicontis on 12 July 2022, Tuesday.

Striped Sliding Navigation Previews
IQ Test

Striped Sliding Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Striped Sliding Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <header> <h1>ROGUE ONE</h1> <div class="subtitle"> <div>A</div> <img src="http://fontmeme.com/permalink/161222/01d7b8fac54fa48e3f2694ca834bf429.png" /> <div>STORY</div> </div> </header> <section> <h2>THE REBELS</h2> </section> <div class="wrapper"> <a href="" v-for="item in characters" class="character" :style="{ 'background-image': 'url(' + item.image + ')' }"> <div class="overlay-outer"> <div class="overlay-inner"> <h2>{{ item.name }}</h2> <div class="info"> <p>Played by: <strong>{{ item.actor }}</strong></p> <p>{{ item.bio }}</p> </div> </div> </div> </a> </div> <footer> <h4>All images and info is sourced from <a href="http://www.starwars.com">Star Wars.com</a><br> <a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-striped-layout-with-flexbox--cms-27272">Slider navigation</a> tutorial by <strong>George Martsoukos</strong></h4> </footer>
</div> <script src='https://unpkg.com/[email protected]/dist/vue.js'></script> <script src="js/index.js"></script>
</body>
</html>

Striped Sliding Navigation - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
body { font-family: "Helvetica Neue", sans-serif; display: flex; justify-content: center; background-color: #161616;
}
h2, p { color: rgba(255, 255, 255, .8);
}
h2 { font-weight: 200;
}
#app { width: 80vw;
}
header { padding: 50px 0 20px 0; display: flex; flex-direction: column; align-items: center;
}
header h1 { width: 480px; margin: 0; text-align: center; color: #CFB195; font-weight: 100; font-size: 4em; letter-spacing: 10px; font-family: 'Cormorant Garamond', serif; border: 2px solid #CFB195; border-radius: 5px;
}
header .subtitle { color: #CFB195; font-family: 'Cormorant Garamond', serif; letter-spacing: 3px; font-size: 14px; display: flex; align-items: center; background-color: #191515; padding: 5px; margin-top: -10px;
}
header .subtitle img { height: 12px; padding: 0 10px;
}
section { padding: 0 0 40px 0; display: flex; justify-content: center;
}
section h2 { color: #CFB195; font-family: 'Cormorant Garamond', serif; font-size: 2em; letter-spacing: 8px;
}
.wrapper { display: flex; height: 100vh; border: 5px solid #CFB195;
}
.wrapper a { position: relative; flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: flex 1s;
}
.wrapper a:hover { flex: 3;
}
.wrapper .overlay-outer { display: flex; justify-content: center; align-items: center; padding: 0 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: background-color: .4s;
}
.wrapper a:hover .overlay-outer { background-color: rgba(0, 0, 0, .5);
}
.wrapper .overlay-inner * { visibility: hidden; opacity: 0; transform-style: preserve-3d​;
}
.wrapper .overlay-outer h2 { transform: translate3d(0, -60px, 0);
}
.wrapper .overlay-outer div.info { transform: translate3d(0, 60px, 0);
}
.wrapper a:hover .overlay-inner * { opacity: 1; visibility: visible; transform: none; transition: all .5s .5s;
}
.wrapper .info { font-size: 14px; line-height: 1.7em; padding: 0 5px;
}
.wrapper .info strong { font-size: 16px;
}
.wrapper .character { background-color: #000000;
}
@media screen and (max-width: 700px) { .wrapper { flex-direction: column; } .wrapper a:hover { flex: 1; } .wrapper a:hover .overlay-outer { background-color: transparent; } .wrapper .overlay-outer h2, .wrapper .overlay-outer div.info { opacity: 1; visibility: visible; transform: none; }
}
footer { padding: 30px 0; display: flex; justify-content: center;
}
footer h4 { font-size: 14px; color: rgba(255, 255, 255, .8); font-weight: normal; text-align: center; line-height: 1.8em;
}
footer h4 a { text-decoration: none; color: #CFB195;
}

Striped Sliding Navigation - Script Codes JS Codes

new Vue({ // ELEMENT el: '#app', // DATA data: { characters: [ { name: 'Jyn Erso', actor: 'Felicity Jones', bio: 'Putting behind a checkered past by lending her skills to a greater cause, Jyn Erso is impetuous, defiant, and eager to bring the battle to the Empire. Used to operating alone, she finds higher purpose by taking on a desperate mission for the Rebel Alliance.', image: 'http://img.lum.dolimg.com/v1/images/jyn-erso_ccf70c46.jpeg?region=349%2C0%2C1165%2C654&width=768' }, { name: 'Cassian Andor', actor: 'Diego Luna', bio: 'An accomplished Alliance Intelligence officer with combat field experience, Captain Cassian Andor commands respect from his Rebel troops with his ability to keep a cool head under fire and complete his missions with minimal resources.', image: 'http://img.lum.dolimg.com/v1/images/cassian-andor-main_216e7233.jpeg?region=0%2C0%2C1560%2C878&width=768' }, { name: 'K-2S0', actor: 'Alan Tudyk', bio: 'A reprogrammed Imperial security droid now loyal to the Alliance, K-2SO is an alarming sight standing within a secret Rebel base. The pragmatic droid is an effective insertion agent, as he can blend in perfectly at Imperial installations and outposts.', image: 'http://img.lum.dolimg.com/v1/images/k-2s0-main-b_73a8fed8.jpeg?region=0%2C0%2C1560%2C878&width=768' }, { name: 'Chirrut Imwe', actor: 'Donnie Yen', bio: 'Deeply spiritual, Chirrut Îmwe believes all living things are connected through the Force. His sightless eyes do not prevent him from being a highly skilled warrior. Though he lacks Force abilities, this warrior monk has rigorously honed his body through intense physical and mental discipline.', image: 'http://img.lum.dolimg.com/v1/images/chirrut-imwe_5ed7457a.jpeg?region=395%2C0%2C1165%2C654&width=768' }, { name: 'Baze Malbus', actor: 'Jiang Wen', bio: 'The harsh reality of his Imperial-occupied home world has hardened Baze Malbus into a pragmatic soldier and a crack shot with his heavy repeater cannon. Baze has a bravado that provides a marked contrast to the spiritual centeredness of his best friend and moral compass, Chirrut Îmwe.', image: 'http://img.lum.dolimg.com/v1/images/baze-malbus_467fe1ea.jpeg?region=199%2C0%2C1163%2C654&width=768' }, { name: 'Bodhi Rook', actor: 'Riz Ahmed', bio: 'A former Imperial pilot, Bodhi has strong piloting and technical skills that he will put to use for the Rebellion. Ever practical, but highly anxious, Bodhi must gather his courage to bring the battle to the Empire.', image: 'http://img.lum.dolimg.com/v1/images/bodhi-rook_1d3c1b58.jpeg?region=0%2C160%2C1560%2C880&width=768' } ] }
});
Striped Sliding Navigation - Script Codes
Striped Sliding Navigation - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 12, 2022
Rating 3
Size 4,272 Kb
Views 64,768
Do you need developer help for Striped Sliding Navigation?

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!

Sicontis (Sicontis) Script Codes
Name
Vue JS Typeahead
Wikipedia Search
Laracasts Nav Bar
VueJS Reddit Component
Simple Day Timer
Subnav Reveal Animation
Sign Up Form
Bank Quick Transfer Interface Vue JS
Weight Converter
Form Elements
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!