CSS for creating a menu with a smooth "roll down" effect on hover

I've been attempting to create a unique hover effect for my menu. The specific effect I'm aiming for can be seen on www.firstborn.com. It involves sliding down from the top in a non-uniform manner. Despite trying various CSS techniques and examining their code, I just can't seem to get it right. Is it not achievable with CSS alone? Would I need to incorporate something like animate.css?

Below is the code snippet I have been using, with the ID corresponding to my entire menu.

#Top_bar:hover {
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
background: #000;
color: #fff;
}

javascriptjquerycss

Answer №1

In order to make this technique effective, you need to define the height properties for the element. Initially, you set a specific height, and then on hover, you adjust that height accordingly.

#Header {
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
background: #000;
color: #fff;
height: 200px;
}

#Header:hover {
 height: 500px;
}

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

How can I generate pure JavaScript, without using Typescript modules?

Take this scenario as an example ... index.ts import { x } from "./other-funcs"; function y() { alert("test"); } x(y); other-funcs.ts import { z } from "some-module"; export function x(callback: () => void): void { z(); callback(); } ...

javascripttypescript

Placing an iframe at the end of a container

I am attempting to use jQuery to insert an iframe into a div. The current code accomplishes this, but it also erases all existing content within the div#off. How can I make the iframe appear at the bottom of the content in the div#off without removing any ...

javascriptjqueryhtmliframe

Converting large numbers (exceeding 53 bits) into a string using JavaScript

I have a REST service that returns JSON. One of the properties in the JSON contains a very large integer, and I need to retrieve it as a string before Javascript messes it up. Is there a way to do this? I attempted to intercept every response using Angular ...

javascriptjsonangular

The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...

javascripthtmlcssangularjs

Ways to align a div in relation to a span element?

I have a large block of text within a div. I am seeking a way to create a hover effect on specific words within the text, which will then display a div below the word containing a customized div. This functionality resembles the feature on Wikipedia where ...

htmlcsspositioning

The clash between mototools and JavaScript is causing both to be non-operational

I am currently facing a conflict between JavaScript and Mototools in my project. I have heard about the NoConflict script, but I'm not sure how to implement it properly. I will provide the code for both dependencies so that someone can explain it to m ...

javascriptjqueryshared-librariesmootoolsconflict

Creating a JSON string with javascript/jQuery

I'm currently using the $.post() method in jQuery to make an Ajax request with a JSON string. The structure of my call is as follows: $.post( urlVar, jsonVar, function(data){ //perform actions }, 'json' ) .comple ...

javascriptjqueryajaxjsonstringify

Encounter a "syntax error Cannot GET /xyz" message using jQuery AJAX

When using $.ajax to request data from a node.js server, I encountered an error while debugging on the client side in Firefox. The console displayed: Syntax error Cannot GET /xyz, where /xyz represents the route for my server. Despite this error, the page ...

javascriptjqueryajaxnode.js

Having trouble accessing my API through localhost with NextJS

I'm currently working on an app that involves fetching data from my own API. The goal is to retrieve user-specific information and use it within the app. However, I've encountered a roadblock with CORS headers and I'm unsure of how to procee ...

javascriptnext.js

Is there a way to adjust the text color of a label for a disabled input HTML element?

If the custom-switch is active: the label text color will be green. If the custom-switch is inactive: the label text color will be red. A JavaScript (JQuery) method call can be used to activate one button while deactivating another. The Issue It appe ...

javascripthtmljquerycss

Issues arising with transferring information between components

My webpage had a header with a search engine input, a list of posts, and pagination all on one page. I made the decision to separate the header into its own component in a different Vue file. However, after making this change, searching for posts by their ...

javascripthtmlvue.jsvue-component

What could be causing angularjs to malfunction in this specific scenario?

Recently, I followed a tutorial and implemented the code provided. Inside the angular folder in my libs directory, I have the minified version of Angular JS obtained from https://angularjs.org/. However, the output I am seeing is: {{author.name}} {{autho ...

javascriptangularjs

Exploring the power of pagination using Django and ExtJS

Extjs offers a gridpanel with pagination functionality, but I believe that the pagination only works once all the data has been received from the server (please correct me if I am mistaken). In my situation, the total amount of data from the server is 20MB ...

javascriptajaxdjangoextjspagination

Searching for data using JQuery Datatable

Currently, I am facing a challenge in loading 1K data on a single page while using the jQuery data table. The page lists personnel and users want to search for specific information without any filters. I am seeking advice on the optimal solution for reque ...

jqueryasp.net-mvcdatatablepaging

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss

"Unlock the secrets to commanding respect in the web form layout by mastering the art

I have a fieldset that includes a legend with potentially long text content. I need the legend to only take up 50% of the width of the fieldset. Currently, when the legend is too lengthy, it still occupies 50% of the space but causes the entire fieldset ...

htmlcssfieldset

Stylize the final element within a webpage using CSS styling techniques

In the code snippet below, my goal is to apply a specific style to the content of the final occurrence of "B". <div class="A"> <div> I am <span class="B">foo</span>. </div> <div> I like <span class="B"> ...

css

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Imagine a square box displayed as a "div" element. When you click on it, it splits into an n x n grid with each square having a random background color. However, the issue I am encountering is that I want to apply additional CSS to each of these randomly c ...

javascriptjqueryhtmlcss

Issue encountered while using JSONP: {"readyState":4,"status":200,"statusText":"load"}

After sending a command to an external server through the URL, the HTML code shows {"readyState":4,"status":200,"statusText":"load"}, but in the console, the correct data is displayed as shown in the image. Need any assistance? https://i.sstatic.net/MQ ...

phpjqueryajax

What is the best way to format the incoming data to display as HTML code?

My textarea has a v-model called content where input text is assigned to content.description. Now, I need to transfer this information to another element, specifically a div. The challenge lies in the fact that if my textarea includes HTML code, I want it ...

javascripthtmlvue.js