Question

我正在尝试使页面的导航菜单响应。当前，随着高度的降低，图标不适合屏幕显示。理想情况下，我想要的是一种自适应设计，其中所有元素都随页面高度缩放（即，图标和文本缩小以适合页面大小）。

到目前为止，我只能使设计与以下硬编码值一起使用。这需要多个断点，我试图避免这些断点，因为要使所有内容都与硬编码值完全吻合，这将导致过程过长。

https://jsfiddle.net/froggomad/392qje0o/

.topnav {
  position: fixed;
  width: 100%;
  width: 100vw;
  background-color: transparent;
}

.topnav #myLinks {
  display: block;
  position: fixed;
  top: 15%;
  height: 85vh;
  width: 400px;
  margin-left: 80%;
  margin-right: 5%;
  background-color: transparent;
  border-radius: 10px;
  bottom: 5%;
}

.menu-link {
  padding-top: 0.5em;
}

.menu-card {
  display: block;
  text-align: center;
  opacity: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 18%;
}

.menu-card:hover {
  background-color: transparent;
  opacity: 100%;
  transition: all 0.8s;
}


/*Transforms .card-text when hovering on .menu-card*/

.menu-card:hover .card-text {
  opacity: 100;
  max-width: 66%;
  /*this is the attribute being animated in .card-text*/
  width: 38%;
  /*sets actual width*/
  background-color: rgba(148, 181, 201, 0.9);
  border-width: 8px;
}

.menu-icon {
  display: inline;
  text-align: center;
  margin-left: -265px;
  margin-right: 0;
  padding-left: 0;
  padding-bottom: 0;
  max-width: 20%;
  vertical-align: middle;
  background-color: rgba(148, 181, 201, 0.9);
  border-radius: 90px;
  padding: 8px;
}

.card-text {
  max-width: 0%;
  opacity: 0;
  color: #5DCA31;
  background-color: transparent;
  text-shadow: 2px 2px black;
  float: left;
  vertical-align: middle;
  margin: 0;
  margin-right: 22%;
  padding: 0.5em;
  padding-right: 140px;
  padding-left: 2%;
  padding-top: 24px;
  padding-bottom: 35px;
  border-color: rgba(148, 181, 201, 0.9);
  border-width: 0px;
  border-style: solid;
  border-radius: 90px;
  transition: background-color 0.8s, border-width 0.8s, max-width 0.8s;
}

#home {
  /*Text*/
  font-size: 1.5em;
  margin-top: 3%;
}

.home {
  /*Icon*/
  margin-top: 3%;
}

#strategy {
  font-size: 1.25em;
}

#security {
  font-size: 1.5em;
}

#pledge {
  font-size: 1.5em;
}

<div class="topnav">
  <div class="top-bar">
    <a href="#" id="site-title">
                   Site Title
              </a>
  </div>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks" class="menu-link">
    <div class="menu-card">
      <a href="#">
        <img class="menu-icon home" src="https://www.shareicon.net/data/128x128/2015/09/22/104866_home_512x512.png">
        <p class="card-text" id="home">Home</p>
      </a>
    </div>
    <div class="menu-card">
      <a href="#">
        <img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/21/104860_find_512x512.png">
        <p class="card-text" id="strategy">Current Strategy</p>
      </a>
    </div>
    <div class="menu-card">
      <a href="#">
        <img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/22/104877_locked_512x512.png">
        <p class="card-text" id="security">Security</p>
      </a>
    </div>
    <div class="menu-card">
      <a href="#">
        <img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/22/104870_users_512x512.png">
        <p class="card-text" id="pledge">Pledge!</p>
      </a>
    </div>
    <!--End Navigation links-->
  </div>
</div>

Answer 1

这是使用flexbox和绝对位置的工作版本。

https://jsfiddle.net/my6nwu0e/

=IF(ISBLANK(Sheet1!'YOURCELLSHERE),'','Sheet1!Cell')

您使用了太多的边距属性，并且似乎有很多不必要/多余的样式，尽管它们可能取决于您未发布的页面中的其他样式。您将不得不使用媒体查询来更改.top-bar { text-align: center; background-color: rgba(0, 0, 0, 0.5); } .topnav { position: fixed; width: 100vw; } .topnav #myLinks { display: flex; flex-direction: column; position: fixed; width: 300px; top: 10%; right: 0; height: 85vh; max-height: 85%; border-radius: 10px; } .menu-link { padding-top: 0.5em; } .menu-card { display: flex; justify-content: center; flex: 1 1 25%; } .menu-card a { position: relative; width: 100%; } .menu-icon { position: absolute; z-index: 1; right: 20%; max-height: 65%; border-radius: 50%; background-color: rgba(148, 181, 201, 0.9); transition: all 0.8s; } .card-text { display: flex; align-items: center; width: 0; top: 6%; height: 100%; max-height: 0; text-align: left; font-size: 100%; opacity: 0; color: #5DCA31; background-color: transparent; text-shadow: 2px 2px black; margin: 0; border-color: rgba(148, 181, 201, 0.9); border-style: solid; border-radius: 90px; transition: all 0.8s; } .menu-card:hover { background-color: transparent; opacity: 1; transition: all 0.8s; } .menu-card:hover .menu-icon { right: 0; } .menu-card:hover .card-text { opacity: 1; padding-left: 10%; max-height: 65%; width: 100%; border-width: 8px; box-sizing: border-box; background-color: rgba(148, 181, 201, 0.9); } @media screen and (max-height: 700px) { .topnav #myLinks { width: 200px; } }的宽度，但除此之外，我认为这是一个响应迅速的解决方案。还可以考虑将#myLinks用作全局样式。

使导航菜单响应

1 个答案: