將選擇下拉列表更改爲無序列表

我創建了一個帶有選擇和選項標籤的下拉菜單，但是這些不允許我鏈接到其他網頁，我讀到必須創建一個無序列表，因爲我錯誤地創建了我的下拉列表。將選擇下拉列表更改爲無序列表

這裏是我的代碼目前的樣子： https://jsfiddle.net/pferdefleisch/Q7HNj/1/

<select id="one"> 


<option value = "catalouge"> 
<a href = "catalouge.html">PRODUCT CATALOUGE</a> 
</option> 


<option> 
    Vacuum Components 
</option> 

<option> 
    Valve Components 
</option> 

<option> 
    Roughing Components 
</option> 

<option> 
    Vacuum Measurement 
</option> 

<option> 
    Glass Components 
</option> 

<option> 
    Electrical Feedthroughs 
</option> 

<option> 
    Motion and manipulation 
</option> 

<option> 
    Thin Film Products 
</option> 
</select>

CSS：

#one { 
    margin: 10px; 
    padding: 10px; 
    width: 20%; 
    font-family: Palatino Linotype; 
    font-size: 15px; 
    -moz-appearance: none; 
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset; 
    box-shadow: 0 3px 0 #ccc, 0 -1px purple inset; 
    list-style: none; 

    position:absolute;top:23%;left:2%; 
}

我怎麼會變成一個正常的下拉列表中呢？

來源

2015-10-22 Alex

使用bootstrap我的朋友，使用bootstrap :: http://getbootstrap.com/components/#navbar – AdamJeffers

這對我來說已經很正常了。你是什麼意思，它不允許你鏈接到其他網頁？ – lurker

我使用這個作爲我的導航欄，我想鏈接到其他.html頁面，但我聽說這是不正確的做事方式 – Alex

它看起來像你使用選擇下拉菜單。這裏有一個你可能想要做的小提琴。這個小提琴純粹是HTML和CSS。

https://jsfiddle.net/2q3kkh8n/2/

的HTML

<div id="dropdown-container"> 
    <div id="dropdown">PRODUCT CATALOGUE 
     <span class="down-arrow-icon">><span> 
    </div> 
    <ul id="dropdown-list"> 
     <li><a href="#">one</a></li> 
     <li><a href="#">two</a></li> 
     <li><a href="#">three</a></li> 
     <li><a href="#">four</a></li> 
    </ul> 
</div>

和CSS：

#dropdown-container{ 
    float: left; 
    font-family: Palatino Linotype; 
} 
#dropdown{ 
    padding:5px; 
    cursor:pointer; 
    font-size: 15px; 
    border: 1px solid rgb(169, 169, 169); 
    -moz-appearance: none; 
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset; 
    box-shadow: 0 3px 0 #ccc, 0 -1px purple inset; 
} 
.down-arrow-icon{  
    padding-left: 5px; 
    /*place img of down arrow here*/ 
} 
#dropdown-list{ 
    display:none; 
    width: 100%; 
    padding:0px; 
    margin:0px; 
    border: 1px solid rgb(169,169,169); 
} 
#dropdown-container:hover ul#dropdown-list{ 
    display:block; 
} 
#dropdown-container ul{ 
    padding:0px; 
    list-style: none; 
} 
#dropdown-container ul li{ 
    width: 100%; 
} 
#dropdown-container ul li:hover{ 
    background-color: lightblue; 
    cursor:pointer; 
} 
#dropdown-container ul li a{ 
    padding-left: 10px; 
    text-decoration:none; 
    color: black; 
}

我希望這有助於。

來源

2015-10-22 16:50:29

謝謝，這有所幫助。我會如何去設計像我一樣的下拉式樣？ – Alex

我更新了小提琴，HTML和CSS以反映您正在尋找的風格。一種只有HTML和CSS才能完成的行爲是點擊事件來打開和關閉菜單。如果你想這樣做，最好的方法是使用一點JavaScript。如果懸停打開爲您工作，那麼不需要JavaScript。 –

您也可以通過選擇來更改頁面。只是包括jQuery庫，並把這個jQuery代碼：如果你想使用選擇的主菜單，最好是使用無序列表

$(document).ready(function(){ 
    $('#one').change(function(){ 
     window.location.href = $(this).find('option:selected').val(); 
    }); 
});

：

<div class="nav"> 
    <ul> 
     <li><a href="link to page 1">Page 1 Title</a></li> 
     <li><a href="link to page 2">Page 2 Title</a></li> 
     <li><a href="link to page 3">Page 3 Title</a></li> 
    </ul> 
</div>

來源

2015-10-22 14:28:32

我聽說使用select時非常業餘且不正確？ – Alex

我改變了我的答案，你會選擇使用兩種變體中的哪一種。 –

將選擇下拉列表更改爲無序列表

回答

相關問題