如何创建仅 CSS(垂直)下拉菜单? [英] How to create a CSS only (vertical) drop-down menu?

查看：30
本文介绍了如何创建仅 CSS(垂直)下拉菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下午好，

我当前的任务是为网站创建多个样式表.其中一种网站样式要求我创建一个下拉菜单，但是我根本不允许更改 HTML 代码，因此基本上我被要求仅使用 CSS 创建一个类似下拉菜单的菜单.

这是我必须以下拉菜单的形式显示的 HTML 代码:

然而，也有不同的要求:每个列表项之前不应有任何点或圆圈.

我想知道是否可以仅使用 CSS 来完成此任务.有什么办法可以用 CSS 做到这一点吗?

解决方案

水平扩展的垂直菜单

jsBin 演示

*{padding:0;margin:0;}正文{字体:16px/1 无衬线}/*垂直菜单*/导航垂直{位置:相对；宽度:200px；}/* 所有 UL */导航垂直 ul{列表样式:无；}/* 所有李 */导航垂直线{位置:相对；}/* 全部 A */nav.vertical a{显示:块；颜色:#eee;文字装饰:无；填充:10px 15px;背景:#667;过渡:0.2s；}/* 全部悬停 */nav.vertical li:hover >一个{背景:#778;}/* 内部 UL 隐藏 */nav.vertical ul ul{位置:绝对；左:0%；顶部:0；宽度:100%；可见性:隐藏；不透明度:0;转换:转换0.2s；变换:translateX(50px);}/* 内部 UL 显示 */nav.vertical li:hover >ul{左:100%；可见性:可见；不透明度:1；变换:translateX(0px);}

垂直菜单(仅限移动设备)

这个可能最适合移动设备(小屏幕 CSS)，否则显示/隐藏会影响用户体验

jsBin 演示

*{padding:0;margin:0;}正文{字体:16px/1 无衬线}/*垂直菜单*/导航垂直{位置:相对；背景:#667;}/* 所有 UL */导航垂直 ul{列表样式:无；}/* 所有李 */导航垂直线{位置:相对；}/* 全部 A */nav.vertical a{显示:块；颜色:#eee;文字装饰:无；填充:10px 15px;过渡:0.2s；}/* 全部悬停 */nav.vertical li:hover >一个{背景:#778;}/* 内部 UL 隐藏 */nav.vertical ul ul{背景:RGBA(0,0,0,0.1)；填充左:20px；过渡:最大高度 0.2s 缓出；最大高度:0；溢出:隐藏；}/* 内部 UL 显示 */nav.vertical li:hover >ul{最大高度:500px；过渡:最大高度 0.25s 缓入；}

Good afternoon,

My current task is to create several stylesheets for a website. One of the websites styles requires me to create a drop-down menu, I however am not allowed to change the HTML code at all, so basically I'm asked to create a drop-down like menu with CSS only.

Here is the HTML code I have to display in form of a drop-down menu:

<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
  <ul>
  <li><a href="#widgets">Widgets</a></li>
  <li><a href="#sites">Sites</a></li>
  <li><a href="#gadgets">Gadgets</a></li>
  </ul>
</li>
</ul>

There however are different requirements as well: There shouldn't be any dots or circles preceding each list item.

I'm wondering whether it is possible to accomplish this task with CSS only or not. Is there any way I can do this with CSS?

解决方案

Vertical menu with horizontal expansion

jsBin demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}

<nav class="vertical">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Vertical menu (mobile only)

this one might best suit for mobile (smaller screens CSS) otherwise the show/hide would troll with User Experience

jsBin demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  background:#667;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  background:rgba(0,0,0,0.1);
  padding-left:20px;
  transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.25s ease-in;
}

<nav class="vertical">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services +</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li><a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

这篇关于如何创建仅 CSS(垂直)下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆