Custom Social Select Dropdown Menu with CSS and JavaScript

In this tutorial we will see how to design Custom Social Select Dropdown Menu with CSS and JavaScript. Pure CSS and Vanilla JavaScript is used to make this dropdown menu.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="drop-down">
    
<select name="social" onmousedown="dropDown(event,this)">
<option id='option' value="YouTube">YouTube</option>
</select>
    
<div class="menu" id="menu">
<span id='YouTube' onclick="item(this)">YouTube <i class="icon">✓</i></span>
<span id='Facebook' onclick="item(this)">Facebook <i class="icon">✓</i></span>
<span id='Instagram' onclick="item(this)">Instagram <i class="icon">✓</i></span>
<span id='Twitter' onclick="item(this)">Twitter <i class="icon">✓</i></span>
<span id='LinkedIn' onclick="item(this)">LinkedIn <i class="icon">✓</i></span>   
</div>
    
</div>

CSS Code

CSS code is given below.


<style>
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150vh;
    background-color: #17A2B7;
    font-family: 'Barlow Condensed', sans-serif;
}
select
{
    width: 200px;
    height: 40px;
    box-sizing: border-box;
    padding: 0px 10px;
    cursor: pointer;
    border: 0;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Barlow Condensed', sans-serif;
    box-shadow: 0px 0px 10px 0px #777;
}
.drop-down
{
    position: relative;
}
.menu
{
    position: absolute;
    top: 60px;
    left: 0px;
    width: 200px;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px #777;
    display: none;
}
.menu span
{
    display: block;
    height: 40px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
}
.menu span:hover
{
    background-color: #17A2B7;
    color: #fff;
}
.icon
{
    font-size: 17px;
    float: right;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below.


<script>
var a=1;

function dropDown(e)
{
e.preventDefault();
    
if(a==1)
{
document.getElementById('menu').style.display='block';
a=0;    
}
else
{
document.getElementById('menu').style.display='none';
a=1;    
}
}

function item(x)
{
var content=x.id;
document.getElementById('option').innerHTML=content;
document.getElementById('option').value=content;
document.getElementById('menu').style.display='none';
if(a==1)
{
a=0;
}
else
{
a=1;    
}
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on how to make a Custom Social Select Dropdown Menu with CSS and JavaScript.