Menu responsivo

[LuizH.M 0]

Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs

 

HTML

<!-- Barra de Menu -->
<div class="container">
    <nav class="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="agenda.php">Agenda</a></li>
            <li><a href="departamento.php">Departamento</a></li>
            <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
            <li><a href="#localizacao">Localização</a></li>
            <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
            <li><a href="#" target="blanck" class="fa fa-twitter"></a>
            <li><a href="#" class="fa fa-youtube"></a>
        </ul>
    </nav>
</div>

 

CSS

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

.menu{
width:100%;
height:54px;
background-color: #333;
font-family:'Arial';
}

.menu ul{
list-style:none;
position:relative;
background-color: #333;

 /*css custom*/
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}

.menu ul li{
width:50px auto;
float:left;

}

.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
color:#fff;

}

.menu ul ul{
position:absolute;
visibility:hidden;
}

.menu ul li:hover ul{
visibility:visible;
}

.menu a:hover{
background-color:#f4f4f4;
color:#555;
}

.menu ul ul li{
float:none;
border-bottom:1px solid #ccc;
}

.menu ul ul li a{
background-color:#069;
}

@media screen and (max-width: 640px){
.menu ul li{
        width: 100%;
        text-align:center;
    }
    .menu a{
        text-align:center;
    } 
}

[Francklyn Souza 0]

Mano vou lhe ajudar, só com a <div> pois não utilizo <nav> no meu site, só espero que lhe ajude

<!-- Barra de Menu -->
<div class="container">
    <div class="menu-resp"></div>
  		<div class="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="agenda.php">Agenda</a></li>
            <li><a href="departamento.php">Departamento</a></li>
            <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
            <li><a href="#localizacao">Localização</a></li>
            <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
            <li><a href="#" target="blanck" class="fa fa-twitter"></a>
            <li><a href="#" class="fa fa-youtube"></a>
        </ul>
  		</div>
    </div>

no seu CSS

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

.menu{
width:100%;
height:54px;
background-color: #333;
font-family:'Arial';
}
.menu ul{
list-style:none;
position:relative;
background-color: #333;
 /*css custom*/
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}
.menu ul li{
width:50px auto;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
.menu ul li:hover ul{
visibility:visible;
}
.menu a:hover{
background-color:#f4f4f4;
color:#555;
}
.menu ul ul li{
float:none;
border-bottom:1px solid #ccc;
}
.menu ul ul li a{
background-color:#069;
}
@media screen and (max-width: 640px){
.menu ul li{
        width: 100%;
        text-align:center;
    }
    .menu a{
        text-align:center;
    } 
}
@media only screen and (max-width:980px) {
    .menu-resp {
        display: block;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAkAQMAAADM7JoSAAAABlBMVEUAAAC4ISjXAKt+AAAAAXRSTlMAQObYZgAAABdJREFUCNdjoBKQ////AYKiXANhlZQDAPelEe9cRNbRAAAAAElFTkSuQmCC') center no-repeat;
        padding: 20px;
        cursor: pointer;
    }
    .menu {
        display: none;
    }
    .menu li {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        padding: 0px;
    }  

}

Mano tenta ver aí e depois avisa se deu certo ou errado pra eu ver onde está o erro!

[LuizH.M 0]

então jovem o menu desaparece , mas como eu faço pra ele aparecer quando click no botão ?

[Thalles Rangel 0]

usa JavaScript

[LuizH.M 0]

Será que você tem um código para exemplo ?