Simple Drop Down Menu

Developer
Rodrigo Hernando
Size
3,342 Kb
Views
12,144
  1. Simple Drop Down Menu Previews
  2. Simple Drop Down Menu HTML Codes
  3. Simple Drop Down Menu CSS Codes
  4. Simple Drop Down Menu JS Codes

How do I make an simple drop down menu?

Greensock forums:http://forums.greensock.com/topic/8517-hover-effect-for-sub-menus/. What is a simple drop down menu? How do you make a simple drop down menu? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Simple Drop Down Menu Previews
IQ Test

Simple Drop Down Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Drop Down Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<head> <meta charset="utf-8">
</head>
<body> <h2> Simple Drop Down Menu<br> Powered by Greensock Animation Platform </h2> <!-- MENU START --> <ul id="menu-wrapper"> <li class="menu-item" id="li1"> <a href="#">About us</a> <ul id="ul1" class="sub-menu"> <li><a class="menuLink" href="#">Our History</a></li> <li><a class="menuLink" href="#">Our Mission</a></li> <li><a class="menuLink" href="#">Our Team</a></li> </ul> </li> <li class="menu-item"><a class="menuLink" href="#">What we do</a></li> <li class="menu-item"><a class="menuLink" href="#">Business Training</a></li> <li class="menu-item"> <a href="#">Contact</a> <ul class="sub-menu"> <li><a class="menuLink" href="#">Contact Form</a></li> <li><a class="menuLink" href="#">Location Map</a></li> </ul> </li> </ul> <!-- MENU END --> <div id="clear-fix1"></div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Drop Down Menu - Script Codes CSS Codes

body
{	margin:0;	padding:0;	font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;	background:#555;
}
h2
{ text-align:center; color:#fff;
}
#menu-wrapper
{	position:relative;	height:40px;	padding:10px;	text-align:center;	list-style:none;	margin:0;	z-index:50;
}
#menu-wrapper li
{	background : -webkit-linear-gradient(top, rgb(0, 96, 156) 00%, rgb(0, 113, 188) 100%);	background : -moz-linear-gradient(top, rgb(0, 96, 156) 00%, rgb(0, 113, 188) 100%);	background : -o-linear-gradient(top, rgb(0, 96, 156) 00%, rgb(0, 113, 188) 100%);	background : -ms-linear-gradient(top, rgb(0, 96, 156) 00%, rgb(0, 113, 188) 100%);	background : -linear-gradient(top, rgb(0, 96, 156) 00%, rgb(0, 113, 188) 100%);	-moz-border-radius:6px;	-webkit-border-radius:6px;	border-radius:6px;	border:solid 1px #00416c;	display:inline-block;
}
#menu-wrapper li:hover
{	background : -webkit-linear-gradient(top, rgb(0, 113, 188) 00%, rgb(0, 96, 156) 100%);	background : -moz-linear-gradient(top, rgb(0, 113, 188) 00%, rgb(0, 96, 156) 100%);	background : -o-linear-gradient(top, rgb(0, 113, 188) 00%, rgb(0, 96, 156) 100%);	background : -ms-linear-gradient(top, rgb(0, 113, 188) 00%, rgb(0, 96, 156) 100%);	background : -linear-gradient(top, rgb(0, 113, 188) 00%, (0, 96, 156) 100%);
}
#menu-wrapper li a
{	display:block;	text-decoration:none;	padding:10px;	color:#fff;	font-weight:600;
}
#menu-wrapper li a:hover
{	color:#ff8000;
}
/* sub menu styles */
#menu-wrapper ul
{	position:absolute;	padding:1px 0 0 0;	margin-top:1px;	text-align:left;	overflow:hidden;	border-radius:5px;
}
#menu-wrapper ul li
{	position:relative;	list-style: none;	display: list-item;	border-radius: 0;	border: none;	background:#0065A8;
}
#menu-wrapper ul li:hover
{	background:#005289;
}
/** INTERNET EXPLORER 9 AND OLDER BACKGROUND FIXES **/
.lte9 #menu-wrapper li
{	background-image:url('../img/fondo-boton-ie9lt.png');/*insert your image here*/	background-repeat:repeat-x;
}
.lte9 #menu-wrapper li:hover
{	background-image:url('../img/fondo-boton-ie9lt-hover.png');/*insert your image here*/	background-repeat:repeat-x;
}
.lte9 #menu-wrapper ul
{	margin-left:-1px;
}
.lte9 #menu-wrapper ul li
{	background:#0065A8;
}
.lte9 #menu-wrapper ul li:hover
{	background:#005289;
}
/** IE7 MENU ITEM DISPLAY AND SPACING FIX **/
.lte7 #menu-wrapper li
{	display:inline;	margin-right:5px;
}
.lte7 #menu-wrapper ul
{	position:absolute;	text-align:left;	overflow:hidden;
}
.lte7 #menu-wrapper ul li
{	display:list-item;	margin-bottom:-3px;
}

Simple Drop Down Menu - Script Codes JS Codes

var subMenus = $(".sub-menu");
$.each($(".menu-item"), function(index, element) {	var subMenu = $(element).children('ul'), tl;	if(subMenu.length != 0) {	tl = new TimelineLite({paused:true});	tl.from(subMenu, .2, {height:0});	element.subMenuAnimation = tl;	$(element).hover(menuItemOver, menuItemOut);	}
});
function menuItemOver(e) { this.subMenuAnimation.play();
}
function menuItemOut() {	this.subMenuAnimation.reverse();
}
/*
==>FUNCTION TO FIX LI ITEMS WIDTH IN IE7
*/
function setWidth() {	//this function executes only if the browser is IE7	if($("html").hasClass('lte7'))	{	//because of a bug with IE7 we need to calculate any element's width before the li's elements width	console.log($('div#clear-fix1').width());	//we loop through the subMenu elements	$.each(subMenus, function(index, element)	{	var subMenuChildren = $(element).children('li'), elemWidths = [], maxWidth;	//loop through all the child elements of the current subMenu	$.each(subMenuChildren, function()	{	elemWidths.push($(this).outerWidth());	})//sub menu children loop END	//we get the biggest width	maxWidth = Math.max.apply(null, elemWidths);	//apply the biggest width to all the elements	subMenuChildren.css('width',maxWidth);	});//sub menu elements loop END	}//IE7 conditional END
}
setWidth();
Simple Drop Down Menu - Script Codes
Simple Drop Down Menu - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3
Size 3,342 Kb
Views 12,144
Do you need developer help for Simple Drop Down Menu?

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!

Rodrigo Hernando (rhernando) Script Codes
Name
Greensock Draggable latest update
Auto scroll to element offset
Toggle Tween Direction
Simple scroll controlled animation
Draggable add element
Z Index Tween
Simple Slider Powered by GreenSock
Greensock Bezier Morph
Auto scroll to element offset 2
GSAP Scramble Text Plugin
Create amazing love letters 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!