Menu simple vertical conçu en utilisant CSS3 et HTML5 facile à utiliser, peut être ajouté à n'importe quelle blog blogger ou site facilement.

Menu vertical avec des icônes pour Blogger


Ce menu viennent avec 10 couleurs différentes et peut être utilisé "droite à gauche" ou "de gauche à droite".

Vous pouvez également ajouter vos liens dans les réseaux sociaux (Facebook, Twitter, YouTube ...).


HTML5 CSS3 et XHTML
  • Fonctionne sur tous les principaux navigateurs
  • Clean & Simple désignation
  • Pur Css
  • Facile à utiliser.
  • CSS Animations
  • Réseaux sociaux
  • Direction droite et gauche. Le Code Source

Pour l'Installez-le  aller à disposition >> Ajouter un nouveau Widget >> HTML / JAVASCRIPT

Coller le code ci-dessous il >>
<style>
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#BuildNextWebMenu{
    width: 240px;
    height: 100%;
    position: fixed;
}

.BuildNextWebMenu-left{
    left: -180px;
    top: 0px;
    transition:left 1s;
}

.BuildNextWebMenu-left:hover{
    left:0px;
}

/*################## RIGHT MENU ##############*/
.BuildNextWebMenu-right{
    right: -180px;
    top: 0px;
    direction: rtl;
    transition:right 1s;
}
.BuildNextWebMenu-right ul>li i,#toggle{
    right: 200px;
}

.BuildNextWebMenu-right:hover{
    right:0px;
}


#menuHeader{
    width: 100%;
    height: 60px;
    cursor: pointer;
}

#toggle{
    position: absolute;
    left: 195px;
    top: 10px;
}

#menuLogo{
    position: absolute;
    top: 10px;
}

#BuildNextWebMenu ul>li{
    position: relative;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#BuildNextWebMenu ul>li a{
    color: #fff;
    line-height: 48px;
    margin: 20px;
    font-family: 'Alegreya Sans SC', sans-serif;
    transition: color 0.5s;
    text-decoration: none;
}
#BuildNextWebMenu ul>li i{
    position: absolute;
    left: 200px;
    top:15px;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.5s;
}
#social{
    width: 85%;
    height: 100px;
    margin: 20px auto auto auto;
}

#social a{
    text-decoration: none;
}

#social i{
    width: 36px;
    height: 36px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.5s;
}

#social .fa-facebook:hover{
    background: #305891;
}

#social .fa-twitter:hover{
    background: #2CA8D2;
}

#social .fa-youtube:hover{
    background: #C82828;
}

#social .fa-google-plus:hover{
    background: #CE4D39;
}

#BuildNextWebMenu{
    background: #222222;
    color: #fff;
}
#menuHeader{
    background: #24AAE9;
}

#BuildNextWebMenu ul>li:hover  a{
    color: #24AAE9;
}
#BuildNextWebMenu ul>li:hover  i{
    color: #24AAE9;
}
</style>
<div id="BuildNextWebMenu" class="BuildNextWebMenu-left">
    <div id="menuHeader">
        <div id="toggle"><i class="fa fa-bars fa-2x"></i></div>
      <div id="menuLogo"><img src="img/logo.png" alt="BuildNextWebMenu"/></div>
    </div>
    <nav>
        <ul>
            <li>
                <a href="#">
                    HOME <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    ABOUT <i class="fa fa-user"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CLIENTS    <i class="fa fa-users"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SHOP <i class="fa fa-shopping-cart"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    NEWS <i class="fa fa-file"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SERVICES <i class="fa fa-laptop"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    PORTFOLIO <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    TEAM <i class="fa fa-group"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    BLOG <i class="fa fa-folder"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    MAP <i class="fa fa-map-marker"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CONTACT <i class="fa fa-envelope"></i>
                </a>
            </li>
        </ul>
    </nav>

    <div id="social">
        <a href="#">
            <i class="fa fa-facebook fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-twitter fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-youtube fa-2x"></i>
        </a>   
    </div>

</div>
Et Enregistrer Si vous avez des questions qui sont au-delà de la portée de ce fichier d'aide, s'il vous plaît sentir libre à l'email. THANKUHH,,,,, FIX :: - Pour les icônes de travailler s'il vous plaît Prendre ces mesures Collez les lignes ci-dessous donnés dans votre éditeur de modèle sous méta contenu de votre blogue (par exemple < meta = contenu)
<link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Espérons que le problème avec des icônes ont été corrigés maintenant. 

0 commentaires:

Enregistrer un commentaire

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top