Home Web Development jQuery CSS Select Menu Using Option Tag | Option Select Dropdown

jQuery CSS Select Menu Using Option Tag | Option Select Dropdown

November 15, 2019

1737

How we can create a select menu using an HTML option tag? Solution: See this jQuery CSS Select Menu Using Option Tag, Option Select Dropdown menu.

Previously I have shared custom select option program using HTML and CSS, this is also kind the same concept but it is like menu navigation with JS. Basically, we can use a select option as a menu bar for switching content on the webpage. Many websites used this type of select menu in some places to dividing contents into categories.

Today you will learn to create Option Select Dropdown Menu. Basically there is a dropdown box and a down arrow button, when you will click on that the box will expand and you will see more options. You can click or tap on any selective items for choosing it, after clicking it will be visible on the box.

So, Today I am sharing jQuery CSS Select Menu Using HTML Option Tag. There I have used jQuery for easy and fast functioning. And as we know jQuery is the JS library, that’s why I am putting this program in the JavaScript category. This program can be a replacement for tabs, also you can use it the place where you want.

If you are thinking now how this select menu actually is, then see the preview given below.

Preview Of Option Select Dropdown

See this video preview to getting an idea of how this dropdown select looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery CSS Select Menu Using Option Tag Source Code

Before sharing source code, let’s talk about it. First, I have created select section using HTML <select> tag and put options inside it using <option> tag (info). After that, I have paced a div and put another div inside it, also put other tags like a paragraph, list, etc. These all blanks section will fill later with dropdown options.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I gave all the elements size, style, etc. I have done the sizing of all elements using width and height properties. For creating little animation effect, I have used CSS transition property. And many more basic things I have done using CSS.

jQuery handling here the main feature of this program. Basically jQuery changing here the CSS values dynamically, and all the functions happening because of that. All the functions I have created using if{} else{} statements and some other properties. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Select Menu | Webdevtrick.com</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<select class="fix-select">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">Javascript</option>
    <option value="jquery" selected>jQuery</option>
    <option value="php">PHP</option>
</select>

<div class="reveal-select">
    <div class="selection">
        <p>
            <span></span>
            <i></i>
        </p>
        <span></span>
    </div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Select Menu | Webdevtrick.com</title>

</head>

<body>

<option value="javascript">Javascript</option>

<option value="jquery" selected>jQuery</option>

</select>

<p>

<i></i>

</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
*{
    margin: 0; padding: 0;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
}

body{font-family: 'Open Sans';}
a{color: #000; text-decoration: none;}
img{max-width: 100%;}
img a{border: none;}
ul{list-style-type: none;}


body{
    background: #f5f5f5;
    padding-bottom: 30px;
}

.fix-select{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.reveal-select{
    width: 300px;
    height: 50px;
    margin: auto;
    margin-top: 50px;
    text-align: center;
    color: #444;
    line-height: 50px;
    position: relative;
}

.reveal-select .selection:active{
    transform: rotateX(42deg);
    transform-style: preserve-3d;
    transform-origin: top;
    transition: transform  200ms ease-in-out;
}

.reveal-select .selection{
    width: 100%;
    height: 100%;
    background-color: #1da1f2;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    position: relative;
    z-index: 20; 
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    transform-origin: top;
    transition: transform  200ms ease-in-out;
}

.reveal-select .selection p{
    width: calc(100% - 60px);
    position: relative;
    transition: all 200ms ease-in-out;
}

.reveal-select .selection:hover p, .reveal-select .selection.open p{
    color: #212121;
}

.reveal-select .selection i{
    display: block;
    width: 1px;
    height: 70%;
    position: absolute;
    right: -1px; top: 15%; bottom: 15%;
    border: none;
    background-color: #bbb;
}

.reveal-select .selection > span{
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 8px 0 8px; 
    border-color: #bbb transparent transparent transparent;
    
    position: absolute;
    top: 18px; 
    right: 22px; 
}

.reveal-select .selection.open > span{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 14px 8px;
    border-color: transparent transparent #bbb transparent;
}

.new-option{
    text-align: center;
    background-color: #1da1f2;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
    margin-top: 1px;
    position: absolute;
    left: 0; right: 0;
    transition: all 300ms ease-in-out;
}

.new-option p{
    width: calc(100% - 60px);
}

.new-option.reveal:hover{
    background-color: #005488;
    color: #f5f5f5;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

/* Code By Webdevtrick ( https://webdevtrick.com ) */

margin: 0; padding: 0;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

body{font-family: 'Open Sans';}

a{color: #000; text-decoration: none;}

img{max-width: 100%;}

img a{border: none;}

ul{list-style-type: none;}

body{

background: #f5f5f5;

padding-bottom: 30px;

}

.fix-select{

position: absolute;

top: -9999px;

left: -9999px;

}

.reveal-select{

width: 300px;

height: 50px;

margin: auto;

margin-top: 50px;

text-align: center;

color: #444;

line-height: 50px;

position: relative;

}

.reveal-select .selection:active{

transform: rotateX(42deg);

transform-style: preserve-3d;

transform-origin: top;

transition: transform 200ms ease-in-out;

}

.reveal-select .selection{

width: 100%;

height: 100%;

background-color: #1da1f2;

box-shadow: 0 1px 1px rgba(0,0,0,0.1);

cursor: pointer;

position: relative;

z-index: 20;

transform: rotateX(0deg);

transform-style: preserve-3d;

transform-origin: top;

transition: transform 200ms ease-in-out;

}

.reveal-select .selection p{

width: calc(100% - 60px);

position: relative;

transition: all 200ms ease-in-out;

}

.reveal-select .selection:hover p, .reveal-select .selection.open p{

color: #212121;

}

.reveal-select .selection i{

display: block;

width: 1px;

height: 70%;

position: absolute;

right: -1px; top: 15%; bottom: 15%;

border: none;

background-color: #bbb;

}

.reveal-select .selection > span{

display: block;

width: 0;

height: 0;

border-style: solid;

border-width: 14px 8px 0 8px;

border-color: #bbb transparent transparent transparent;

position: absolute;

top: 18px;

right: 22px;

}

.reveal-select .selection.open > span{

width: 0;

height: 0;

border-style: solid;

border-width: 0 8px 14px 8px;

border-color: transparent transparent #bbb transparent;

}

.new-option{

text-align: center;

background-color: #1da1f2;

cursor: pointer;

box-shadow: 0 1px 1px rgba(0,0,0,0.1);

position: relative;

margin-top: 1px;

position: absolute;

left: 0; right: 0;

transition: all 300ms ease-in-out;

}

.new-option p{

width: calc(100% - 60px);

}

.new-option.reveal:hover{

background-color: #005488;

color: #f5f5f5;

}

function.js

The last step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$(document).ready(function(){
    
    var countOption = $('.fix-select option').size();
    
    function openSelect(){
        var heightSelect = $('.reveal-select').height();
        var j=1;
        $('.reveal-select .new-option').each(function(){
            $(this).addClass('reveal');
            $(this).css({
                'box-shadow':'0 1px 1px rgba(0,0,0,0.1)',
                'left':'0',
                'right':'0',
                'top': j*(heightSelect+1)+'px'
            });
            j++;
        });
    }
    
    function closeSelect(){
        var i=0;
        $('.reveal-select .new-option').each(function(){
            $(this).removeClass('reveal');
            if(i<countOption-3){
                $(this).css('top',0);
                $(this).css('box-shadow','none');
            }
            else if(i===countOption-3){
                $(this).css('top','3px');
            }
            else if(i===countOption-2){
                $(this).css({
                    'top':'7px',
                    'left':'2px',
                    'right':'2px'
                });
            }
            else if(i===countOption-1){
                $(this).css({
                    'top':'11px',
                    'left':'4px',
                    'right':'4px'
                });
            }
            i++;
        });
    }
    
    if($('.fix-select option[selected]').size() === 1){
        $('.selection p span').html($('.fix-select option[selected]').html());
    }
    else{
        $('.selection p span').html($('.fix-select option:first-child').html());
    }
    
    $('.fix-select option').each(function(){
        newValue = $(this).val();
        newHTML = $(this).html();
        $('.reveal-select').append('<div class="new-option" data-value="'+newValue+'"><p>'+newHTML+'</p></div>');
    });
    
    var reverseIndex = countOption;
    $('.reveal-select .new-option').each(function(){
        $(this).css('z-index',reverseIndex);
        reverseIndex = reverseIndex-1;        
    });
    
    closeSelect();
    
    
    $('.selection').click(function(){
        $(this).toggleClass('open');
        if($(this).hasClass('open')===true){openSelect();}
        else{closeSelect();}
    });
    
    
    // Selection 
    $('.new-option').click(function(){
        var newValue = $(this).data('value');
        
        $('.selection p span').html($(this).find('p').html());
        $('.selection').click();
        
        $('.fix-select option[selected]').removeAttr('selected');
        $('.fix-select option[value="'+newValue+'"]').attr('selected','');
        
    });
});

// Code By Webdevtrick ( https://webdevtrick.com )

$(document).ready(function(){

var countOption = $('.fix-select option').size();

function openSelect(){

var heightSelect = $('.reveal-select').height();

var j=1;

$('.reveal-select .new-option').each(function(){

$(this).addClass('reveal');

$(this).css({

'box-shadow':'0 1px 1px rgba(0,0,0,0.1)',

'left':'0',

'right':'0',

'top': j*(heightSelect+1)+'px'

});

j++;

});

}

function closeSelect(){

var i=0;

$('.reveal-select .new-option').each(function(){

$(this).removeClass('reveal');

if(i<countOption-3){

$(this).css('top',0);

$(this).css('box-shadow','none');

}

else if(i===countOption-3){

$(this).css('top','3px');

}

else if(i===countOption-2){

$(this).css({

'top':'7px',

'left':'2px',

'right':'2px'

});

}

else if(i===countOption-1){

$(this).css({

'top':'11px',

'left':'4px',

'right':'4px'

});

}

i++;

});

}

if($('.fix-select option[selected]').size() === 1){

$('.selection p span').html($('.fix-select option[selected]').html());

}

else{

$('.selection p span').html($('.fix-select option:first-child').html());

}

$('.fix-select option').each(function(){

newValue = $(this).val();

newHTML = $(this).html();

$('.reveal-select').append('<div class="new-option" data-value="'+newValue+'"><p>'+newHTML+'</p></div>');

});

var reverseIndex = countOption;

$('.reveal-select .new-option').each(function(){

$(this).css('z-index',reverseIndex);

reverseIndex = reverseIndex-1;

});

closeSelect();

$('.selection').click(function(){

$(this).toggleClass('open');

if($(this).hasClass('open')===true){openSelect();}

else{closeSelect();}

});

// Selection

$('.new-option').click(function(){

var newValue = $(this).data('value');

$('.selection p span').html($(this).find('p').html());

$('.selection').click();

$('.fix-select option[selected]').removeAttr('selected');

$('.fix-select option[value="'+newValue+'"]').attr('selected','');

});

That’s It. Now you have successfully created jQuery CSS Select Menu Using Option Tag, Option Select Dropdown. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Option Select Dropdown

jQuery CSS Select Menu Using Option Tag Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY