Tuesday, December 20, 2016

Yorum yok

mobil uyumlu üst menü

üstte sabit menü HTML kodu

mobil uyumlu şık üst menü eklentisi. CSS kod gerekmeden html ile ekleyebileceğiniz bir mobil uyumlu sabit üst menü. tüm platformlarla uyumlu ve denenmiştir.

nasıl kullanılır?

önizleme

                                                                 
web uyumlu menü
web görünüm

mobil uyumlu menü
mobil görünüm       
<style type="text/css">
    body {
          padding-top: 50px;
          position: relative;
      }
   
      pre {
          tab-size: 8;
      }
   
      @media screen and (max-width: 768px) {
          .side-collapse-container{
              width:100%;
              position:relative;
              left:0;
              transition:left .4s;
          }
          .side-collapse-container.out{
              left:200px;
          }
          .side-collapse {
              top:50px;
              bottom:0;
              left:0;
              width:200px;
              position:fixed;
              overflow:hidden;
              transition:width .4s;
          }
          .side-collapse.in {
              width:0;
          }
      }
    </style>     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>     <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
            else $('head > link').filter(':first').replaceWith(defaultCSS);
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height());
          window.parent.postMessage( iframe_height, 'http://bootsnipp.com');
        });
    </script>
<header class="navbar navbar-fixed-top navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle pull-left" data-target-2=".side-collapse-container" data-target=".side-collapse" data-toggle="collapse-side" type="button"><img alt="Apps-menu-editor icon" src="https://icons.iconarchive.com/icons/sbstnblnd/plateau/24/Apps-menu-editor-icon.png" /></button></div>
<div class="navbar-inverse side-collapse in">

<br />
<nav class="navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="https://www.blogger.com/blogger.g?blogID=687022085700417782#Home">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=687022085700417782#users">apple</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=687022085700417782#users">android</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=687022085700417782#users">windovs</a></li>
<li><a href="http://webilgici.blogspot.com.tr/">html</a></li>
</ul>
</nav></div>
</div>
</header>
<script type="text/javascript">
 $(document).ready(function() {
            var sideslider = $('[data-toggle=collapse-side]');
            var sel = sideslider.attr('data-target');
            var sel2 = sideslider.attr('data-target-2');
            sideslider.click(function(event){
                $(sel).toggleClass('in');
                $(sel2).toggleClass('out');
            });
        });
 </script>

0 yorum:

Post a Comment