× İletişim Formu Blogger Yatay Duyarlı Açılır Menü Arlina Design 6/14/2017 Etiketler : Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> /*<![CDATA[*/ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto 0 auto} nav#menu-auto{background:#fff;max-width:100%;overflow-x:auto} nav#menu-auto ul{margin:0;padding:0;list-style:none} nav#menu-auto ul li{float:left;list-style:none;font:700 12px lato,arial;display:list-item} nav#menu-auto ul li.more{height:45px;line-height:45px;text-align:center;display:none;float:right} nav#menu-auto ul li.more ul#overflow.show{display:block} nav#menu-auto ul li a,nav#menu-auto ul li span,nav#menu-auto ul li.more span.btn-more{display:block;background:#fff;color:#333;text-decoration:none;padding:0 1em;cursor:pointer;transition-duration:.3s;height:45px;line-height:45px} nav#menu-auto ul li a:hover,nav#menu-auto ul li span:hover{background:#e00;color:#fff} nav#menu-auto ul li.more #overflow{display:none;position:absolute;text-align:left;transition-duration:.3s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background-color:#ffffff;z-index:9999} nav#menu-auto ul li.more #overflow li{float:none} nav#menu-auto ul li.more #overflow li a{background:#fff;white-space:nowrap;padding:0 15px;height:35px;line-height:35px} nav#menu-auto ul li.more #overflow li a:hover{background:#e00} nav#menu-auto ul li.more span.btn-more{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;height:100%} /*]]>*/ </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> </head> <body> <nav id="menu-auto"> <ul id="nav"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Hakkında</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> <li><a href="#">Menü 4</a></li> <li><a href="#">Menü 5</a></li> <li><a href="#">Menü 6</a></li> <li><a href="#">Menü 7</a></li> <li><a href="#">Menü 8</a></li> <li><a href="#">Menü 9</a></li> <li><a href="#">Menü 11</a></li> <li><a href="#">Menü 12</a></li> <li><a href="#">Menü 13</a></li> <li><a href="#">Menü 14</a></li> <li><a href="#">Menü 15</a></li> <li><a href="#">Menü 16</a></li> <li><a href="#">Menü 17</a></li> <li><a href="#">Menü 18</a></li> <li><a href="#">Menü 19</a></li> <li><a href="#">Menü 20</a></li> <li class="more"> <span onclick="showOverflow()" class="btn-more"></span> <ul id="overflow" class="content-dropdown"></ul> </li> </ul> </nav> <script> //<![CDATA[ window.onresize=navigationResize;navigationResize();function navigationResize(){$('#nav li.more').before($('#overflow > li'));var $navItemMore=$('#nav > li.more'),$navItems=$('#nav > li:not(.more)'),navItemMoreWidth=navItemWidth=$navItemMore.width(),windowWidth=$(window).width(),navItemMoreLeft,offset,navOverflowWidth;$navItems.each(function(){navItemWidth+=$(this).width();});navItemWidth>windowWidth?$navItemMore.show():$navItemMore.hide();while(navItemWidth>windowWidth){navItemWidth-=$navItems.last().width();$navItems.last().prependTo('#overflow');$navItems.splice(-1,1);} navItemMoreLeft=$('#nav .more').offset().left;navOverflowWidth=$('#overflow').width();offset=navItemMoreLeft+navItemMoreWidth-navOverflowWidth;$('#overflow').css({'left':offset});} function showOverflow(){document.getElementById("overflow").classList.toggle("show");} window.onclick=function(event){if(!event.target.matches('.btn-more')){var dropdowns=document.getElementsByClassName("content-dropdown");var i;for(i=0;i<dropdowns.length;i++){var openDropdown=dropdowns[i];if(openDropdown.classList.contains('show')){openDropdown.classList.remove('show');}}}} //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Yatay Duyarlı Açılır Menü" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Yatay Duyarlı Açılır Menü Arlina Design 6/14/2017 Etiketler : Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> /*<![CDATA[*/ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto 0 auto} nav#menu-auto{background:#fff;max-width:100%;overflow-x:auto} nav#menu-auto ul{margin:0;padding:0;list-style:none} nav#menu-auto ul li{float:left;list-style:none;font:700 12px lato,arial;display:list-item} nav#menu-auto ul li.more{height:45px;line-height:45px;text-align:center;display:none;float:right} nav#menu-auto ul li.more ul#overflow.show{display:block} nav#menu-auto ul li a,nav#menu-auto ul li span,nav#menu-auto ul li.more span.btn-more{display:block;background:#fff;color:#333;text-decoration:none;padding:0 1em;cursor:pointer;transition-duration:.3s;height:45px;line-height:45px} nav#menu-auto ul li a:hover,nav#menu-auto ul li span:hover{background:#e00;color:#fff} nav#menu-auto ul li.more #overflow{display:none;position:absolute;text-align:left;transition-duration:.3s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background-color:#ffffff;z-index:9999} nav#menu-auto ul li.more #overflow li{float:none} nav#menu-auto ul li.more #overflow li a{background:#fff;white-space:nowrap;padding:0 15px;height:35px;line-height:35px} nav#menu-auto ul li.more #overflow li a:hover{background:#e00} nav#menu-auto ul li.more span.btn-more{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;height:100%} /*]]>*/ </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> </head> <body> <nav id="menu-auto"> <ul id="nav"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Hakkında</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> <li><a href="#">Menü 4</a></li> <li><a href="#">Menü 5</a></li> <li><a href="#">Menü 6</a></li> <li><a href="#">Menü 7</a></li> <li><a href="#">Menü 8</a></li> <li><a href="#">Menü 9</a></li> <li><a href="#">Menü 11</a></li> <li><a href="#">Menü 12</a></li> <li><a href="#">Menü 13</a></li> <li><a href="#">Menü 14</a></li> <li><a href="#">Menü 15</a></li> <li><a href="#">Menü 16</a></li> <li><a href="#">Menü 17</a></li> <li><a href="#">Menü 18</a></li> <li><a href="#">Menü 19</a></li> <li><a href="#">Menü 20</a></li> <li class="more"> <span onclick="showOverflow()" class="btn-more"></span> <ul id="overflow" class="content-dropdown"></ul> </li> </ul> </nav> <script> //<![CDATA[ window.onresize=navigationResize;navigationResize();function navigationResize(){$('#nav li.more').before($('#overflow > li'));var $navItemMore=$('#nav > li.more'),$navItems=$('#nav > li:not(.more)'),navItemMoreWidth=navItemWidth=$navItemMore.width(),windowWidth=$(window).width(),navItemMoreLeft,offset,navOverflowWidth;$navItems.each(function(){navItemWidth+=$(this).width();});navItemWidth>windowWidth?$navItemMore.show():$navItemMore.hide();while(navItemWidth>windowWidth){navItemWidth-=$navItems.last().width();$navItems.last().prependTo('#overflow');$navItems.splice(-1,1);} navItemMoreLeft=$('#nav .more').offset().left;navOverflowWidth=$('#overflow').width();offset=navItemMoreLeft+navItemMoreWidth-navOverflowWidth;$('#overflow').css({'left':offset});} function showOverflow(){document.getElementById("overflow").classList.toggle("show");} window.onclick=function(event){if(!event.target.matches('.btn-more')){var dropdowns=document.getElementsByClassName("content-dropdown");var i;for(i=0;i<dropdowns.length;i++){var openDropdown=dropdowns[i];if(openDropdown.classList.contains('show')){openDropdown.classList.remove('show');}}}} //]]> </script> </body> </html>
Yorum Gönder