CODEWITHSUNDEEP
htmlcssselectdrop-down-menuhtml-lists
Alex
Alex

Reputation: 97

Changing a select drop-down list to an unordered list

I created a drop-down menu with the select and option tags, however these do not allow me to link to my other web pages, I read that I had to create an un-ordered list because i create my drop-down incorrectly.

here's what my code currently looks like: 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%;
}

How would I transform this into a normal drop-down list?

Upvotes: 0

Views: 4266

Answers (2)

Brett_G
Brett_G

Reputation: 46

It looks like you're using a selection drop-down. Here is a fiddle I made of how you would probably want to do it. This fiddle is purely HTML and CSS.

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

The 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>

and the 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;
}

I hope this helps.

Upvotes: 1

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

You can change your pages with select also. Just include jquery library and put this jquery code:

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

If you want to use the select for a main menu it is better to use unordered list:

<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>

Upvotes: 0

Related Questions