Welcome to ThemesGadget. In this post, we are going to learn How To Make Dropdown Menu Interaction In Blogger For Free, and for any platform, you are using, just follow our steps carefully for avoiding any error. but first, Let's talk about it a little.
What is a dropdown menu Interaction?
Dropdown menus are a convenient way to present a lot of information in a limited space. They come in different shapes and sizes, but the most common ones are the two-level nested menu. It’s easy to create one with HTML and CSS,
But if you want an animated dropdown menu, it can be tricky. You need to know CSS3 animations and JavaScript to make it work. In this article, we will show you how you can animate your dropdown menus with CSS3 animations and JavaScript.
A dropdown menu is created by clicking on an arrow and selecting an option from the list below it. It's like clicking on a folder on your computer to see what is inside it.
Dropdown menus can be used for everything from navigation, to contact information or links to important pages on your site. Today we'll focus on how you can create them for navigation purposes.
How To Make A Dropdown Menu Interaction?
To make a Dropdown Menu Interaction for your blogger site, you need to add HTML, CSS, and JavaScript(Jquery) codes. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in the 2nd step, and JavaScript in the last step.
Step 1 - Adding HTML
HTML for dropdown menu interaction goes here.
<div class="DdMI">
<select data-menu>
<option>Themes</option>
<option selected>Blogger</option>
<option>Tutorial</option>
<option>Widgets</option>
</select>
</div>
Step 2 - Adding CSS
CSS for dropdown menu interaction, these CSS codes are in a compressed format if you want to beautify you can use our CSS Beautifier Tool
<style>
.select-menu{position:relative;z-index:1;font-weight:500;font-size:14px;line-height:25px;}.select-menu select,.select-menu .buttonCh{font-family:inherit;margin:0;border:0;text-align:left;text-transform:none;-webkit-appearance:none;}.select-menu select{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;padding:8px 36px 8px 12px;visibility:hidden;font-weight:500;font-size:14px;line-height:25px;}.select-menu ul{margin:0;padding:0;list-style:none;position:absolute;left:0;top:0;right:0;transform:translateY(var(--t));transition:opacity 0.3s ease,transform 0.4s cubic-bezier(0.2,0.9,0.4,1.1);}.select-menu ul li{padding:8px 36px 8px 12px;cursor:pointer;}.select-menu>ul{background:#555eed;color:rgba(255,255,255,.2);border-radius:6px;}.select-menu>ul li{transition:color 0.3s ease;}.select-menu>ul li:hover{color:rgba(255,255,255,.5);}.select-menu .buttonCh{position:absolute;left:0;top:0;right:0;bottom:0;padding:0;z-index:1;width:100%;display:block;overflow:hidden;border-radius:6px;color:#fff;background:#7b83ff;}.select-menu .buttonCh em{--r:45deg;display:block;position:absolute;right:12px;top:0;width:7px;height:7px;margin-top:13px;-webkit-backface-visibility:hidden;}.select-menu .buttonCh em:before,.select-menu .buttonCh em:after{--o:.4;content:"";width:7px;height:7px;opacity:var(--o);display:block;position:relative;transition:opacity 0.2s ease;transform:rotate(var(--r)) scale(0.75);}.select-menu .buttonCh em:before{border-left:2px solid #fff;border-top:2px solid #fff;top:1px;}.select-menu .buttonCh em:after{border-right:2px solid #fff;border-bottom:2px solid #fff;bottom:1px;}.select-menu:not(.open)>ul{opacity:0;pointer-events:none;}.select-menu.open.tilt-up{-webkit-animation:tilt-up 0.4s linear forwards;animation:tilt-up 0.4s linear forwards;}.select-menu.open.tilt-up .buttonCh em:before{--o:1;}.select-menu.open.tilt-down{-webkit-animation:tilt-down 0.4s linear forwards;animation:tilt-down 0.4s linear forwards;}.select-menu.open.tilt-down .buttonCh em:after{--o:1;}@-webkit-keyframes tilt-up{40%,60%{transform:perspective(500px) rotateX(8deg);}}@keyframes tilt-up{40%,60%{transform:perspective(500px) rotateX(8deg);}}@-webkit-keyframes tilt-down{40%,60%{transform:perspective(500px) rotateX(-8deg);}}@keyframes tilt-down{40%,60%{transform:perspective(500px) rotateX(-8deg);}}.DdMI{min-height:50vh;display:flex;justify-content:center;align-items:center;}
</style>
Step 3 - Adding JavaScript
JavaScript for dropdown menu interaction is provided below.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
$('select[data-menu]').each(function() {
let select = $(this),
options = select.find('option'),
menu = $('<div />').addClass('select-menu'),
button = $('<div />').addClass('buttonCh'),
list = $('<ul />'),
arrow = $('<em />').prependTo(button);
options.each(function(i) {
let option = $(this);
list.append($('<li />').text(option.text()));
});
menu.css('--t', select.find(':selected').index() * -41 + 'px');
select.wrap(menu);
button.append(list).insertAfter(select);
list.clone().insertAfter(button);
});
$(document).on('click', '.select-menu', function(e) {
let menu = $(this);
if(!menu.hasClass('open')) {
menu.addClass('open');
}
});
$(document).on('click', '.select-menu > ul > li', function(e) {
let li = $(this),
menu = li.parent().parent(),
select = menu.children('select'),
selected = select.find('option:selected'),
index = li.index();
menu.css('--t', index * -41 + 'px');
selected.attr('selected', false);
select.find('option').eq(index).attr('selected', true);
menu.addClass(index > selected.index() ? 'tilt-down' : 'tilt-up');
setTimeout(() => {
menu.removeClass('open tilt-up tilt-down');
}, 500);
});
$(document).click(e => {
e.stopPropagation();
if($('.select-menu').has(e.target).length === 0) {
$('.select-menu').removeClass('open');
}
})
</script>
Conclusion
This article taught you how to create a dropdown menu for a blog. There are other elements to consider like colors and links, but you can learn from our example if you are building one on your blog. As you can see, using CSS3 and JavaScript for animation and navigation is easy to set up, and the results can be impressive.
If you enjoyed this article, be sure to join our telegram channel. You are welcome to share it with your friends using the social media buttons below or simply leave a comment in the comment section. Thanks.
