Creating a dynamic menu with Jquery can add a touch of flair to your website. Here's how you can

Interesting jQuery code:

$(document).ready(function(){
    var abc='';
    $(".doa").on("click",function(){  
        var doa=$(this).val();
        var doah=$(this).position();
        abc=doah.top;
        var x=+doah.top-80;
        $(this).css({color:"red"});
        $(".doa").not(this).animate({opacity:"0",margin:"0 0 0 500"},400,function(){        
            $(this).css({display:"none"});
            $(".doa:contains('"+doa+"')").css({position:"absolute","top":doah.top}).animate({"top":50},function(){
                $(".doa:contains('"+doa+"')>.doaa").show(function(){
                    $(".doa").addClass("doa1").removeClass("doa");
                });
            });
            $(".naslov").css({position:"relative"}).animate({top:"300px",opacity:"0"},200);
        });
    });
)};

Check out the jsFiddle Demo here

I am now experimenting with reversing the animation described above. When a click occurs on class doa1, I want to trigger the reverse of the animation - hiding doa1 > ul.doaa first, followed by hiding classes naslov and doa back to their original positions. Once class doa1 is reset, it should then reverse animate the divs of class doa from the top backwards... My attempt can be seen in this updated result

Answer №1

After much effort, I finally found the solution to my problem: solved

var abc='';
$(".load").delegate(".doa","click",function(){
    var doa=$(this).val();
    var doah=$(this).position();
    abc=doah.top;
    var x=+doah.top-80;
    $(this).css({color:"red"});
    $(".doa").not(this).animate({opacity:"0",margin:"0 0 0 500"},300,function(){        
        //$(this).css({display:"none"});
        $(".doa:contains('"+doa+"')").css({position:"absolute","top":doah.top}).animate({"top":50},function(){
            $(".doa:contains('"+doa+"')>.doaa").show(function(){
                $(".doa:contains('"+doa+"')").toggleClass("doa doa1");
            });
        });
        $(".naslov").css({position:"relative"}).animate({top:"300px",opacity:"0"},200);
    });
});

$(".load").delegate(".doa1","click",function(e){
    var po=$(this).val();
    $(".doa1>.doaa").hide(function(){
        $(".doa1:contains('"+po+"')").css({position:"absolute",color:"black"}).animate({"top":abc},function(){
            $(".doa1").css({position:"static"}).animate({opacity:"1",margin:"0"},300).toggleClass("doa1 doa");          
        });
        $(".naslov").css({position:"relative"}).animate({top:"0",opacity:"1"},200);
    }); 
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animate list items into a div element

I have recently developed a Twitter widget for my website and I am interested in creating an effect where the last 5 tweets fade in and out at specific intervals using css3. The styling of my div is set to be 60% width with a height of 90px, matching the U ...

Default maximize feature in Jquery UI dialog box

Is it possible to have a jQuery UI dialog open maximized by default without specifying a height and width? Alternatively, is there a way to set the height and width dynamically based on the screen size? ...

How can I restrict the draggable space? It is only working on the top and left sides, but I want to disable it on the right and bottom

Attempting to prevent the draggable items from overflowing beyond the body. Succeeded in limiting movement on the top and left sides. Encountering difficulty restricting motion on the right side and bottom. e.pageX -= e.offsetX; e.pageY -= e.offsetY; ...

Transform the date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy with the help of JavaScript

I am looking to convert date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy when the dates are retrieved from a JSON object. Currently, I am utilizing the ng-csv plugin to download this JSON data, which is working properly. How ...

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

Submit button in CodeMirror activates after second tap

I am encountering an issue with my ajax form. When I click send, all fields are submitted via POST except for CodeMirror. Strangely, on the second click, all future forms are being submitted correctly. Can anyone help me figure out what is going wrong her ...

issue with website layout due to HTML and CSS

I aligned my text within div tags. As I decrease the size of the page due to the site being responsive, the div tags also shrink, resulting in excessive white space between words. Is there a solution to address this issue? view image here Another concern ...

Examining Vuex Mutations using Jest confirms no alteration in state

I am currently facing an issue with testing a namespaced Vuex module using Jest. Despite making mutations to the mocked state, I am not seeing any changes reflected. Below is the code for my addEvents mutation: addEvents: (state, infos) => { t ...

Merge together JQuery variables

I want to assign a unique number to each JavaScript variable and jQuery element in my code. Take a look at the snippet below: $("#insert1").click(function(){ var collegeId1=$("#collegeId1").val(); $.post('insert.php', {collegeId: colle ...

A guide on accessing a WebElement through a Hover Menu using Selenium with JAVA

Greetings, I am a beginner user of selenium and I have been experimenting with executing tests on a web page. Below is the code I am using: System.setProperty("webdriver.gecko.driver","C:\\DRIVERS\\geckodriver.exe"); WebDriver dr ...

Is there anyone who can provide an explanation for this code snippet?

$.post("include/email_validate.inc.php", { email: $('#email').val() }, function(response){ if(response=="email_exits") { alert("E-mail Address Already Registered"); return false; } ...

Tips for displaying a variable passed through a PHP form using the echo function

Below is the PHP form code that retrieves variables from another page: <?php $fname = "$_POST[fname]"; $lname = "$_POST[lname]"; //these values are coming from another form ?> <form action="test.php" method="post" class="form-inline vh_pr ...

When clicking, expand the li element to 100% width and move the other siblings aside

I'm looking to arrange li elements in multiple columns with flexibility. https://i.sstatic.net/HJCZu.png <ul> <li class="yellow"> Yellow Block </li> <li class="red"> Red Block ...

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

Tips for deactivating a specific value or graying it out within the list of value items in a drop-down menu using <ng-selectize> or <options> in Angular 7

I am facing a situation where I have to dynamically generate a list of options for a dropdown menu in my Angular 7 application. However, I need to be able to disable specific options in the list based on certain conditions or flags. For example: I am disp ...

Is it possible to send a PHP variable to a popup using a button and JavaScript?

I am facing an issue with a dynamically created table in PHP that displays requests. Each row in the table has a button to open a popup. I need to pass the ID of each request to the popup to retrieve all the data associated with it. Can someone guide me o ...

Is there a way to intercept all AJAX requests in JavaScript?

Could there be a universal event handler for ajax requests that is automatically triggered upon the completion of any ajax request? This is something I am exploring while developing a greasemonkey script for an ajax-heavy website. In past scripts, I have ...

Issue with alert not appearing after webpage is refreshed or reloaded on Angular v10

I'm currently working on an Angular single page application. When a user clicks a button, the page refreshes and a message is supposed to be displayed. (TYPESCRIPT) import { Component, OnInit, OnDestroy } from '@angular/core'; export class ...

Implemented text-shadow on a text element utilizing the -webkit-background-clip property

Is there a way to add a drop shadow on text and make the part of the shadow that's inside the text disappear or go behind the background image? .mask { background-image: radial-gradient(purple, gold); background-size: cover; mix-blend-mode: l ...

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...