Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    apertura nav bar all'avvio pagina

    Salve a tutti, intanto mi presento, mi chiamo Lorenzo e da poco mi sono addentrato nel mondo della programmazione, ho un "problema" con il codice javascript che ora vi postero qui sotto, in pratica vorrei rendere fissa la navbar a scorrimento laterale, in modo che all'apertura della pagina questa sia già aperta e non possa essere chiusa. Il codice è questograzie a tutti in anticipo )
    codice:
    <script>
        var navButton = document.querySelector('.navigation-button');
    var navMenu = document.querySelector('.navigation-menu');
    var win = window;
    
    
    function openMenu(event) {
      
      navButton.classList.toggle('active');
      navMenu.classList.toggle('active');
    
    
      event.preventDefault();
      event.stopImmediatePropagation();
    }
      
    function closeMenu(event) {
      if (navButton.classList.contains('active')) {
        navButton.classList.remove('active');
        navMenu.classList.remove('active');
      }
    }
      navButton.addEventListener('click', openMenu, false);
    
    
    win.addEventListener('click',closeMenu, false);
        
    </script>
    Ultima modifica di ciro78; 24-03-2020 a 23:01 Motivo: formattazione discussione

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,190
    Ciao Lorenzo,
    benvenuto nel forum di HTML.it.

    Ti invito, qualora non lo avessi già fatto, a prendere visione del regolamento. In esso troverai indicazioni oltre che di natura comportamentale anche come aprire al meglio le discussioni per poter essere supportato dagli altri utenti.

    Ad esempio:

    - titolo chiaro e specifico
    - utilizzo del tag code per il codice
    - maggiori dettagli sia sul codice che sul problema

    Hai mancato tutti e tre

    I primi due li ho sistemati io mentre per i dettagli occorre il tuo supporto. Non ci dici che errore hai e non ci dai il listato completo della pagina in modo da poterla provare.

    Se hai dubbi sul problema rispondi a questa disucssione stessa. Per il resto usa i messaggi privati

    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Salve ciro, per prima cosa volevo ringraziarti per il messaggio di risposta nel forum e per le correzioni, essendo nuovo non so se il messaggio che ti sto mandando debba essere privato o in forma pubblica nel forum, comunque ti spiego brevemente la mia idea, qui inoltre ti metterò il codice per intero cosi che tu possa vederlo e magari capire meglio ciò che vorrei fare, cioè avere una NavBar "fissa" che si apra direttamente all'apertura della pagina senza poter essere chiusa.
    ecco il codice:

    codice:
    <!DOCTYPE html><html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>slanted menu</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <style>
        body {
      background-image: url(ooo.jpeg);
            background-size: cover;
       font-family: 'Roboto Condensed', sans-serif;
      font-weight: bold;
            height: 100vh;
    }
    
    .container {
      width: 80%;
      height: 40px;
      position: relative;
      top: 40px;
      margin: 0 auto;
    }
    
    #logo {
      position: absolute;
      top: 0;
      left: 0;
      color: white;
     
     
    }
    .navigation-wrapper {
      position: relative;
    }
    .navigation-button {
      will-change: transform;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      position: fixed;
      z-index: 1;
      top: 40px;
      right: 100px;
      background: transparent;
      cursor: pointer;
    }
    .navigation-button .fa {
      border: 2px solid white;
      border-radius: 3px;
      padding: 10px;
        color: white;
    }
     
    
    .navigation-menu ul li {
      list-style: none;
      font-family: impact;
      font-weight: 300;
      color: hsl(0,0%,70%);
    }
    
    .navigation-menu {
      content: '';
      position: fixed;
      top: 0;
      right: 0;
      width: 50%;
      background: #fff;
      height: 100%;
      transform: skewX(0deg) translate(100%,0);
      transform-origin: top right;
      transition: all .2s ease-in;
      z-index: -1;
    }
    .navigation-menu ul {
      transform: skewX(-8deg);
      transform-origin: top left;
      position: fixed;
      right: 120px;
      top: 120px;
      width: 400px;
      text-align: right;
    
    }
    .navigation-menu ul li {
      position: relative;
        z-index: 999;
      font-size: 32px;
      color: hsl(0,0%,10%);
      line-height: 64px;
    }
    .navigation-menu ul li  a {
      border: none;
      color: hsl(0,0%,10%);
      text-decoration: none;
    }
    .navigation-menu.active {
      transform: skewX(8deg) translate(0,0);
        
    }
    
    .navigation-menu li {
      opacity: 0;
      transform: translate(0, 10px);
      transition: all .0s ease-in .3s;
      
    }
    .navigation-menu.active li {
      opacity: 1;
      transform: translate(0,0);
      transition: all .2s ease-in 0s;
    }
    .navigation-menu.active li:nth-child(1) {
      transition-delay: .3s;
    }
    .navigation-menu.active li:nth-child(2) {
      transition-delay: .4s;
    }
    .navigation-menu.active li:nth-child(3) {
      transition-delay: .5s;
    }
    .navigation-menu.active li:nth-child(4) {
      transition-delay: .6s;
    }
    .navigation-menu.active li:nth-child(5) {
      transition-delay: .7s;
    }
    .navigation-menu.active li:nth-child(6) {
      transition-delay: .8s;
    }
            .hero h1{
                 
                margin-top: 178px;
                text-transform: uppercase;
                font-family: impact;
                font-size: 26px;
                letter-spacing: 4px;
                color: white;
                
                 
            } 
            
            span{
                font-size: 65px;
                letter-spacing: 2px;
                font-family: impact;
            }
            
            .button {
                
                 
                font-family: 'Roboto Condensed', sans-serif;
                font-weight: normal;
                font-size: 12px;
                margin-top: 40px;
                
                 
            }
            .btn1:hover{
                text-decoration: none;
                color: white;
            }
            .btn2:hover{
                text-decoration: none;
                color: black;
            }
            
            
            
            .btn1{
                padding: 12px 25px;
                background: #f20c4a;
                text-decoration: none;
                color: white;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                 
            }
            .btn2{
                padding: 12px 25px;
                background: #f4f6f8;
                text-decoration: none;
                color: #000;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                 
            }
        </style>
    </head>
    <body>
        <div class="container">
      <div id="logo">RETRO</div>
      
      
      
      <div class="navigation-wrapper">
        <div class="navigation-button">
          <i class="fa fa-bars"></i>
        </div>
        <div class="navigation-menu">
            <ul>
              <li><a href="">HOME</a></li>
              <li><a href="">GALLERY</a></li>
              <li><a href="">CONTACT</a></li>
              <li><a href="">LOCATION</a></li>
              <li><a href="">TESTIMONIAL</a></li>
              <li><a href="">PRICING</a></li>
          </ul>
        </div>
      </div>
      <section class="hero">
          <h1>Creative Design <br> <span> INTRODUCING</span></h1>
          <div class="button">
              <a href="" class="btn1">Get Started</a>
              <a href="" class="btn2">Get Featured</a>
          </div>
      </section>
      
    </div>
    <script>
        var navButton = document.querySelector('.navigation-button');
    var navMenu = document.querySelector('.navigation-menu');
    var win = window;
    
    function openMenu(event) {
      
      navButton.classList.toggle('active');
      navMenu.classList.toggle('active');
    
      event.preventDefault();
      event.stopImmediatePropagation();
    }
      
    function closeMenu(event) {
      if (navButton.classList.contains('active')) {
        navButton.classList.remove('active');
        navMenu.classList.remove('active');
      }
    }
      navButton.addEventListener('click', openMenu, false);
    
    win.addEventListener('click',closeMenu, false);   
    </script>
    </body> </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.