Необычное выпадающее анимированное меню на CSS3 и SVG
|
1 |
<link rel='stylesheet prefetch' href='/css/ddown.css'> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<div class="cont_principal"> <div class="cont_menu"> <div class="cont_titulo_menu" onclick="menu()"> <div class="cont_titulo"> <h4>НАСТРОЙКИ ПРОФИЛЯ</h4> </div> <div class="cont_icon_menu"> <img alt="" src="/img/planet.png"> <div class="cont_circle_1"></div> <div class="cont_circle_2"></div> <div class="cont_circle_3"></div> <div class="cont_circle_4"></div> </div> </div> <div class="cont_icon_trg disable"> <svg height="38px" version="1.1" viewbox="0 0 46 38" width="46px" xmlns="http://www.w3.org/2000/svg"> <defs> <filter filterunits="objectBoundingBox" height="200%" id="filter-1" width="200%" x="-50%" y="-50%"> <feoffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetOuter1"></feoffset> <fegaussianblur in="shadowOffsetOuter1" result="shadowBlurOuter1" stddeviation="1.5"></fegaussianblur> <fecolormatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0813575634 0"></fecolormatrix> <femerge> <femergenode in="shadowMatrixOuter1"></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> </defs> <g fill="none" fill-rule="evenodd" id="Page-1" sketch:type="MSPage" stroke="none" stroke-width="1"> <polygon fill="#FFFFFF" filter="url(#filter-1)" id="Triangle-1" points="23 7 39 24 7 24" sketch:type="MSShapeGroup"></polygon> </g></svg> </div> <div class="cont_drobpdown_menu disable"> <ul> <li> <a href="#">Общая информация</a> </li> <li> <hr> </li> <li> <a href="#">Сменить пароль</a> </li> </ul> </div> </div> </div> <script> var c = 0; function menu() { if (c % 2 == 0) { document.querySelector('.cont_drobpdown_menu').className = "cont_drobpdown_menu active"; document.querySelector('.cont_icon_trg').className = "cont_icon_trg active"; c++; console.log('1'); } else { document.querySelector('.cont_drobpdown_menu').className = "cont_drobpdown_menu disable"; document.querySelector('.cont_icon_trg').className = "cont_icon_trg disable"; c++; } } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
