Elimina prodotto in css

Elimina! In questo post troverai una mia realizzazione riguardo all’eliminazione di un prodotto da carrello. Ho cercato di riprodurre un’effetto simile […]
Elimina prodotto in css

Elimina!

In questo post troverai una mia realizzazione riguardo all’eliminazione di un prodotto da carrello. Ho cercato di riprodurre un’effetto simile a quello della gestione dei brani musicali su iphone, praticamente quando si vuole eliminare una canzone da un album. Vediamo in che modo.

Codice Html

Come prima cosa ho impostato il codice html. Questa lista comprende l’elenco di alcuni prodotti. Accanto al nome vi è la quantità del prodotto inserito nel carrello ed a seguire il tasto elimina creato in jquery quando necessario.

<div id="container">
    <h1>Gestione Carrello</h1>
    <h2>Elenco dei prodotti</h2>
    <ul>
        <li>Scarpe Nike <span class="content"><span>2</span></span></li>
        <li>T-shirt Adidas <span class="content"><span>5</span></span></li>
        <li>Cappello NBA <span class="content"><span>1</span></span></li>
    </ul>
</div>

Codice Jquery

Mi sono servito di jquery anche per l’effetto fade in fase di eliminazione. A seguire quindi il codice Jquery e parte del Css.

$(document).ready(function() {
    //Creo l'elemento, associo gli attributi e lo inserisco nell'elemento span content
    $('<a>elimina</a>').attr({
        class: 'delete',
	href : '#'
    }).appendTo('.content');

    // al click dell'ancora, intercetto l'elemento contenitore li e appena terminato il fadeout, lo elimino.
    $("li a").click(function(){
        $(this).closest('li').fadeOut("normal", function() {
	    $(this).closest('li').remove();
        });
    });
});

Codice Css

li span.content{
    float:right;
    overflow:hidden;
}
li span.content span{
    float:left;
    background-color:#eee;
    position:relative;
    margin-right:5px;
    padding-right:3px;
}
li span.content a{
    text-decoration:none;
    float:left;
    text-indent:-60px;
    transition:700ms ease;
    color:#cc0000;
}
li span.content a:hover{
    color:#ab0000;
}
li:hover span.content a{
    text-indent:0;
}

Hai suggerimenti?

Spero la realizzazione sia stata di tuo gradimento. Se hai dei suggerimenti puoi usare il box dei commenti o la nostra fanpage. Alla prossima 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github