PRZY ZMIANIE NA PULPIT

Question

Siema, mam nav na mojej stronie , ktore podczas zmiany wielkosci urzadzenia, wsuwa mi sie lub rozsuwa ,nie wiem jak to nazwac ... ale jak wylacze transition wszystko jest ok podczas rozciagania strony na wieksze urzadzenie.Na mobilce nav wysuwa mi sie z boku.

 .burger {
        display: none;
    }
    nav {
        top: 0;
        left: 0;
        transition: none;
    }
    nav ul {
        flex-flow: row wrap;
        justify-content: flex-end;  
        line-height: 80px;
        margin: 0 50px;
        z-index: 100;
        padding-left: 30px;
    }

    nav ul li {
        padding: 0px 10px;
        border-bottom: none;
        font-size: 15px;
    }
   
    nav ul li a {
        border-radius: 5px;
        transition: 0.3s ease-in-out;
        padding: 10px;
    }
    nav ul li:hover a  {
        color: white;
        background-color: firebrick;
    }
  

 

Comments

Sprecyzuj pytanie i umieść kompletny kod proszę

---

Chodzi mi  o to, że mam nav w headerze umiejscowione za pomooca Flexa i podczas powiekszania okna przegladarki z mobile na desktop menu mi sie dziwnie wsuwa tak jakby sie rozciągało,ale po 1s juz jest ok.Przeszkadza mi to, bo nie pwoinno tak byc ,ale zauważylem, że jesli traansition zostaje wylaczone tego juz nie ma.

@media (min-width: 769px) {
     .banner {
         height: 700px;
     }
    .container h1, .container h2  {
        font-size: 3em;
    }
    
    .burger {
        display: none;
    }
    nav {
        top: 0;
        left: 0;
        transition: none;
    }
    nav ul {
        flex-flow: row wrap;
        justify-content: flex-end;  
        line-height: 80px;
        margin: 0 50px;
        z-index: 100;
        padding-left: 30px;
    }

    nav ul li {
        padding: 0px 10px;
        border-bottom: none;
        font-size: 15px;
    }
   
    nav ul li a {
        border-radius: 5px;
        transition: 0.3s ease-in-out;
        padding: 10px;
    }
    nav ul li:hover a  {
        color: white;
        background-color: firebrick;
    }
  
    header img {
        width: 85px;
        height: 65px;
    }
   
  
}

  <header>
        <img src="img/logo.png" alt="******">
        <div class="burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Strona główna</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="#o_nas">O nas</a></li>
                <li><a href="rezerwacje.html">Rezerwacje</a></li>
                <li><a href="uroczystości.html">Uroczystości</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

o to chodziło??? sory, bo amator ze mnie :)

Answer 1

Tak działa transition, nadaje elementom spowolnienie ruchu (animacje).

transition: 0.3s ease-in-out;

jako pierwszy argument (przed "0.3s") możesz podać właściwość na jaką ma oddziaływać transition, np. width, wtedy transition działa tylko na width. Jako, że nie podałeś takiego argumentu to został użyty argument domyślny all, czyli transition działa na wszystkie właściwości.

Docs

Comments

Dzieki wielkie, teraz dziala