Vue.js Recipe - Slideout Menu
How do I make an vue.js recipe - slideout menu?
What is a vue.js recipe - slideout menu? How do you make a vue.js recipe - slideout menu? This script and codes were developed by Andy Merskin on 10 August 2022, Wednesday.
Vue.js Recipe - Slideout Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue.js Recipe - Slideout Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/http___codepen_io_andymer.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Page Contents -->
<div class="info"> <h1 class="title"> <pre><zap-slideout></pre> </h1> <p class="description">Give it a jolt. Click <strong>Open</strong> at the top.</p>
</div>
<zap-slideout></zap-slideout>
<!-- Zap Slideout Template -->
<script id="zap-slideout" type="text/x-template"> <div class="zap-slideout" :class="{ isOpen: isOpen }"> <div class="zap-slideout-opener" @click="toggle">{{openerText}}</div> <ul class="zap-slideout-menu"> <li class="zap-slideout-menu-item"> <img class="zap-emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/zap-emoji.svg" alt="Zap Emoji" /> </li> <li class="zap-slideout-menu-item" v-for="item in menu">{{item}}</li> <li class="zap-slideout-menu-item--small" v-for="item in smallMenu">{{item}}</li> </ul> </div>
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.22/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Vue.js Recipe - Slideout Menu - Script Codes CSS Codes
/*
Some fancy Pen styling */
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #fff; background-color: #2c3e50; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box;
}
strong { font-weight: 600;
}
.info { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center;
}
.title { font-size: 24px; font-weight: 600;
}
.description { margin-top: 20px;
}
/*
Our Zap Slideout styles... */
.zap-slideout { position: relative; width: 240px; height: 100vh; padding: 30px; background-color: #34495e; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.6s ease(out-cubic); transition: -webkit-transform 0.6s ease(out-cubic); transition: transform 0.6s ease(out-cubic); transition: transform 0.6s ease(out-cubic), -webkit-transform 0.6s ease(out-cubic);
}
.zap-slideout.isOpen { -webkit-transform: translateX(0); transform: translateX(0);
}
.zap-slideout-opener { position: absolute; top: 20px; left: 100%; margin-left: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; cursor: pointer;
}
.zap-slideout-opener:hover { text-decoration: underline;
}
.zap-slideout-menu { font-weight: 600; color: #fff;
}
.zap-slideout-menu-item,
.zap-slideout-menu-item--small { cursor: pointer;
}
.zap-slideout-menu-item:hover,
.zap-slideout-menu-item--small:hover { text-decoration: underline;
}
.zap-slideout-menu-item + .zap-slideout-menu-item,
.zap-slideout-menu-item--small + .zap-slideout-menu-item, .zap-slideout-menu-item +
.zap-slideout-menu-item--small,
.zap-slideout-menu-item--small +
.zap-slideout-menu-item--small { margin-top: 20px;
}
.zap-slideout-menu-item { font-size: 36px;
}
.zap-slideout-menu-item + .zap-slideout-menu-item--small { margin-top: 30px;
}
.zap-slideout-menu-item--small { font-size: 18px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.08em; color: #ecf0f1;
}
/* The famed Zap agency logo (TM) */
.zap-emoji { height: 120px;
}
Vue.js Recipe - Slideout Menu - Script Codes JS Codes
'use strict';
/*
Zap Slideout - Vue Component
This is our component definition. It tells Vue to look for our template, which is the little snippet of HTML that will be used for our component. Every time we use our component in HTML as <zap-slideout>, this template gets plopped into our page, which makes it reusable without pasting it everywhere! */
Vue.component('zap-slideout', { template: '#zap-slideout', data: function data() { return { openerText: 'Open', isOpen: false, menu: ['Home', 'Work', 'Contact'], smallMenu: ['Tips', 'Resources', 'Shenanigans'] }; }, methods: { open: function open() { this.openerText = 'Close'; this.isOpen = true; }, close: function close() { this.openerText = 'Open'; this.isOpen = false; }, toggle: function toggle() { if (this.isOpen) { this.close(); } else { this.open(); } } }
});
/*
Start the engines...
Vue.js has to be started in order for your components to work in your page. Passing 'body' to the `el` property tells Vue it should keep track of everything inside our <body> tag. In this case, everything inside CodePen's HTML panel could be considered our page body.
*/
var app = new Vue({ el: 'body'
});
Developer | Andy Merskin |
Username | andymerskin |
Uploaded | August 10, 2022 |
Rating | 3 |
Size | 5,189 Kb |
Views | 378,488 |
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!
Name | Size |
Vue.js Intro Demo | 2,077 Kb |
A Pen by Andy Merskin | 4,844 Kb |
Parallax Depth Cards | 5,579 Kb |
Animated Dropdowns with scaleY | 2,507 Kb |
Typtic for OSX - Night Mode | 3,443 Kb |
GSS Transitions | 2,097 Kb |
Wires Loading Animation | 3,813 Kb |
Text Antialiasing Differences | 2,725 Kb |
Vue.js Starter | 1,268 Kb |
SVG Stroke Drawing Effect on Focus | 2,399 Kb |
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!
Name | Username | Size |
Css3 slide | Nakome | 3,190 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Svg sky | Omodev | 7,070 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!