Zig zag 下拉菜单的 CSS 概念

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过各种示例来理解使用 CSS 实现的之字形下拉菜单概念。下拉菜单允许用户从列表中选择一个选项。

以下是之字形下拉菜单的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  zig zag dropdown menu concept with css </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body { 
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(90deg, $blue, $yellow);  
margin: 0;
  padding: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
* {
  box-sizing: border-box;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
h2 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
.cf:before {
  content: " ";
  display: table;
}
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
a {
  font-family: "Work Sans", sans-serif;
  color: #fff;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  z-index: 10;
  top:50px;
  left:50px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
.cf {
  *zoom: 1;
}
.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu {			
  margin: 50px auto;
  width: 800px;
    width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;	
}
.menu > li {
  background: #34495e;
  float: left;
  position: relative;
  transform: skewX(25deg);
}
.menu a {
  display: block;
  color: #fff;
text-transform: uppercase;
  font-family: 'Work sans', sans-serif;
  text-decoration: none;
  font-family: Arial, Helvetica;
  font-size: 14px;
}		
.menu li:hover {
  background: #e74c3c;
}		
.menu > li > a {
  transform: skewX(-25deg);
  padding: 1em 2em;
}
.submenu {
  position: absolute;
  width: 200px;
  left: 50%; margin-left: -100px;
  transform: skewX(-25deg);
  transform-origin: left top;
}
.submenu li {
  background-color: #34495e;
  position: relative;
  overflow: hidden;		
}						
.submenu > li > a {
  padding: 1em 2em;			
}
.submenu > li::after {
  content: ' ';
  position: absolute;
  top: -125%;
  height: 100%;
  width: 100%;			
  box-shadow: 0 0 50px rgba(0, 0, 0, .9);			
}		
.submenu > li:nth-child(odd) {
  transform: skewX(-25deg) translateX(0);
}
.submenu > li:nth-child(odd) > a {
  transform: skewX(25deg);
}
.submenu > li:nth-child(odd)::after {
  right: -50%;
  transform: skewX(-25deg) rotate(3deg);
}				
.submenu > li:nth-child(even) {
  transform: skewX(25deg) translateX(0);
}
.submenu > li:nth-child(even) > a {
  transform: skewX(-25deg);
}
.submenu > li:nth-child(even)::after {
  left: -50%;
  transform: skewX(25deg) rotate(3deg);
}
.submenu {
  opacity: 0;
  visibility: hidden;			
}
.submenu li {
  opacity: 0;
  visibility: hidden;			
}
.submenu li {
  transition: .2s ease transform;
}
.menu > li:hover .submenu {
  opacity: 1;
  visibility: visible;
}	
.menu > li:hover .submenu li {
  opacity: 1;
  visibility: visible;
}		
.menu > li:hover .submenu li:nth-child(even) {
  transform: skewX(25deg) translateX(15px);			
}
.menu > li:hover .submenu li:nth-child(odd) {
  transform: skewX(-25deg) translateX(-15px);			
}
</style>
<body>
<ul class = "menu cf">
  <li> <a href = " "> Menu 1 </a> </li>
  <li>
<a href = " "> Menu 2 </a> 
    <ul class = "submenu">
<li> <a href = " "> Submenu Item 1  </a> </li>
<li> <a href = " "> Submenu Item 2 </a> </li>
<li> <a href = " "> Submenu Item 3 </a> </li>
      <li> <a href = " "> Submenu Item 4 </a> </li>
    </ul>			
  </li>
<li> <a href = " "> Menu 3 </a> </li>
  <li> <a href = " "> Menu 4 </a> </li>
<li> <a href = " "> Menu 5 </a> </li>
</ul>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个之字形下拉菜单的示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  zig zag dropdown menu concept with css </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
body{
  display:flex;
  justify-content:center;
  height:100vh;
  padding:0px;
  margin:0px;
  overflow:hidden;
  font-family:'Nanum Gothic', sans-serif;
  perspective:700px;
  background:#333;
  * {
    box-sizing:border-box;
    transform-style:preserve-3d;
  }
  @media (min-width:666px){
  nav {
    width:100%;
    position:absolute;
    background:#222;
    margin:0px;
    max-width:100%;
    z-index:2;
    ol {
      width:100%;
      display:flex;
      justify-content:space-around;
      padding:0px;
      margin:0px;
      transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      li { 
        display:inline-block;
        padding:30px;
        flex-grow:1;
        text-align:center;
        position:relative;
        transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &:nth-of-type(4) {
              ol {
                &:after{
                  content:"\f06d";
                  font-family:FontAwesome;
                }
              }
            }
        &:hover{
          &:before {
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  bottom:-30px;
                  left:-15px;
                  transform:rotate(45deg) scale(0.5);
                  border:3px solid pink;
                  border-color:orange transparent transparent orange;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, red 45%, green 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;    
                  animation:clipin 0.4s ease-in 1 forwards;
                  animation-delay:0.2s;
                  -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);          }
          }
          li {
            position:relative;
            &:first-of-type {
              &:before{
                display:none;
              }
            }
                &:before {
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  right:-30px;
                  top:-15px;
                  left:auto;
                  transform:rotate(-45deg) scale(0.5);
                  border:3px solid red;
                  border-color:red transparent transparent red;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, green 45%, red 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;  
                  animation:clipin 0.4s ease-in 1 forwards;
                  @keyframes clipin {
                    0%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    50%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    75%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
                    }
                    100%{
                      -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
                    }
                  }
                }
          }
        }
        ol{
          &:after{
            
            font-family:FontAwesome;
            vertical-align:center;
            font-size:150px;
            color:#ff8000;
            position:absolute;
            padding-top:40px;
            height:calc(100% - 40px);
            width:100%;
            left:-100%;
            top:0;
            background:green;
            transform:rotate(-90deg);
            transform-origin:0% 0%;
            transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          }
        }
        @for $i from 1 through 10{
          &:nth-of-type(#{$i}){
            &:hover{
              a{
                color:#222;
              }
              ol{
                li{
                  a{
                    color:#fff;
                  }
                }
              }
              &:before{
                transform:translateY(0) rotate(0deg);
              }
            }
            &:before{
              content:'';
              position:absolute;
              width:100%;
              height:100%;
              background:adjust-hue(pink, ($i * 10));
              top:0;
              left:0;
              z-index:-1;
              transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transform:translateY(-125%) rotate(-5deg);
            }
          }
        }
        &:hover{
          ol{
            transform:translateY(0) translateZ(-1px);
            &:after{
              transform:rotate(0deg);
            }
            li{
              &:nth-of-type(1n){
                transform:none;
                margin:0px;
                &:hover{
                  &:after{
                    opacity:1;
                    top:0vh;
                  }
                }
              }
            }
          }
        }
        a{
          color:#fff;
          text-decoration:none;
          text-transform:uppercase;
          letter-spacing:2px;
          font-weight:900;
        }
        ol {
          display:block;
          position:absolute;
          top:100%;
          transform:translateY(-110%) translateZ(-5px);
          transform-origin:top right;
          z-index:-1;
          width:120%;
          left:0;
          &:hover{
            li{
              &:nth-of-type(1n){
                &:hover{
                  padding:40px 30px;
                }
              }
            }
          }
          li {
            display:block;
            margin:20px 0;
            a {
              font-size:14px;
            }
            &:before {
              display:none;
            }
            @for $i from 1 through 10{
              &:nth-of-type(#{$i}){
                transition-delay:#{$i/10}s;       background:adjust-hue(red, ($i * 10));
                &:before{
                  animation-delay:#{$i/20}s;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, adjust-hue(red, ($i * 10)) 45%, adjust-hue(red, ($i * 10)) 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;
                  border-color:adjust-hue(red, ($i * 10)) transparent transparent adjust-hue(red, ($i * 10));
                }
                
              }
            }
            &:first-of-type { 
              margin-top:0;
            }
            &:nth-of-type(even) {
              transform-origin:top left;
              transform:rotate(5deg);
            }
            &:nth-of-type(odd) {
              transform-origin:top right;
              transform:rotate(-5deg);
            }
          }
        }
      }
    }
  }
  }
  @media (max-width:666px) {
    nav {
      position: absolute;
      top: 0;
      height: 45px;
      left: 0;
      background: #222;
      width: 100%;
      &:hover {
        ol {
          li {
            &:nth-of-type(1n) {
              transform: rotate(0deg);
              margin: 0px;
              transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            @for $i from 1 through 10 {
              &:nth-of-type(#{$i}) {
                transition-delay: #{$i/15}s;
                &:hover {
                           }
              }
            }
          }
        }
        &:before {
          transform: rotate(45deg);
          box-shadow: 0 0 0 0;
        }
        &:after {
          transform: rotate(-45deg);
        }
      }
      &:before, &:after {
        content: ' ';
        position: absolute;
        width: 30px;
        height: 3px;
        background: #fff;
        top: 10px;
        left: calc(50% - 15px);
        border-radius: 5px;
        box-shadow: 0 10px 0 0 #fff;
        transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 100ms ease-in-out;
        transition-delay: 0.1s, 0s;
        transform-origin: 0% 50%;
      }
      &:after {
        box-shadow: none;
        top: 30px;
        transform-origin: 0% 50%;
      }
            ol {
        position: absolute;
        width: 100%;
        top: 0px;
        display :table;
        left: 0;
        margin: 0px;
        text-align: center;
        transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: #000;
        padding: 60px 0 20px;
        height: auto;
        li {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 50px;
          padding: 10px 0;
          margin: 10px 0;
          transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          background: #000;
          &:nth-of-type(even) {
            transform: rotate(-5deg);
          }
          &:nth-of-type(odd) {
            transform: rotate(5deg);
          }
          &:hover{
            ol{
              height:auto;
              transition:opacity 0.2s ease-in-out;
              opacity:1;
            }
          }
          a {
            color: #fff;
            text-decoration: none;
          }
        }
        ol {
          position: relative;
          transform: none;
          background: transparent;
          display: inline-block;
          width: 100%;
          height: auto;
          top: auto;
          padding: 0;
          height: 0;        
          transition: opacity 0.2s ease-in-out;
          li {
            font-size: 12px;
            height: auto;
            &:first-of-type { 
              padding-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
<body>
<h1> Example </h1>
<nav class="menu">
  <ol>
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#"> Widgets 1 </a></li>
        <li class="menu-item"><a href="#">Widgets 2 </a></li>
        <li class="menu-item"><a href="#">Widgets 3</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ol>
</nav>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个之字形下拉菜单的示例。

输出

以下是这个例子的输出。

下一主题CSS 实现跑马灯效果

Zig zag 下拉菜单的 CSS 概念

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

Zig zag 下拉菜单的 CSS 概念

示例 1

示例 2

相关帖子

CSS ID Selector

CSS Gradient Generator

CSS 中如何更改文本颜色

HTML CSS JavaScript

CSS Placeholder

CSS Font Color

CSS Beautifier

White Space

CSS 中如何自动换行文本

CSS 中如何更改字体大小

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器