در این مطلب نمونه 9 از استایل زیبا برای نشان دهنده اسلایدرها با عنوان Navigation Indicators رو در اختیارتون میزارم و امیدوارم که بدردتون بخوره و بتونین از اون در سایتتون استفاده کنید.
کد HTML :
<section class="section section--nav" id="Etefu"> <nav class="nav nav--etefu"> <button class="nav__item" aria-label="Item 1"><span class="nav__item-inner"></span><span class="nav__item-title">01</span></button> <button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"></span><span class="nav__item-title">02</span></button> <button class="nav__item" aria-label="Item 3"><span class="nav__item-inner"></span><span class="nav__item-title">03</span></button> <button class="nav__item" aria-label="Item 4"><span class="nav__item-inner"></span><span class="nav__item-title">04</span></button> <button class="nav__item" aria-label="Item 5"><span class="nav__item-inner"></span><span class="nav__item-title">05</span></button> </nav> <!-- Mockup slider for decorative purpose only --> <div class="mockup-slider"> <img src="img.jpg" alt="img10" /> <h3 class="mockup-slider__title">Etefu</h3> </div> </section>
کد CSS :
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; } body { font-family: 'Roboto Mono', monospace; background: #62ea80; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } .section { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .section--nav { position: relative; overflow: hidden; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .section__title { font-size: 0.65em; font-weight: 700; -webkit-flex: none; flex: none; margin: 3em 0 15em; text-indent: 3px; letter-spacing: 3px; text-transform: uppercase; color: #d1d1d1; } .section.section--intro { font-size: 1.6em; position: relative; min-height: 100vh; text-align: center; color: #fff; background: #333; } .section--intro p { max-width: 1000px; margin: 0 auto; padding: 1em; } /* Mockup Slider */ .mockup-slider { position: relative; width: calc(100% - 12em); margin: 0 0 0 2em; max-width: 600px; } .mockup-slider::before, .mockup-slider::after { content: ''; width: 100%; background: rgba(0,0,0,0.05); height: 100px; position: absolute; top: 0; } .mockup-slider::after { top: auto; bottom: 0; } .mockup-slider img { position: relative; display: block; max-width: 100%; margin: 150px 0; box-shadow: 0 10px 20px -4px rgba(0,0,0,0.6); } .mockup-slider__title { position: absolute; font-size: 3em; bottom: 30%; left: -0.5em; font-weight: normal; margin: 0; } .mockup-slider__subtitle { position: absolute; top: 70%; left: -1em; background: #1b3050; margin: 0; color: #fff; font-size: 1.05em; padding: 0.25em 0.5em; z-index: 100; } /* General styles */ .nav { position: relative; width: 8em; margin: 0 0 0 3em; } .nav__item { line-height: 1; position: relative; display: block; margin: 0; padding: 0; letter-spacing: 0; color: currentColor; border: 0; background: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } .nav__item:focus { outline: none; } /* Individual styles */ /*** Etefu ***/ .nav--etefu .nav__item { width: 2.5em; height: 3em; margin: 1em 0; } .nav--etefu .nav__item-inner { position: relative; display: block; overflow: hidden; width: 0.25em; height: 100%; margin: 0 0 0 1em; background: #4fc369; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .nav--etefu .nav__item:not(.nav__item--current):focus .nav__item-inner, .nav--etefu .nav__item:not(.nav__item--current):hover .nav__item-inner{ opacity: 1; } .nav--etefu .nav__item-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #326b3f; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .nav--etefu .nav__item--current .nav__item-inner::before { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .nav--etefu .nav__item-title { font-weight: bold; position: absolute; top: 0; left: 115%; width: 2em; font-size: 1.5em; opacity: 0; color: #4fc369; font-family: 'Roboto Condensed', sans-serif; -webkit-transform: rotate3d(0,0,1,90deg) translate3d(1em,0,0); transform: rotate3d(0,0,1,90deg) translate3d(1em,0,0); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .nav--etefu .nav__item--current .nav__item-title { opacity: 1; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); }
کد JS:
(function(window) { 'use strict'; function init() { [].slice.call(document.querySelectorAll('.nav')).forEach(function(nav) { var navItems = [].slice.call(nav.querySelectorAll('.nav__item')), itemsTotal = navItems.length, setCurrent = function(item) { // return if already current if( item.classList.contains('nav__item--current') ) { return false; } // remove current var currentItem = nav.querySelector('.nav__item--current'); currentItem.classList.remove('nav__item--current'); // set current item.classList.add('nav__item--current'); }; navItems.forEach(function(item) { item.addEventListener('click', function() { setCurrent(item); }); }); }); } init(); })(window);
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
اولین دیدگاه این پست رو تو بنویس !