Animated Drop Down

Developer
Alexius M Wronka I I
Size
3,066 Kb
Views
24,288
  1. Animated Drop Down Previews
  2. Animated Drop Down HTML Codes
  3. Animated Drop Down CSS Codes
  4. Animated Drop Down JS Codes

How do I make an animated drop down?

What is a animated drop down? How do you make a animated drop down? This script and codes were developed by Alexius M Wronka I I on 19 September 2022, Monday.

Animated Drop Down Previews
IQ Test

Animated Drop Down - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Drop Down</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="myApp" ng-controller="myCtrl">{{tablogic[0]}} <div class="title-box" ng-click='onHover()' ><div class='text-box'><span>MY DROPDOWN</span></div></div> <div class="tab-holder"> <div id="my-div" ng-repeat="tab in tabs" ng-show="tablogic[$index]" class="tab-box animate-show" ng-click="clearTabs()"><div class="tab-text"><span>{{tab.title}}</span></div></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Drop Down - Script Codes CSS Codes

.title-box { width: 200px; height: 75px; background-color: white; float: left; clear: left; left: 0; right: 0; margin: 50px auto 0 44.9%; border-top-right-radius: 10px; border-top-left-radius: 10px; border: 2px solid black;
}
.title-box .text-box { text-align: center; padding-top: 25px; font-size: 20px; font-family: Futura, 'Trebuchet MS', Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: 200; color: black; letter-spacing: 1.5px;
}
.tab-box { width: 200px; height: 50px; -webkit-transition: height .2s, width .2s, background-color .2s; transition: height .2s, width .2s, background-color .2s; background-color: white; overflow: hidden; float: left; clear: left; left: 0; right: 0; margin: 1px auto 0 44.9%; border: 2px solid black;
}
.tab-box .tab-text { width: 200px; text-align: center; padding-top: 12.5px; transition: padding .2s, color .2s; font-size: 20px; font-family: Futura, 'Trebuchet MS', Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: 200; color: black; letter-spacing: 1.5px;
}
.tab-box:hover { height: 60px; background-color: black;
}
.tab-box:hover .tab-text { width: 180px; padding: 15px; color: white;
}
.tab-box.animate-show { width: 200px;
}
.tab-box.animate-show.ng-hide-add, .tab-box.animate-show.ng-hide-remove { transition: width linear .5s;
}
.tab-box.animate-show.ng-hide { width: 0px;
}

Animated Drop Down - Script Codes JS Codes

var app = angular.module('myApp',['ngAnimate'])
app.controller('myCtrl', function($scope,$timeout, $interval){ $scope.mouseOver = false; $scope.tablogic = []; $scope.tabs=[ {title: 'TAB 1'}, {title: 'TAB 2'}, {title: 'TAB 3'} ] $scope.tablogic = $scope.tabs.map(function(obj){ return false }) $scope.clearTabs = function(){ $scope.tablogic = $scope.tablogic.map(function(obj){ console.log(obj) return false }) $scope.showText = false; } $scope.onHover = function(){ var index = 0; var gradual = $interval(function(index){ $scope.tablogic[index]= true; index++; if(index == 3) { $interval.cancel(gradual) $timeout(function(){ $scope.showText = true; },400) } }, 100) }
})
Animated Drop Down - Script Codes
Animated Drop Down - Script Codes
Home Page Home
Developer Alexius M Wronka I I
Username awronka
Uploaded September 19, 2022
Rating 3
Size 3,066 Kb
Views 24,288
Do you need developer help for Animated Drop Down?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexius M Wronka I I (awronka) Script Codes
Name
React Calc
D3 Dot Graph
React Test
List React
A Pen by Alexius M Wronka I I
Guage
Angular Calc
Angular 2 forms
Transition button
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!