Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- body { margin: 0; font: .9em lucida grande, helvetica, sans-serif }
- header { padding: 1em 1.4em; background: #f3f3f3; border-bottom: 1px solid #ddd }
- input { padding: .4em }
- li { list-style: none; padding: 1.2em 0; border-bottom: 1px solid #eaeaea; color:rgba(0,0,0,.6); text-shadow:rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }
- </style>
- <header>
- <input placeholder=Search autofocus class=search><!-- search.js input -->
- </header>
- <ul class=search>
- <li>JavaScript</li>
- <li>Java</li>
- <li>jQuery</li>
- <li>AngularJS</li>
- <li>ReactJS</li>
- <ul>
- <li>Submunu 1</li>
- <ul>
- <li>Submenu 1.2</li>
- </ul>
- </ul>
- <ul>
- <li>Submenu 2</li>
- </ul>
- <ul>
- <li>Submenu 3</li>
- </ul>
- <li>Bootstrap</li>
- <li>PHP</li>
- <li>Python</li>
- </ul>
- <script>
- document.addEventListener("DOMContentLoaded", function() {
- "use strict"
- var style = ""
- + "<style>"
- + "input.search {"
- + "-webkit-tap-highlight-color: transparent;"
- + "}"
- + ".search .hidden {"
- + "opacity: 0;"
- + "pointer-events: none;"
- + "}"
- + ".search > * {"
- + "position: absolute;"
- + "transition: .5s;"
- + "}"
- + "</style>"
- document.head.insertAdjacentHTML("beforeend", style)
- var items = document.querySelectorAll(".search > *")
- var itemHeight = items[0].offsetHeight
- var texts = []
- var i = -1
- var len = items.length
- var transform = "transform" in document.body.style ? "transform" : "webkitTransform"
- while (++i < len) {
- texts.push(items[i].textContent.trim())
- items[i].style[transform] = "translateY(" + i*itemHeight +"px)"
- }
- document.querySelector("input.search").addEventListener("input", function() {
- var re = new RegExp(this.value, "i")
- texts.forEach(function(element, index) {
- if (re.test(element)) {
- items[index].classList.remove("hidden")
- }
- else {
- items[index].classList.add("hidden")
- }
- var i = -1
- var position = 0
- while (++i < len) {
- if (items[i].className != "hidden") {
- items[i].style[transform] = "translateY(" + position++ * itemHeight + "px)"
- }
- }
- })
- })
- })
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement