Skip to main content

Drop-down menu sliding top to down using JQuery java script language

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 



you can use of this source code through copy paste:
<!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">&#9776;</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>

Labels:

Comments

Post a Comment

Popular posts from this blog

Function in Python programming language

  Function in Python? In Python, a function is a group of related statements that performs a specific task. Functions help break our program into smaller and modular chunks. As our program grows larger and larger, functions make it more organized and manageable. Furthermore, it avoids repetition and makes the code reusable. Syntax of Functio n def function_name ( parameters ): """ docstring """ statement(s) Above shown is a function definition that consists of the following components. Keyword  def  that marks the start of the function header. A function name to uniquely identify the function. Function naming follows the same rules of writing identifiers in Python. Parameters (arguments) through which we pass values to a function. They are optional. A colon (:) to mark the end of the function header. Optional documentation string (docstring) to describe what the function does. One or more valid python statements that make up the function body. Stateme...
Post a Comment
Read more

Glowing text in css

Glowing text in CSS Hello student in this tutorial we will see that how to make glowing text in css  so let's  break down this topic here . 1 . we taking a div or any tag, class, id for targeting text so here i am taking a id so first  we will center of this element through position absolute like this       #text  {              /* position center through position absolute*/              position :  absolute ;              top :  40 % ;              left :  50 % ;              transform :  translate ( -50 % ,  -50 % ); } 2. Again in this css we coding for text shadow like this through text-shadow careful...
Post a Comment
Read more

OOP OBJECT ORIENTED PROGRAMMING LANGUAGE

OOP OBJECT ORIENTED PROGRAMMING LANGUAGE  Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which may contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods. For example, a person is an object which has certain properties such as height, gender, age, etc. It also has certain methods such as move, talk, and so on. Example : suppose we want to make a application for a car. in this case vehicle is our class for .  in this programming  , object is our  car   now we want o create method that speed up down so we will need orient all method in this application according to our object so that programmer can easily orient all method according  to this object. for this most programming language developed in form of object oriented programming language. Object This is the basic unit of object-oriented programming. That is both data and function that o...
Post a Comment
Read more