Drop-down menu sliding top to down using JQuery java script language
In this tutorial we will see how to make a drop down menu maybe you are thinking what is different in this drop down menu, so friend in this drop down list , you can not make drop-down list using only javascript , so in this case we need javascript ,s library called JQuery ,
dear ,on this website you will get all type web developing source code ,please don't
forget to share of this website link among your friends and relatives ,
and follow of this website for latest and amazing source code
let s break of this topic
1. first you need to paste of this JQuery CDN in head tag like this
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. And in script tag we will writing
<script>
$(document).ready(function() {
$("#icon ").click(function() {
$("#panel").slideToggle("slow");
});
});
</script>
here in second line icon is id of a tag if any visiter will click on it then next function will work
here next function is $("#panel /* here those id, class ,tag which you want or sliding ").slideToggle("slow");.slideToggle("") in this breacked you can choose any value like fast or slow an
you can also provide time
please see of this video on full resolution
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#icon").click(function() {
$("#panel").slideToggle("slow");
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*change of your background-image because it will not show in your browser */
background-image: url("code_letters_screen_137590_1280x720.jpg");
height: 100vh;
background-position: center;
background-size: cover;
}
#flip,
#panel {
background-color: brown;
color: black;
font-weight: bold;
border: solid 1px #c3c3c3;
}
#flip {
line-height: 40px;
height: 40px;
}
#panel {
text-align: center;
padding-top: 20px;
padding-bottom: 30px;
display: none;
width: 40%;
}
ul li {
list-style: none;
}
ul li a {
list-style: none;
line-height: 30px;
text-decoration: none;
color: black;
font-weight: bold;
}
ul li a:hover {
color: black;
letter-spacing: 3px;
font-weight: bolder;
transition: letter-spacing 0.2s ease-in-out;
font-stretch: extra-expanded;
border-bottom: 3px solid black;
}
/* menu styling */
#menu {
position: absolute;
z-index: 2;
left: 10px;
font-size: 28px;
cursor: pointer;
}
#menu:hover {
transform: scale(1.09);
font-weight: bolder;
}
/* tag name you can change of this according to you */
span {
margin-right: 10px;
}
#tag-name {
position: absolute;
right: 20px;
font-weight: bolder;
top: 8px;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div id="icon"><a id="menu">☰</a></div>
<a id="tag-name" contenteditable="true" draggable="true">Easy coding.7</a>
<div id="panel">
<ul>
<li><a href="#"><span class="fa fa-home"></span>Home</a></li>
<li><a href="#"><span class="fab fa-servicestack"></span>Home</a></li>
<li><a href="#"><span class="fa fa-angle-double-right"></span>Home</a></li>
<!--here you can increase of this according to your requirement -->
</ul>
</div>
</body>
</html>
Comments
Post a Comment