quinta-feira, 22 de setembro de 2016

Menu drop down responsive Untuk Blogger

menu-drop-down-responsive-untuk-for-blogger

Hoje vamos compartilhar código para menu responsive dropdown untuk para blogger esse modelo é um modelo muito util uma vez que de nada adianta ter um template responsive se o seu menu não esta a considerar isso então para adicionar isso no seu Blogger siga os passos abaixo

Como colocar o menu drop down responsive no blogger 

Faça login no Blogger então vá em menu modelo então 

Editar >> HTML/JavaScript com as teclas combinadas CTRL+F busque por ]]></b:skin> e logo acima disso copie e cole o seguinte código.


/* Responsive Menu Dropdown */
.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {margin: 0; padding: 0;}

.dropdowns a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;}

.toggleMenu {
    display:  none;
}
.nav {
    list-style: none;
     *zoom: 1;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav a {
    padding: 10px 15px;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    position: relative;
    z-index:100;
}
.nav li li li a {
    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}
.toggleMenu {
    background: #666;
    color: #fff;
}

.nav {
     background:#175e4c;
}

.nav a {
    color:#fff;
}

.nav > li {
    border-top: 1px solid #104336;
}

.nav li li a {
    background: #1d7a62;
    border-top: 1px solid #175e4c;
}

.nav li li li a {
    background:#249578;
    border-top: 1px solid #1d7a62;
}
.dropdowns {
    width: 100%;
    max-width: 960px;
    background: #111;
}

a.toggleMenu {
    padding: 10px 15px;background: #111;
}

.nav ul {
    width: 9em;
}

.nav > li > .parent {
   
}

3. Copie o seguinte código abaixo e cole isso acima de  </body> ou </head>


<script type="text/javascript">
(function($){
    $.fn.dropdowns = function (options) {
        
        var defaults = {
            toggleWidth: 768
        }
        
        var options = $.extend(defaults, options);
        
        var ww = document.body.clientWidth;
        
        var addParents = function() {
            $(".nav li a").each(function() {
                if ($(this).next().length > 0) {
                    $(this).addClass("parent");
                }
            });
        }
        
        var adjustMenu = function() {
            if (ww < options.toggleWidth) {
                $(".toggleMenu").css("display", "inline-block");
                if (!$(".toggleMenu").hasClass("active")) {
                    $(".nav").hide();
                } else {
                    $(".nav").show();
                }
                $(".nav li").unbind('mouseenter mouseleave');
                $(".nav li a.parent").unbind('click').bind('click', function(e) {
                    // must be attached to anchor element to prevent bubbling
                    e.preventDefault();
                    $(this).parent("li").toggleClass("hover");
                });
            } 
            else if (ww >= options.toggleWidth) {
                $(".toggleMenu").css("display", "none");
                $(".nav").show();
                $(".nav li").removeClass("hover");
                $(".nav li a").unbind('click');
                $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
                    // must be attached to li so that mouseleave is not triggered when hover over submenu
                    $(this).toggleClass('hover');
                });
            }
        }
        
        return this.each(function() {
            $(".toggleMenu").click(function(e) {
                e.preventDefault();
                $(this).toggleClass("active");
                $(this).next(".nav").toggle();
                adjustMenu();
            });
            adjustMenu();
            addParents();
            $(window).bind('resize orientationchange', function() {
                ww = document.body.clientWidth;
                adjustMenu();
            });
        });
    
    }
})(jQuery)
</script>
<script>
    $(".dropdowns").dropdowns();
</script>

Código HTML 

<div class='dropdowns'>

<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav'>
  <li><a href='/'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>

    <li class='test'>
        <a href='#'>Dropdown1</a>
        <ul>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Sandals</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Wedges</a></li>
                    <li><a href='#'>Heels</a></li>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Flats</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Formal</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dropdown2</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tank Tops</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Blouses</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tunics</a></li>
                    <li><a href='#'>Camisoles</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Pants</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                    <li><a href='#'>Leggings</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Skirts</a>
        <ul>
            <li>
                <a href='#'>Long</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Short</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mini</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dresses</a>
        <ul>
            <li>
                <a href='#'>Casual</a>
            </li>
            <li>
                <a href='#'>Formal</a>
                <ul>
                    <li><a href='#'>Wedding</a></li>
                    <li><a href='#'>Party</a></li>
                </ul>
            </li>
         
        </ul>
    </li>
    <li>
        <a href='#'>Seks</a>
        <ul>
            <li><a href='#'>Mens</a></li>
            <li><a href='#'>Womens</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Link</a>
    </li>
</ul>
</div>

Salve e pronto.

Nota: Verifique se seu template possui Jquery caso não tenha adicione o seguinte código acima de </head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
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