<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--top scrool menu arsareba --> <div id="scrollmenu" class="scrollmenu"> <a href="#home">9 netarebis mixedviT</a> <a href="#news">10 mcnebis mixedviT</a> <a href="#contact">rogoria WeSmariti aRsareba</a> <a href="#about">aRsareba bavSvebTan</a> </div> <!--END top scrool menu arsareba --> <!--Right navigation text saTnoebebi --> <div id="mySidenav-r" class="sidenav-r"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">simdable</a> <a href="#">mowyaleba</a> <a href="#">umankoeba</a> <a href="#">simSvide</a> <a href="#">marxuloba</a> <a href="#">siyvaruli</a> <a href="#">sasoeba</a> </div> <div id="main-r"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">saTnoebebi ☰ </span> </div> <!--Right navigation text saTnoebebi --> <!--left navigation text codvebi --> <div id="mySidenav-l" class="sidenav-l"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a> <a href="#">ampartavneba</a> <a href="#">angareba</a> <a href="#">siZva</a> <a href="#">mrisxaneba</a> <a href="#">nayrovaneba</a> <a href="#">Suri</a> <a href="#">sasowarkveTa</a> </div> <div id="main-l"> <span style="font-size:30px;cursor:pointer" onclick="openNav1()">☰ codvebi</span> </div> <!--END left navigation text codvebi -->

body { font-family: "Lato", sans-serif; } /*top scrool menu arsareba*/ div.scrollmenu { background-color: #333; overflow: auto; white-space: nowrap; text-align: center; } div.scrollmenu a { display: inline-block; color: white; text-align: center; padding: 14px; text-decoration: none; } div.scrollmenu a:hover { background-color: #777; } /*end Top scrool menu agsareba*/ /*sidenav right satnoebebi*/ .sidenav-r { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; } .sidenav-r a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav-r a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav-r .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main-r { float: right; transition: margin-right .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav-r {padding-top: 15px;} .sidenav-r a {font-size: 18px;} } /*END off sidenav right satnoebebi*/ /*sidenav left codvebi */ .sidenav-l { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; } .sidenav-l a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav-l a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav-l .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main-l { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav-l {padding-top: 15px;} .sidenav-l a {font-size: 18px;} } /* END off sidenav left codvebi */

/*navigtion right saTnoebebi*/ function openNav() { document.getElementById("mySidenav-r").style.width = "250px"; document.getElementById("main-r").style.marginRight = "250px"; document.getElementById("scrollmenu").style.marginRight = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySidenav-r").style.width = "0"; document.getElementById("main-r").style.marginRight= "0"; document.getElementById("scrollmenu").style.marginRight= "0"; document.body.style.backgroundColor = "white"; } /*END navigtion right saTnoebebi*/ /*navigtion left codvebi*/ function openNav1() { document.getElementById("mySidenav-l").style.width = "250px"; document.getElementById("main-l").style.marginLeft = "250px"; document.getElementById("scrollmenu").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav1() { document.getElementById("mySidenav-l").style.width = "0"; document.getElementById("main-l").style.marginLeft= "0"; document.getElementById("scrollmenu").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; } /*end navigtion left codvebi*/