如何讓我的漢堡包菜單轉換爲水平菜單？

Question

我基本上是爲我的學校作業創建一個移動設計的響應式網頁。我製作了漢堡包菜單，但我無法將其轉換爲正常的水平菜單。我也有一個1280px的媒體查詢，並且不完全確定要將哪些內容放入我的媒體查詢中，因爲我試圖爲導航元素嘗試內聯塊，但它無效。

這裏是我的代碼：

$(".cross").hide(); 
 
$(".navholding").hide(); 
 
$(".hamburger").click(function() { 
 
    $(".navholding").slideToggle("slow", function() { 
 
    $(".hamburger").hide(); 
 
    $(".cross").show(); 
 
    }); 
 
}); 
 

 
$(".cross").click(function() { 
 
    $(".cross").hide(); 
 
    $(".navholding").slideToggle("slow", function() { 
 
    $(".hamburger").show(); 
 
    }); 
 
});

.hamburger { 
 
    transform: translateY(-80px); 
 
    height: 65px; 
 
    width: 65px; 
 
    background-color: #b56969; 
 
    margin-left: 20px; 
 
    background: url(images/Hamburger.png); 
 
    background-size: 100%; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.cross { 
 
    background: none; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0; 
 
    padding: 7px 15px 0px 15px; 
 
    color: #f1f1f1; 
 
    border: 0; 
 
    font-size: 3em; 
 
    line-height: 65px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
    z-index: 101; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    text-align: left; 
 
} 
 

 
nav ul, 
 
nav:active ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: black; 
 
    height: 100%; 
 
    top: 65px; 
 
    width: 100%; 
 
    z-index: 100; 
 
} 
 

 
nav li { 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 15px 0; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: hidden; 
 
    width: 20%; 
 
    background-color: black; 
 
    transform: translateY(-75px); 
 
} 
 

 
li a { 
 
    padding: 10px; 
 
    border-radius: 5px; 
 
    font-size: 20pt; 
 
    color: #b56969; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    background-color: #333333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <div class="hamburger"></div> 
 
    <div class="cross">&#10006;</div> 
 
    <ul class="navholding"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#"> About Me </a></li> 
 
    <li><a href="#"> Services </a></li> 
 
    <li><a href="#"> Hobbies </a></li> 
 
    <li><a href="#"> Work </a></li> 
 
    <li><a href="#"> Contact </a></li> 
 
    </ul> 
 
</nav>

Answer 1

你可以給你的當前導航手機的ID，然後創建與臺式機的ID的第二導航。

讓導航＃桌面{顯示：無;}

然後使用媒體查詢顯示：無;在nav＃mobile上顯示，並在nav＃桌面上顯示：繼承。

我不得不在這裏創建自己的漢堡，因爲你的圖像被鏈接了，但是這個想法就在那裏。

調整屏幕大小以查看更改。

最佳， 列維

UPDATE：薩姆指出，這隻能與CSS來實現，我相信他意味着它可以無需兩臺資產淨值來完成。 代碼已更新。

在媒體查詢中，display：none;在漢堡包上。 display：block;在ul.navholding上。

你的CSS可以清理了不少，我認爲這是其中的問題在未來。

$('#nav-icon1').click(function() { 
 
    $('#nav_list').toggleClass('active'); 
 
    });

ul li { 
 
    display: inline-block; 
 
    } 
 

 
    .navholding { 
 
    display: none; 
 
    } 
 

 
    #nav_list.active { 
 
    display: inherit; 
 
    } 
 

 
    /* Hamburgesa Icono de Navegación =========================================== */ 
 
    #nav-icon1 { 
 
    width: 40px; 
 
    height: 40px; 
 
    position: relative; 
 
    margin: 10px 10px; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
    z-index: 10000; 
 
    } 
 

 
    #nav-icon1 span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 3px; 
 
    width: 25px; 
 
    background: #282828; 
 
    opacity: 1; 
 
    left: 0; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .25s ease-in-out; 
 
    -moz-transition: .25s ease-in-out; 
 
    -o-transition: .25s ease-in-out; 
 
    transition: .25s ease-in-out; 
 
    z-index: 10000; 
 
    } 
 

 
    #nav-icon1 span:nth-child(1) { 
 
    top: 15px; 
 
    left: 7.5px; 
 
    } 
 

 
    #nav-icon1 span:nth-child(2) { 
 
    top: 23px; 
 
    left: 7.5px; 
 
    } 
 

 
    #nav-icon1.cross span { 
 
    background: #8a1913; 
 
    } 
 

 
    #nav-icon1.cross span:nth-child(1) { 
 
    top: 22px; 
 
    left: 7.5px; 
 
    -webkit-transform: rotate(135deg); 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    } 
 

 
    #nav-icon1.cross span:nth-child(2) { 
 
    top: 22px; 
 
    left: 7.5px; 
 
    -webkit-transform: rotate(-135deg); 
 
    -moz-transform: rotate(-135deg); 
 
    -o-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
    } 
 
    /* Final de la Hamburgesa Icono de Navegación =============================== */ 
 

 
    @media screen and (min-width: 1025px) { 
 
    div#nav-icon1 { 
 
     display: none; 
 
    } 
 

 
    .navholding { 
 
     display: block; 
 
    } 
 
    }

<nav> 
 
      <div id="nav-icon1"> 
 
      <span></span> 
 
      <span></span> 
 
      </div> 
 
      <ul id="nav_list" class="navholding"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#"> About Me </a></li> 
 
      <li><a href="#"> Services </a></li> 
 
      <li><a href="#"> Hobbies </a></li> 
 
      <li><a href="#"> Work </a></li> 
 
      <li><a href="#"> Contact </a></li> 
 
      </ul> 
 
     </nav> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

我要在這裏張貼此，即使有已經一個被接受的答案，因爲這是（在我看來）這樣做的乾淨方式。

如果有人需要任何解釋如何或爲什麼工作，評論和我會添加到這個職位。

function burgerSwitch(nav) { 
 
    if (nav.className == "open") { 
 
     nav.className = "close"; 
 
    } else { 
 
     nav.className = "open"; 
 
    } 
 
}

nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav ul li{ 
 
    float:left; /*instead of 'display:inline-block;' to make hamburger easier*/ 
 
    width: calc((100vw - 40px)/6);/*6 = number of navitems you have*/ 
 
    list-style-type: none; 
 
    
 
} 
 
nav ul li a { 
 
    background-color: #2fa35f; 
 
    display:block; 
 
    color: white; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    border: 2px solid green; 
 
    width:100%; //expand to entire li 
 
} 
 

 
nav ul li a:hover { 
 
    background-color: #3bcc77; 
 
} 
 

 
@media (max-width: 1000px) { 
 
    
 
    burgerButton { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #d84b3e; 
 
    color: white; 
 
    cursor: pointer; 
 
    margin-bottom:5px; 
 
    } 
 
    burgerButton:hover{ 
 
    background-color:#b74137; 
 
    } 
 
    burgerButton:after{ 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 3px; 
 
    font-family: Arial Black; 
 
    font-size: 40px; 
 
    } 
 
    nav.open burgerButton:after { 
 
    content: '\00d7'; 
 
    } 
 

 
    nav.close burgerButton:after { 
 
    content: '\2261'; 
 
    } 
 
    nav.close ul { 
 
    display: none; /*if nav has tag 'close', don't display list*/ 
 
    } 
 
    nav ul li { 
 
    width: calc(100vw - 40px); 
 
    } 
 
}

<nav class="close" id="nav"> 
 
    <burgerButton class="open" onclick="burgerSwitch(this.parentNode);"> 
 
    </burgerButton> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#"> About Me </a></li> 
 
     <li><a href="#"> Services </a></li> 
 
     <li><a href="#"> Hobbies </a></li> 
 
     <li><a href="#"> work </a></li> 
 
     <li><a href="#"> contact </a></li> 
 
    </ul> 
 
</nav>