Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

🔽Create a Responsive DropDown Menu💦

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • Postion property in CSS
  • Transition property in CSS
  • white-space & overflow property in CSS

Click the dropdown menu & see how transition property works. Here color rgb(0, 255, 30); is used for visualize purposes.

Resize the browser window and see the effect.

Home About
link1 link2 link3

HTML


<div class="showcontent">

<h3>Here color red is used for visualize purposes.</h3>

<div class="dropnav">

    <a href="#" style="background-color: #04AA6A; color:white;">Home</a>

    <a href="#">About</a>

    <div class="dropdown">

        <button onclick="myfun()">Dropdown ▼</button>

        <div class="dropcontent">

            <a href="#">link1</a>

            <a href="#">link2</a>

            <a href="#">link3</a>

        </div>

    </div>

</div>


</div>

JavaScript


function myfun(){
    let content=document.querySelector(".dropcontent");
    console.log(content.style.width);
    if(content.style.width=="0%" ||content.style.width==""){
        content.style.width="120px";
    }
    else{
        content.style.width="0%";
    }

}

CSS


*{
    box-sizing: border-box;
}
.col-75 .showcontent{
    overflow: hidden;
    padding-bottom: 200px;
}
.dropnav{
    background-color: #333;
    display: flex;
    align-items: center;
    color: red;
    border-radius: 5px;
    

}
.dropnav button{
    padding: 14px 16px;
    background-color: inherit;
    border: none;
    color: red;
    font-size: 18px;
    cursor: pointer;
    overflow: hidden;
}
.dropnav button:hover{
    background-color: black;
}
.dropnav a{
    text-decoration: none;
    padding: 14px 16px;
    color: red;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
}
.dropnav a:hover{
    background-color: black;
}
.dropnav .dropcontent{
    position: absolute;
    display: flex;
    z-index: 10;
    flex-direction: column;
    background-color:#444;
    width: 0;
    overflow: hidden;
    transition: 1.4s;
    transition-timing-function: ease-in-out;
}
@media screen and (max-width:300px) {
    .dropnav{
        flex-direction: column;
        
        align-items: center;
        justify-content: center;
    }
    .dropnav a,.dropnav button{
        padding: 8px; 
        width: 100%;
        text-align: center;
    }
    .dropnav a:hover,.dropnav button:hover{
        width: 100%;
    }
    
    
}

new Date()

  • Returns a Date object with the current date and time based on the system's clock.
  • This create a date object represent the current date and time.

toString()

  • The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

  • It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
    Example: str.padStart(len,char or string);

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC