如何將文本鏈接添加到下拉導航

我已經爲我的網站創建了移動設備的三層按鈕，但是當我點擊它時，沒有任何反應。我不確定如何添加該功能，因此當您點擊它時，全屏幕上的導航鏈接（如home等）會出現在按鈕上的下拉列表中。以下是我迄今爲止編寫的代碼。如何將文本鏈接添加到下拉導航

nav .menu-holder { 
 
    width: calc(90px + 20px); 
 
    height: 100%; 
 
    padding: 30px 20px; 
 
    background: transparent; 
 
    text-align: right; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 

 
nav .menu-holder .menu-icon { 
 
    position: relative; 
 
    height: 100%; 
 
    cursor: pointer; 
 
} 
 

 
nav .menu-holder .menu-icon span { 
 
    max-width: 30px; 
 
    height: 2px; 
 
    width: 100%; 
 
    background: #ffffff; 
 
    position: absolute; 
 
    right: 50%; 
 
    margin-right: -15px; 
 
} 
 

 
nav .menu-holder .menu-icon span:nth-child(1) { 
 
    top: 0; 
 
} 
 

 
nav .menu-holder .menu-icon span:nth-child(2) { 
 
    top: calc(50% - 1px); 
 
} 
 

 
nav .menu-holder .menu-icon span:nth-child(3) { 
 
    bottom: 0; 
 
} 
 

 
@media (min-width: 1024px) { 
 
    nav .menu-holder { 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-2 col-lg-3"> 
 
     <img src="http://www.placecage.com/60/60" class="logo-holder" alt="Site Logo"> 
 
     </div> 
 
     <div class="col-10 col-lg-9"> 
 
     <div class="menu-holder"> 
 
      <div class="menu-icon"> 
 
      <span></span> 
 
      <span></span> 
 
      <span></span> 
 
      </div> 
 
     </div> 
 
     <ul class="cssmenu"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li class="hasDropdown"> 
 
      <a href="#">Dropdown Link</a> 
 
      <ul> 
 
       <li><a href="#">One</a></li> 
 
       <li><a href="#">Two</a></li> 
 
       <li><a href="#">Three</a></li> 
 
       <li><a href="#">Four</a></li> 
 
       <li><a href="#">Five</a></li> 
 
       <li><a href="#">Six</a></li> 
 
       <li><a href="#">Seven</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">News</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

我不知道我需要寫的菜單彈出你點擊移動視圖按鈕後，什麼代碼。這裏是移動版本按鈕

https://gyazo.com/03a1ef176ad7f1aec6be029f47d345b0

任何幫助將不勝感激的屏幕截圖。

來源

2017-10-10 Shaun

你有爲它編寫的任何CSS？ –

如果它的引導比你必須使用** Dropdown Link **就像那樣 – LSKhan

我已經添加了CSS。如果它是錯誤的，我對此仍然陌生。它不是自舉。 – Shaun

您將需要使用CSS和JavaScript。 HTML無法更改DOM元素。 W3有一個如何here。

既然你說你正在使用Bootstrap，他們對他們的navbars如何工作有很好的文檔。你可以找到相關章節here。

看起來你的代碼主要是缺少相關的引導類。一旦你添加那些你應該很好。

HTML代表內容，CSS代表樣式，JavaScript代表功能。儘管CSS和JavaScript框架現在有點模糊了線條。

來源

2017-10-10 20:03:06

jQuery是Javascript。另外他說他使用Bootstrap，所以Javascript已經存在 – SourceOverflow

嗯，我對JavaScript沒有太多瞭解。代碼很多，使它在Javascript上工作？ – Shaun

對不起，我只是困惑。我已經完成了HTML和CSS部分，只是混淆了代碼以使其工作。我想不明白。 – Shaun

這裏有一個快速搗鼓你您可以使用單擊綁定等提高，但它會讓你開始 https://jsfiddle.net/Steven_Whitby/rg84t62f/

的Html

<div class="menu-bar"> 
    <ul> 
     <li class="menu-item" onMouseOver="$('.drop-menu').show()" onMouseOut="$('.drop-menu').hide()" style="list-style: none;cursor: default;"> 
      Dropdown Link 
      <ul class="drop-menu"> 
       <li class="drop-item"><a href="#">One</a></li> 
       <li class="drop-item"><a href="#">Two</a></li> 
       <li class="drop-item"><a href="#">Three</a></li> 
       <li class="drop-item"><a href="#">Four</a></li> 
       <li class="drop-item"><a href="#">Five</a></li> 
       <li class="drop-item"><a href="#">Six</a></li> 
       <li class="drop-item"><a href="#">Seven</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

a { 
    color:white; 
    text-decoration: none; 
} 
.menu-bar { 
    background-color: #57578b; 
    height: 25px; 
} 
.menu-item { 
    padding: 0 4px 0 4px; 
    color: rgb(255, 255, 255); 
    border-radius: 1px; 
    margin: 2px; 
    float: left; 
    /* font-size: 1.2em; */ 
    text-decoration: none!important; 
    cursor: pointer; 
} 
.menu-item:hover { 
    background-color: white; 
    color: black; 
} 
.drop-menu { 
    position: absolute; 
    z-index: 1000; 
    display: none; 
    min-width: 160px; 
    padding: 5px 0; 
    background-color: rgb(87, 87, 138); 
    -webkit-background-clip: padding-box; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    overflow: hidden; 
} 
.drop-item { 
    padding: 4px 10px 4px 10px; 
    color: rgb(255, 255, 255); 
    cursor: pointer; 
} 
.drop-item:hover { 
    background-color: rgb(181, 178, 178); 
    color: black; 
}

來源

2017-10-10 20:41:19

如何將文本鏈接添加到下拉導航

回答

相關問題