Animated drop-down navigation menu effect implemented with CSS3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Animated drop-down navigation menu effect implemented with CSS3

大家讲道理

Nov 09, 2016 pm 05:14 PM

Animated drop-down navigation menu effect implemented by CSS3:
This chapter shares a code example, which implements a simple drop-down menu effect.
But the drop-down menu has a 3D rotation effect. The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<meta name="keywords" content="" />
<style type="text/css">
*{margin:0 auto;}
body{
  background-color: #EEEEEE;
  font-family: Microsoft Yahei,Arial,sans-serif;
}
nav{
  width:100%;
  background-color:#455552;
  position:relative;
  width:650px;
  margin-top:100px;
}
.nav-ul{
  list-style:none;
}
.nav-ul>li{
  display:inline-block;
  position:relative;
}
.nav-ul a{
  text-decoration:none;
  color:#FFF;
  display:inline-block;
  padding:10px 20px;
}
.nav-ul a:hover{
  background-color: #1ABC9C;
}
.nav-ul a:hover+ul li{
  opacity:1;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.nav-ul a+ul{
  list-style: none;
  position: absolute;
  transition: opacity 0.5s;
  -webkit-perspective:800;
  -webkit-transform-style: preserve-3d;
}
.nav-ul a+ul:hover li{
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.nav-ul a+ul li{
  position: relative;
  left: -40px;
  opacity: 0;
  width: 150px;
  transition: transform 1.5s,opacity 0.8s;
}
.nav-ul a+ul a{
  display: inline-block;
  width: 75%;
  background-color: rgba(26,188, 156, 0.75);
}
.nav-effect-1{
  transform: rotateY(90deg) translateX(10px);
}
.nav-effect-2{
  transform: rotateY(120deg) translateX(20px);
}
.nav-effect-3{
  transform: rotateY(150deg) translateX(30px);
}
.nav-effect-4{
  transform: rotateY(180deg) translateX(40px);
}
.nav-ul a+ul a:hover{
  background-color: rgba(69,85, 82, 0.75);
}
</style>
</head>
<body>
<nav>
  <ul class="nav-ul">
    <li><a href="/">首页</a></li>
    <li>
      <a href="#">蚂蚁部落前端</a>
      <ul>
        <li class="nav-effect-1"><a href="#">JavaScript</a></li>
        <li class="nav-effect-2"><a href="#">JQuery</a></li>
        <li class="nav-effect-3"><a href="#">CSS</a></li>
        <li class="nav-effect-4"><a href="#">HTML</a></li>
      </ul>
    </li>
    <li>
      <a href="#">后端</a>
      <ul>
        <li class="nav-effect-1"><a href="#">Python</a></li>
        <li class="nav-effect-2"><a href="#">PHP</a></li>
      </ul>
    </li>
    <li>
      <a href="#">琐碎杂类</a>
      <ul>
        <li class="nav-effect-1"><a href="#">softwhy.com</a></li>
        <li class="nav-effect-2"><a href="#">Ajax</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的生活</a>
      <ul>
        <li class="nav-effect-1"><a href="#">College</a></li>
        <li class="nav-effect-2"><a href="#">Review</a></li>
        <li class="nav-effect-3"><a href="#">Sentiment</a></li>
      </ul>
    </li>
    <li>
      <a href="#">关于我</a>
      <ul>
        <li class="nav-effect-1"><a href="#">蚂蚁部落</a></li>
        <li class="nav-effect-2"><a href="#">留言板</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How Many Websites Should We Build?Apr 13, 2025 am 10:42 AM

Someone emailed me:

Gatsby and WordPressApr 13, 2025 am 10:39 AM

Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a

How to Get the Current Page URL in GatsbyApr 13, 2025 am 10:37 AM

This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in

How I've Improved as a Web Developer (and a Person) in 2019Apr 13, 2025 am 10:35 AM

We’re sliding into the roaring twenties of the twenty-first century (cue Jazz music ?). It’s important that you and I, as responsible people, follow

Is 'is' Useful?Apr 13, 2025 am 10:31 AM

God I'm funny.

Dip Your Toes Into Hardware With WebMIDIApr 13, 2025 am 10:30 AM

Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that

PHP Templating in Just PHPApr 13, 2025 am 10:20 AM

With stuff like template literals in JavaScript and templating languages, like JSX, I've gotten used to wanting to write my HTML templates in one nice chunk

How to Build Your Resume on npmApr 13, 2025 am 10:12 AM

Just yesterday, Ali Churcher shared a neat way to make a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.