üstte sabit menü HTML kodu

önizleme

                                                                 

web görünüm

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>