You can pass my dropdow menu to one of 3 lines ☰, but only when the mobile resolutions arrive

Navigation
0

I can not do this, therefore, I am still a layman in the designe responsive. It would be grateful to help me.

Here is the designe of my menu !! 

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 100%;
	margin-left:11.23046875%;
    text-align: left;
}
.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}
.nav ul li:hover{
    background-color: #000;
}
.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}
.nav ul li:hover ul{
    display: block;
}
.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}
.nav ul ul li {
    display: block;
}
.nav ul ul li a:hover{
    color: #fff;
}
<div class="nav">
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Últimas Noticías</a>
                    </li>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Últimas Notícias</a>
                    </li>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Últimas Notícias</a>
                    </li>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Últimas Notícias</a>
                    </li>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
        </ul>
    </div>
    
 </div>
    
asked by anonymous 03.10.2015 / 23:46

1 answer

3

This would solve your problem, apply CSS and Jquery to your elements: 

<!DOCTYPE>
<html>
<head>
    <title>Responsive 3-Line Menu</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        width:100%;
    }
    li {
        width:33%;
        float:left;
        border-right: 1px solid #eee;
    }
    li:last-child {
        border-right:none;
    }
    li a {
        display: block;
        width:80%;
        background:#ddd;
        padding:4% 10%;
        font-size:1.35em;
        text-decoration: none;
    }
    @media screen and (max-width: 768px) {
        #menu {
            width:1.4em;
            display: block;
            background:#ddd;
            font-size:1.35em;
            text-align: center;
        }
        #nav.js {
            display: none;
        }
        ul {
            width:100%;
        }
        li {
            width:100%;
            border-right:none;
        }
    }
    @media screen and (min-width: 768px) {
        #menu {
            display: none;
        }
    }
    </style>
</head>
<body>
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><scripttype="text/javascript">
    $("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").toggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });
</script>
</body>
</html>

Explanation:

First we want to hide our cluttered browsing list (#nav). In our CSS we are doing display: none , in our #nav.js. . We can do this in jQuery as follows: 

$("#nav").addClass("js");

Next, we want to add the menu link before ( before ) of our #nav. 

$("#nav").addClass("js").before('<div id="menu">☰</div>');

Then we need to add an event ( click ) to the menu and then toggle the visibility of the #nav element: 

$("#menu").click(function(){$("#nav").toggle();});

And finally we return the menu to normal when the width of the screen is greater than 768px, removing the method removeAttr this way: 

$(window).resize(function(){
    if(window.innerWidth > 768) {
        $("#nav").removeAttr("style");
    }
});
    
04.10.2015 / 02:06
Reset button on the form Validate email with angularjs