გვერდითა მენიუ 2025-07-09 |
დასახელება: გვერდითა მენიუ ავტორი: saba-web სისტემა: uCoz ეს ჩასვით თქვენ სასურველ ადგილას Code <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css" media="all" /> <input type="radio" id="b1" name="matome" /> <input type="radio" id="b2" name="matome" /> <input type="radio" id="b3" name="matome" /> <input type="radio" id="b4" name="matome" /> <ul id="wrap1"> <label for="b1"><li class="first" id="fire1">¸</li></label> <label for="b2"><li class="first" id="fire2">g</li></label> <label for="b3"><li class="first" id="fire3">{</li></label> <label for="b4"><li class="first" id="fire4">w</li></label> </ul> <div id="menu1" class="none"><ul><li class="fire2">test1</li><li class="fire2">test2</li><li class="fire2">test3</li></ul></div> <div id="menu2" class="none"><ul><li class="fire2">test4</li><li class="fire2">test5</li><li class="fire2">test6</li></ul></div> <div id="menu3" class="none"><ul><li class="fire2">test7</li><li class="fire2">test8</li><li class="fire2">test9</li></ul></div> <div id="menu4" class="none"><ul><li class="fire2">test10</li><li class="fire2">test11</li><li class="fire2">test12</li></ul></div> ეს კი Css ში Code @font-face { font-family: 'icons'; src: url(http://jsrun.it/assets/r/R/x/A/rRxAn) format('opentype') } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; -o-transition: 0.3s linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } body { background: url(http://jsrun.it/assets/p/r/8/X/pr8Xi.png); } input[type="radio"] { display: none; } .none { display: none; } li { cursor: pointer; } ul { list-style-type: none; cursor: pointer; } #wrap1 { position: absolute; left: 70px; top: 70px; } .first { width: 60px; height: 60px; font-size: 45px; line-height: 60px; text-align: center; color: #000; background-color: #fff; border: solid 1px #fff; border-radius: 50%; margin-bottom: 20px; font-family: icons; opacity: 0.7; } .first::after { content: ''; display: inline-block; width: 70px; height: 70px; position: relative; left: -7px; top: -67px; border-radius: 50%; border: solid 1px #fff; } #menu1 { width: 200px; height: 150px; font-family: serif; color: #000; background-color: #fff; position: absolute; left: 170px; top: 70px; text-align: center; box-shadow: 0 0 10px #fff; } #menu1::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #fff; border-width:10px 30px 10px 0px; top: 10%; } #menu2 { width: 200px; height: 150px; font-family: serif; color: #000; background-color: #fff; position: absolute; left: 170px; top: 110px; text-align: center; box-shadow: 0 0 10px #fff; } #menu2::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #fff; border-width:10px 30px 10px 0px; top: 40%; } #menu3 { width: 200px; height: 150px; font-family: serif; color: #000; background-color: #fff; position: absolute; left: 170px; top: 150px; text-align: center; box-shadow: 0 0 10px #fff; } #menu3::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #fff; border-width:10px 30px 10px 0px; bottom: 20%; } #menu4 { width: 200px; height: 150px; font-family: serif; color: #000; background-color: #fff; position: absolute; left: 170px; top: 220px; text-align: center; box-shadow: 0 0 10px #fff; } #menu4::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #fff; border-width:10px 30px 10px 0px; bottom: 10%; } .fire2 { font-family: "Open Sans",sans-serif; width: 200px; height: 50px; line-height: 50px; font-size: 25px; border-bottom: solid 1px #999; } .fire2:hover { background-color: #666; color: #fff; } #b1:checked ~ #menu1 { display: block; -webkit-animation-delay: 0s; -webkit-animation-name: left; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } #b1:checked ~ #wrap1 #fire1 { -webkit-transform: rotateY(360deg); color: #fff; background-color: #000; } #b2:checked ~ #wrap1 #fire2 { -webkit-transform: rotateY(360deg); color: #fff; background-color: #000; } #b3:checked ~ #wrap1 #fire3 { -webkit-transform: rotateY(360deg); color: #fff; background-color: #000; } #b4:checked ~ #wrap1 #fire4 { -webkit-transform: rotateY(360deg); color: #fff; background-color: #000; } #b2:checked ~ #menu2 { display: block; -webkit-animation-delay: 0s; -webkit-animation-name: left; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } #b3:checked ~ #menu3 { display: block; -webkit-animation-delay: 0s; -webkit-animation-name: left; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } #b4:checked ~ #menu4 { display: block; -webkit-animation-delay: 0s; -webkit-animation-name: left; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes left { 0% {-webkit-transform: translateX(300px);opacity: 0;} 100% {-webkit-transform: translateX(0px);opacity: 0.8;} } |
სულ კომენტარები: 0 | |