domingo, 11 de outubro de 2015

Menu multi drop down Css puro

Menu-multi-drop-down-css-puro


Hoje vamos compartilhar um um menu drop down com puro CSS que vai dar a seu blogger um visual único realmente com o passar do tempo CSS esta em alta é muito utilizado para estilização mas o melhor disso é que com ele é capaz de fazer menu de uma forma responsive com carregamento mais rápido e também uma melhor performance para seu blogger por isso se você procura um bom menu drop down multi com puro CSS aqui esta um veja abaixo como adicionar no seu blogger


Para Adicionar siga os passos

1 Faça login no seu blogger então 
procure pelo menu modelo >> editar HTML 
Com as teclas combinadas CTRL+F busque por <style> ou <b: skin> e coloque sobre isso o código seguinte 
/* Menu Multi Dropdown */
ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}
ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}
ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#CB4E48; padding:0 7px 0}
ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}
ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}
ul#mainmenu li:hover {z-index:1;}
ul#mainmenu ul ul {position:absolute;left:100%;top:0;}
ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}
* html ul#mainmenu li a {display:inline-block;}
ul#mainmenu>li {margin:0;}
ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}
ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}
ul#mainmenu ul li {float:none;margin:7px 0 0;}
ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}
ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}
ul#mainmenu ul span {background-image:none; padding-right:5px;}
ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#988989;}
ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#CB4E48;color:#FFFFFF;}


2. Abaixo está o código chamador menu dropdown, por favor edite link e título estão no código, personalizar ao seu blog, e, em seguida, acima ou abaixo do cabeçalho do blog

<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->

Então salve o modelo.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner