Drop Down Menu

Developer
Vedat Sözen
Size
2,509 Kb
Views
8,096
  1. Drop Down Menu Previews
  2. Drop Down Menu HTML Codes
  3. Drop Down Menu CSS Codes
  4. Drop Down Menu JS Codes

How do I make an drop down menu?

Easy Drop Down Menu . What is a drop down menu? How do you make a drop down menu? This script and codes were developed by Vedat Sözen on 27 November 2022, Sunday.

Drop Down Menu Previews
IQ Test

Drop Down Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drop Down Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
<title>DROP DOWN MENU</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script src="stil.js"></script>
</head>
<body> <h1>DROP DOWN MENU / JQUERY / MOUSEOVER MOUSELEAVE</h1>
<div id="mymenu">
<ul>
<li><a href="#">HOME</a></li>
<li class="aboutus"><a href="#" >ABOUT US</a> <ul> <li class="submenu"><a href="#">HISTORY</a></li>	<li class="submenu"><a href="#">CEOS</a></li>	<li class="submenu"><a href="#">WORKERS</a></li>	<li class="submenu"><a href="#">WHAT WE DO</a></li> </ul>
<li class="services"><a href="#"">OUR SERVICES</a> <ul> <li class="submenu2"><a href="#">DESIGN</a></li>	<li class="submenu2"><a href="#">HOSTING</a></li>	<li class="submenu2" ><a href="#">LOGO DESIGN</a></li> </ul>
<li><a href="#">REFERENCES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Drop Down Menu - Script Codes CSS Codes

/* Simple Drop Down Menu ..
When you try to make a drop down menu in css. Its is difficult to learn and understand how altmenus work ..
jquery is a easy way to control altmenus with mouseover and mouseleave method ..
In drop down menu, one of the problems is how to position altmenus under menus ..
You use - position:absolute; left:0; -
But dont forget menus to position:relative;
i hope you like this drop down menu
*/
body { margin:auto; margin-top:50px;}
h1 { font-family:Cuprum; text-align:center;}
#mymenu { position:absolute; width:900px; top:100; margin:auto; right:0; left:0; font-family:Cuprum; font-weight: bold; text-transform: uppercase;}
#mymenu ul { list-style: none; margin: 0; padding: 0;}
#mymenu ul li {
width:150px;
height:40px;
background:black;
color:white; position:relative; float: left; display: inline;
padding: 10px;
text-align: center;
line-height: 40px;
border:1px solid white;
}
#mymenu ul li:hover {
background:red;
}
#mymenu ul li ul { left:0; position: absolute; top:61px;}
a { color:white; text-decoration: none;}

Drop Down Menu - Script Codes JS Codes

$(document).ready(function(){	$(".submenu").hide();	$(".submenu2").hide();	$(".aboutus").mouseover(function(){	$(".submenu").show();
});	$(".aboutus").mouseleave(function(){	$(".submenu").hide();
});	$(".services").mouseover(function(){	$(".submenu2").show();
});	$(".services").mouseleave(function(){	$(".submenu2").hide();
});
});
Drop Down Menu - Script Codes
Drop Down Menu - Script Codes
Home Page Home
Developer Vedat Sözen
Username vedatsozen
Uploaded November 27, 2022
Rating 3.5
Size 2,509 Kb
Views 8,096
Do you need developer help for 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!

Vedat Sözen (vedatsozen) Script Codes
Name
SIMPLE FOOTBALL QUIZ ..
SIMPLE ANIMATION
SIMPLE BILLIARD GAME TRIAL
LOADING ANIMATION
CLICKABLE MENU ..
SIMPLE PHOTO SLIDER
HOW TO CHANGE BACKGROUND IMAGE OF DIVS
HOW TO ADD TEXT TO AN ELEMENT WITH JAVASCRIPT
MOBILE PHONE PAGE WITH SIMPLE ANIMATION
MATERIAL DESIGN BUTTON ANIMATION
Create amazing blog posts 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!