An other menu
How do I make an an other menu?
What is a an other menu? How do you make a an other menu? This script and codes were developed by Mghayour on 31 October 2022, Monday.
An other menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>an other menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <menu class="main_menu"> <li><a href="">About Us</a></li> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> <li><a href="">Menu 3</a></li> <li><a href="">Menu 4</a></li> <li><a href="">Menu 5</a></li> </menu>
<by mghayour e-mail="[email protected]" />
</body>
</html>
An other menu - Script Codes CSS Codes
.main_menu { list-style: none; padding: 0; margin: 0 auto; width: 470px;
}
.main_menu li { float: left; margin: 50px 0 0 -15px; padding: 0; -webkit-transition: all 0.5s; transition: all 0.5s;
}
.main_menu li a { margin: 0; -webkit-transition: all 0.5s; transition: all 0.5s; display: block; text-decoration: none; background-color: #720; color: #fff; padding: 3px 12px; border-radius: 3px; -moz-box-shadow: 2px 2px 3px #555; -webkit-box-shadow: 2px 2px 3px #555; box-shadow: 2px 2px 3px #555; -ms-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); transform:rotate(-30deg); font-size:16px;
}
.main_menu li:hover a { background-color: #942; -ms-transform:rotate(0); -webkit-transform:rotate(0); transform:rotate(0); margin-top:-30px; padding: 8px 20px; -moz-box-shadow: 8px 8px 10px #555; -webkit-box-shadow: 8px 8px 10px #555; box-shadow: 8px 8px 10px #555; font-size:20px;
}
.main_menu li:hover { padding-bottom:30px;
}
by[mghayour]:after { content: "By MGhayour"; color: #999; position: absolute; bottom: 10px; right: 10px;
}
Developer | Mghayour |
Username | mghayour |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 1,791 Kb |
Views | 22,264 |
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!
Name | Size |
MG Factory | 2,396 Kb |
Download Button | 2,374 Kb |
An other layout | 2,569 Kb |
Cloudy Sky | 3,041 Kb |
Border-radius | 1,505 Kb |
Wp tab | 2,294 Kb |
CSS Wave Play | 2,842 Kb |
IRan Flag | 4,485 Kb |
Rainy cloud | 2,287 Kb |
Avn Slider | 2,751 Kb |
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!
Name | Username | Size |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Sticky footer testing | 75th | 1,649 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Cloud upload | Jaflo | 2,774 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
FCC - Tribute Page | Cmwebby | 0 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!