• 16-05-2019, 13:11:59
    #1
    Merhaba sevgili r10 Ailesi

    Php alt yapılı web sitem için aşağı indikçe kayan menü yapmak istiyorum. Benimki sabit kalıyor. Aşağıda örneğini vereceğim. Nasıl yapabilirim?

    http://preview.themeforest.net/item/...441.1558001458
  • 16-05-2019, 13:12:57
    #2
    Css position : fixed ile menüyü sabitleyebilirsiniz...
  • 16-05-2019, 13:15:10
    #3
    Üyeliği durduruldu
    Sticky header olarak aratırsanız detaylı anlatım videolarını bulabilirsiniz.

    ÖRNEK HTML KODLARI :

    <div class="header" id="myHeader">
      <h2>My Header</h2>
    </div>
    CSS EKLEMEN GEREKEN KODLAR:
    /* Style the header */
    .header {
     padding: 10px 16px;
     background: #555;
     color: #f1f1f1;
    }
    
    /* Page content */
    .content {
     padding: 16px;
    }
    
    /* The sticky class is added to the header with JS when it reaches its scroll position */
    .sticky {
     position: fixed;
     top: 0;
     width: 100%
    }
    
    /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + .content {
     padding-top: 102px;
    }
    JAVASCRIPT EKLEMEN GEREKEN KODLAR
    // When the user scrolls the page, execute myFunction
    window.onscroll = function() {myFunction()};
    
    // Get the header
    var header = document.getElementById("myHeader");
    
    // Get the offset position of the navbar
    var sticky = header.offsetTop;
    
    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }
  • 16-05-2019, 14:41:24
    #4
    TekUzman adlı üyeden alıntı: mesajı görüntüle
    Css position : fixed ile menüyü sabitleyebilirsiniz...
    Tam olarak nasıl kullanacağım?

    hediyefarki adlı üyeden alıntı: mesajı görüntüle
    Sticky header olarak aratırsanız detaylı anlatım videolarını bulabilirsiniz.

    ÖRNEK HTML KODLARI :

    <div class="header" id="myHeader">
      <h2>My Header</h2>
    </div>
    CSS EKLEMEN GEREKEN KODLAR:
    /* Style the header */
    .header {
     padding: 10px 16px;
     background: #555;
     color: #f1f1f1;
    }
    
    /* Page content */
    .content {
     padding: 16px;
    }
    
    /* The sticky class is added to the header with JS when it reaches its scroll position */
    .sticky {
     position: fixed;
     top: 0;
     width: 100%
    }
    
    /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + .content {
     padding-top: 102px;
    }
    JAVASCRIPT EKLEMEN GEREKEN KODLAR
    // When the user scrolls the page, execute myFunction
    window.onscroll = function() {myFunction()};
    
    // Get the header
    var header = document.getElementById("myHeader");
    
    // Get the offset position of the navbar
    var sticky = header.offsetTop;
    
    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }

    Teşekkür ederim de bu benim kendi menüm için uygulanabiliyor değil mi?
  • 16-05-2019, 14:51:26
    #5
    Üyeliği durduruldu
    ibonline adlı üyeden alıntı: mesajı görüntüle
    Tam olarak nasıl kullanacağım?




    Teşekkür ederim de bu benim kendi menüm için uygulanabiliyor değil mi?
    Class parametrelerini kendi parametrelerinizle değiştirerek uygulayabilirsiniz.