Un menu avec icones open close

Dans ce petit tuto, on va voir comment utiliser des icones autre que celles utilisées par bootstrap notamment, ou font awsome..

On va se servir de Linear Icon qui génère de belles icones comme l’icone menu de ce site.

Voici le lien  cdn à mettre dans le header, ou le fichier functions de votre wordpress:

La version svg : https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js

La version normale css: https://cdn.linearicons.com/free/1.0.0/icon-font.min.css

Perso , je suis sur wordpress, j’ai téléchargé le fichier css et je l’appelle via mon fichier functions.php:

wp_enqueue_style('linear', get_template_directory_uri() . '/css/linearicon.css');

La police

Dans ce fichier .Css on retrouve l’appel aux fichiers web font

@font-face {

	font-family: 'Linearicons-Free';

	src:url('../fonts/Linearicons-Free.eot?w118d');

	src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),

		url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),

		url('../fonts/Linearicons-Free.woff?w118d') format('woff'),

		url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),

		url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');

	font-weight: normal;

	font-style: normal;

}

Le chemin dépend ici bien sur de votre arborescence.Ces fichiers sont à télécharger sur le site Linear Icon gratuitement.

Mes Icones menu

Je place ces deux lignes dans le fichier header,  sous ou au dessus de ma div menu: les classes lnr lnr-menu et lnr lnr-cross vont appeler mes icones d’ouverture et fermeture de menu:

 <a href="javascript:;" class="close"><span class="lnr lnr-cross"></span></a> 

                 <a href="javascript:;" class="icon-menu-button"><span class="lnr lnr-menu"></span></a>

Le css

Le css qui va avec: ici je donne une classe à mon lien pour pouvoir le placer, puis je stylise les classes linear icon pour la couleur, taille etc…Bien sur le css dépendra de chacun ,ici le css est celui appliqué sur ce site.(icone en position absolute à gauche)

.icon-menu-button 

{

    position: absolute;

    left: 2em;

    top: 3em

}



.close{ 

    position: absolute;

    left: 1em;

    top: 2em;

    z-index:999;

}



.lnr-menu

{

    color:#fff;

    font-size: 40px;  

    -webkit-transition: 0.1s color;

    -moz-transition: 0.1s color;

    -o-transition: 0.1s color;

    transition: 0.1s color;

}



.lnr-menu:hover

{

    color:#999

}  



.lnr-cross

{

    font-size:40px;

    cursor: pointer; 

    color: #fff;

    -webkit-transition: 0.1s color;

    -moz-transition: 0.1s color;

    -o-transition: 0.1s color;

    transition: 0.1s color;

    display:block;



}



.lnr-cross:hover

{

    color:#999

}

Le Javascript

Enfin la partie js, ici une fonction pour l’ouverture où au clic sur l’icone on déplace le menu de 250px, on fait disparaitre l’icone menu, on fait apparaitre l’icone de fermeture.Et inversement pour le clic sur le bouton fermture:

jQuery(document).ready(function() 

{

  jQuery(".close").css("display", "none");

 

    var isMenuOpen = false;

 

   

   jQuery('.icon-menu-button').click(function()

    {

        if (isMenuOpen === false)

        {

      

           jQuery("#sidebar-wrapper,#wrapper").clearQueue().animate({

                left : '250px'

            },200);

            jQuery(this).fadeOut(200);

            jQuery(".close").fadeIn(300);

             

            isMenuOpen = true;

        } 

    });

     

  jQuery('.close').click(function()

    {



        if (isMenuOpen === true)

        {

           jQuery("#sidebar-wrapper,#wrapper").clearQueue().animate({

                left : '-250px'

            },200);         

           jQuery('.close').fadeOut(200);

            jQuery(".icon-menu-button").fadeIn(300);

             

            isMenuOpen = false;

        }

    });

	});

 

Mis à jour le Par Copier coller | Dans CSS