Question

我需要使用HTML，CSS / Bootstrap / Jquery / Javascript进行垂直菜单设计，我可以将其用于任何具有响应高度的平板电脑设备，如图像。

在横向和纵向模式下，垂直响应式菜单应始终为100％高度。

此帖子附带的垂直响应式菜单设计供您参考。

我尝试了下面的代码，但我无法将文本放在框中，框的边框半径和菜单的垂直响应（100％高度）。

.myForm {
  max-width: 100%;
  width: 200px;
  height: 100px;
  position: relative;
  background-color: #A0A0A0;
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;

}
.myForm  font { 
  margin:0 auto; 
  padding:0; 
  font-size:13px; 
  color:#ffffff; 
  text-align:center;
}

.myForm span {
  display: inline-block;
  vertical-align: middle;
}

.myForm::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

.myForm::after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 300px 0;
  border-color: transparent #fff transparent transparent;
  border-radius:0px 0px 0px 30px;
}

<div class="myForm" style="background:#ff0000;"><font>Menu 1</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 2</font></div>
<div class="myForm" style="background:#ff0000;"><font>Menu 3</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 4</font></div>

Answer 1

 .myForm {
      height: 25vh;
  }

使用虚拟高度（vh）代替px

Answer 2

尝试使用vh进行垂直对齐，具体取决于视口高度。在字体标记为纯html后，要将其与特定css一起使用，您可以添加display:block。我使用翻译将文本对齐在中心。

＆＃13;

.myForm {
  max-width: 100%;
  width: 200px;
  height: 25vh;
  position: relative;
  background-color: #A0A0A0;
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;
  min-width:200px;          
}

.myForm  font { 
  margin:0 auto; 
  padding:0; 
  font-size:13px; 
  color:#ffffff; 
  top:50%;
  left:30%;
  display:block;
  position:absolute;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

.myForm span {
    display: inline-block;
    vertical-align: middle;
}

.myForm::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;

}

.myForm::after {
    content: '';
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 300px 0;
    border-color: transparent #fff transparent transparent;
    border-radius:0px 0px 0px 30px;
}

＆＃13;

<div class="myForm" style="background:#ff0000;"><font>Menu 1</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 2</font></div>
<div class="myForm" style="background:#ff0000;"><font>Menu 3</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 4</font></div>

＆＃13;

Answer 3

与Pandiarajan同意使用vh。然后将字体位置设为绝对位置，并使用left，top和transform规则对其进行定位。

祝你好运！

.myForm font {
    margin: 0 auto;
    padding: 0;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.myForm {
    height: 25vh;
}

Answer 4

我想我有一个使用此网站上的CSS技巧的解决方案： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

以下是小提琴的链接： https://jsfiddle.net/pcqamcrL/

.myForm {
   max-width: 100%;
   width: 200px;
   height: 100px;
   position: relative;
   background-color: #A0A0A0;
   color: #fff;
   font-size: 2.4em;
   font-weight: 700;
 }
.myForm  font { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin:0 auto; 
    padding:0; 
    font-size:13px; 
    color:#ffffff; 
    text-align:center;
 }

 .myForm::after {
    content: '';
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 300px 0;
    border-color: transparent #fff transparent transparent;
    border-radius:0px 0px 0px 30px;
 }

 <div class="myForm" style="background:#ff0000;"><font>Menu 1</font></div>
 <div class="myForm" style="background:#0094ff;"><font>Menu 2</font></div>
 <div class="myForm" style="background:#ff0000;"><font>Menu 3</font></div>
 <div class="myForm" style="background:#0094ff;"><font>Menu 4</font></div>

如何创建具有不同形状的垂直响应左侧菜单

4 个答案: