It has to pass my dropdow menu to one of 3 Lines , but only when the mobile resolutions arrive

Question

It has to pass my dropdow menu to one of 3 Lines , but only when the mobile resolutions arrive

Asked 9 years, 2 months ago

Viewed 100 times

0

I can’t do that, because I’m still a layman in responsive design. I would be grateful for anyone who helps me.

Here is the designation 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>

1

Post your HTML code there, as we will help you without a code that we can execute here... We need to know the structure of your html, which framework you are using, the classes and etc.

– Paulo Roberto

2015/10/04 at 00:02

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Paulo Roberto • **1,988** points · Answer 1 · 2015-10-04T00:06:54+00:00

This will 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>
<script type="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 navigation list (#Nav). In our CSS we are doing display: none, in our #nav.js.. We can do it in jQuery as follows:

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

Then 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 element #nav:

$("#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 in this way:

$(window).resize(function(){
    if(window.innerWidth > 768) {
        $("#nav").removeAttr("style");
    }
});