Menu html e css

di
lab.ottegaccia
il
1 risposte
L
lab.ottegaccia
Pochi posts
Iscritto da
gen, 2022
Messaggi:
1

Menu html e css

Buongiorno, sono nuovo del forum e spero di poter apprendere tanto da voi e aiutarvi nel mio piccolo.

Ho un problema con un menu animato

<!DOCTYPE html>
<html>
    <head>
        <title>Magic Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="navigation">
            <ul>
                <li class="list active">
                    <a href="#">
                        <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>

                <div class="indicator"></div>

            </ul>
        </div>

        <script>
            const list =document.querySelectorAll('.list');
            function activeLink(){
                list.forEach((item) =>
                item.classList.remove('active'));
                this.classList.add('active');
            }
            list.forEach((item)=>
            item.addEventListener('click',activeLink));
        </script>

        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 

    </body>
</html>
CSS 


@import url('https://font.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif;
}

:root{
    --clr: #fff;
}

body{
    display: flex;
    justify-content: left;
    align-items: inherit;/*center;*/
    min-height: 100vh;
    background: var(--clr);
    position: relative;
}

.navigation{
    width: 50px;
    height: 100%;
    background: #222327;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: inherit;
    /*border-radius: 10px;*/
}

.navigation ul{
    display: block;
    height: 100%;
}

.navigation ul li{
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.navigation ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.navigation ul li a .icon{
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5em;
    text-align: center;
    transition: 0.5s;
    color: #fff;
}

.navigation ul li.active a .icon{
    transform: translateX(25px);
    color:#222327;
}

/*
.navigation ul li a .text{
    position: absolute;
    color: var(--clr);
    font-weight:700;
    font-size: 0.70em;
    transition: 0.5s;
    opacity: 0;
    transform: translate(0px);
}

.navigation ul li.active a .text{
    opacity: 1;
    transform: translate(0px);
}
*/

.indicator{
    position: absolute;
    top: 1%;
    right: -31.5px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    border: 5px solid var(--clr);
    transition: 0.5s;
}
/*
.indicator::before{
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 var(--clr);
}


.indicator::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 var(--clr);
}
*/
.navigation ul li:nth-child(1).active ~ .indicator{
    transform: translateY(calc(70px * 0));
}

.navigation ul li:nth-child(2).active ~ .indicator{
    transform: translateY(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator{
    transform: translateY(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator{
    transform: translateY(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator{
    transform: translateY(calc(70px * 4));
}


voglio capire come posso navigare tramite questo menu; togliendo # da href non funziona più la mia animazione...

nello specifico, sto aggiornando e migliorando una web application realizzata con <table> tr e td....(
non posso stravolgere l'intera struttura del software perchè è parecchio complesso).

Il sw si compone da una pagina index.php formata da una tabella con un tr e due td adiacenti

nel primo td c'è il menu e cliccando sull'icona si attiva l'include (php) che carica la pagina nel secondo td.


td1 

<ul>
                			<li class="list active">
                    			<a href="#page" title="HOME" target="_self" >
                        			<img class="icon" src="img/logo.svg" style="filter: invert(0)">
                    			</a>
                			</li>
                            <li class="list">
                    		    <a href="#" title="page1" target="_self">
                        						<img class="icon" src="img/page1.svg">
                    						</a>
                						</li>
td2 


<td>
					<?php
            			switch($_GET['page']){
                			case "home":
                    			include('home.php');
                      			break;
                  			case "page1":
                    			include('page1.php');
                      			break;



se ci inserisco in href="index.php?page=pagina1" funziona il caricamento della pagina! ma non mi funziona l'animazione .

Come posso ovviare a tale problema?

grazie

1 Risposte

  • P
    pxlm
    Pochi posts
    Iscritto da
    mar, 2022
    Messaggi:
    1

    Re: Menu html e css

    Ciao, basta aggiungere qualche linea di javascript per permettere il redirect dopo l'animazione.

    Per farlo aggiungi un valore "href" nel dataset degli elementi della lista e gli assegni il valore del redirect
    Es. data-href="prova2.html" oppure data-href="{url_di_destinazione}" 
     
<div class="navigation">
            <ul>
                <li class="list active" data-href="index.html">
                    <a href="#" >
                        <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list" data-href="prova2.html">
                    <a href="#" >
                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list" data-href="prova3.html">
                    <a href="#" >
                        <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list" data-href="prova4.html">
                    <a href="#" >
                        <span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>
                <li class="list" data-href="prova5.html">
                    <a href="#" >
                        <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                        <span class="text"></span>
                    </a>
                </li>

                <div class="indicator"></div>

            </ul>
</div>
    E poi nel javascript (direttamente dentro la tua funzione activeLink) devi definire un eventlistener che viene eseguito dopo che l'animazione sia finita e che si occupa di prendere quel valore "href" nel dataset dell'elemento e fa il reindirizzamento 
    
<script>
            const list =document.querySelectorAll('.list');
            function activeLink(){
                list.forEach((item) =>
                item.classList.remove('active'));
                this.classList.add('active');
                // Attende la fine dell'animazione e poi esegue il codice
                this.addEventListener("transitionend", () => {
                    
                    location.href = this.dataset.href;
                
                }, {once: true} /* Con once: true diciamo all'eventlistener di autodistruggersi dopo essere stato eseguito*/)
            }
            list.forEach((item)=>
            item.addEventListener('click',activeLink));

 </script>
    Adesso l'animazione viene riprodotta e dopo viene cambiata pagina
    Spero di essere stato d'aiuto, buon lavoro
Devi accedere o registrarti per scrivere nel forum
1 risposte