수직 메뉴로 서브 메뉴가있는 Horizontal Responsive 메뉴

나는 severals 년 이후로 하위 메뉴가있는 간단한 가로 CSS 메뉴를 사용합니다. 응답 형으로 변환하려고합니다.수직 메뉴로 서브 메뉴가있는 Horizontal Responsive 메뉴

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
     margin: 0; 
    } 
ul{padding-left: 0;} 

    .container { 
     display: inline-block; 
     cursor: pointer; 
    } 

    .bar1, .bar2, .bar3 { 
     width: 35px; 
     height: 5px; 
     background-color: #BDF1A5; 
     margin: 6px 0; 
     transition: 0.4s; 
    } 

    .change .bar1 { 
     -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
     transform: rotate(-45deg) translate(-9px, 6px); 
    } 

    .change .bar2 { 
     opacity: 0; 
    } 

    .change .bar3 { 
     -webkit-transform: rotate(45deg) translate(-8px, -8px); 
     transform: rotate(45deg) translate(-8px, -8px); 
    } 

    .menu_deroulant { 
     padding: 0; 
     margin: 0; 
     list-style: none; 
     text-align: center; 
     background-color: #534D4D; 
     font-size: 0; 
    } 

     .menu_deroulant li { 
      float:left; 
      display: inline-block; 
      position: relative; 
      font-size: 12px; 
     } 

     .menu_deroulant a { 
      font-family: Candara; 
      font-size: medium; 
      font-weight: bold; 
      display: block; 
      width: 180px; 
      height: 50px; 
      line-height: 50px; 
      text-align: center; 
      background-color: #534D4D; 
     } 

      .menu_deroulant a:visited, .menu_deroulant a:link { 
       color: #BDF1A5; 
       text-decoration: none; 
      } 

      .menu_deroulant a:hover { 
       background-color: #897E7E; 
      } 

     .menu_deroulant li.icon { 
      display: none; 
     } 

     .menu_deroulant ul { 
      left: -999em; 
      position: absolute; 
     } 

     .menu_deroulant li:hover > ul { 
      left: 0; 
     } 

    @media screen and (max-width:680px) { 
     ul.menu_deroulant li:not(:first-child) { 
      display: none; 
     } 

     ul.menu_deroulant li.icon { 
      float: right; 
      display: inline-block; 
     } 
    } 

    @media screen and (max-width:680px) { 
     ul.menu_deroulant.responsive { 
      position: relative; 
     } 

      ul.menu_deroulant.responsive li.icon { 
       position: absolute; 
       right: 0; 
       top: 0; 
      } 

      ul.menu_deroulant.responsive li { 
       float: none; 
       display: inline; 
      } 

       ul.menu_deroulant.responsive li a { 
        display: block; 
        text-align: left; 
       } 
    } 
</style> 
</head> 
<body> 

<ul class="menu_deroulant" id="myTopnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li> 
     <a href="#">Réalisations</a> 
     <ul> 
      <li><a href="/Realisations-Site-Web.aspx" title="Réalisations de Site Web">Réalisations de Site Internet</a></li> 
      <li><a href="/Realisations-Intranet.aspx" title="Réalisations d'Intranet et de développement">Réalisations d'Intranet</a></li> 
     </ul> 
    </li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li class="icon"> 
     <div class="container" onclick="myFunction(this)"> 
      <div class="bar1"></div> 
      <div class="bar2"></div> 
      <div class="bar3"></div> 
     </div> 
    </li> 
</ul> 

<script> 
    function myFunction(y) { 
     y.classList.toggle("change"); 
     var x = document.getElementById("myTopnav"); 
     if (x.className === "menu_deroulant") { 
      x.className += " responsive"; 
     } else { 
      x.className = "menu_deroulant"; 
     } 
    } 
</script> 

</body> 
</html>

하지만 내 하위 메뉴에는 세로 모드 문제가 있습니다. 좋은 곳이 아닙니다. w3schools.com과 Google에서 검색하지만 필요한 정보를 찾지 못했습니다.

출처

2016-10-16 YannickIngenierie

마지막으로 기본 가로 메뉴를 변경합니다. 그리고 그거야

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
     margin: 0; 
    } 

    .container { 
     display: inline-block; 
     cursor: pointer; 
    } 

    .bar1, .bar2, .bar3 { 
     width: 35px; 
     height: 5px; 
     background-color: #BDF1A5; 
     margin: 6px 0; 
     transition: 0.4s; 
    } 

    .change .bar1 { 
     -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
     transform: rotate(-45deg) translate(-9px, 6px); 
    } 

    .change .bar2 { 
     opacity: 0; 
    } 

    .change .bar3 { 
     -webkit-transform: rotate(45deg) translate(-8px, -8px); 
     transform: rotate(45deg) translate(-8px, -8px); 
    } 

    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #534D4D; 
    } 

    li { 
     float: left; 
    } 

     li a { 
      display: inline-block; 
      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
      width: 180px; 
     } 

      li a:hover { 
       background-color: red; 
      } 

     li.dropdown { 
      display: inline-block; 
     } 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
    } 

     .dropdown-content a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
      text-align: left; 
     } 

      .dropdown-content a:hover { 
       background-color: #f1f1f1; 
      } 

    .dropdown:hover .dropdown-content { 
     display: block; 
    } 

    li.icon { 
     display: none; 
    } 
    /*li:not(:first-child)*/ 
    @media screen and (max-width:680px) { 
     ul.menu_deroulant li { 
      display: none; 
     } 

      ul.menu_deroulant li.icon { 
       float: right; 
       display: inline-block; 
       background-color: #534D4D; 
       padding: 5px; 
      } 

     ul.menu_deroulant.responsive { 
      position: relative; 
     } 

      ul.menu_deroulant.responsive li.icon { 
       position: absolute; 
       right: 0; 
       top: 0; 
      } 

      ul.menu_deroulant.responsive li { 
       float: none; 
       display: inline; 
      } 

       ul.menu_deroulant.responsive li a { 
        display: block; 
        text-align: left; 
       } 

     .dropdown-content { 
      position: absolute; 
      left: 208px; 
      top: 0; 
      bottom: 0; 
     } 
    } 
</style> 
</head> 
<body> 

<ul class="menu_deroulant" id="myTopnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li class="dropdown"> 
     <a href="#">Réalisations</a> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
    </li> 
    <li><a href="#contact">Contact</a></li> 
    <li class="icon"> 
     <div class="container" onclick="myFunction(this)"> 
      <div class="bar1"></div> 
      <div class="bar2"></div> 
      <div class="bar3"></div> 
     </div> 
    </li> 
</ul> 

<script> 
    function myFunction(y) { 
     y.classList.toggle("change"); 
     var x = document.getElementById("myTopnav"); 
     if (x.className === "menu_deroulant") { 
      x.className += " responsive"; 
     } else { 
      x.className = "menu_deroulant"; 
     } 
    } 
</script> 

</body> 
</html>

그리고 좋다. 내 코드를 도와 드리겠습니다 .-)

출처

2016-10-17 11:00:25 YannickIngenierie

수직 메뉴로 서브 메뉴가있는 Horizontal Responsive 메뉴

답변

관련 문제