Question

我正在尝试设计一个源自角落并以45度角分散的导航菜单：

这是我到目前为止用css编写的代码。但是，它使用绝对定位。有没有办法让这些旋转的元素一起滑动？

＆＃13;

html, body{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

ul{
  list-style-type: none;
}

a{
    text-decoration: none;
}

.menu{
  position: absolute;
  height:100px;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}

#logo{
  position: absolute;
  top: -100px;
  left: -100px;
  width:200px;
  height:200px;
  background-color: black;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}

#home{
  top: 56px;
  left: -94px;
  width:400px;
  background-color: red;
}

#contact{
  top: 125px;
  left: -123px;
  width:600px;
  background-color: pink;
}

#about{
  top: 100px;
  left: 1100px;
  width:800px;
  background-color: yellow;
}

#nav {
    float:left;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    line-height:0;
    width:100%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Chris Scalzi Portfolio</title>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" >
  </head>

  <body>

    <nav>
        <div id="logo"><a href="*"></a></div>
        <div class="menu" id="home"><a href="*"><p>Home</p></a></div>
        <div class="menu" id="contact"><a href="*"><p>Contact</p></a></div>
        <div class="menu" id="about"><a href="*"><p>About</p></a></div>
    </nav>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="script.js"></script>

  </body>

</html>

＆＃13;

Answer 1

我将如何做到这一点：

首先水平构建菜单，每个项目都在彼此之下。
每个菜单项都有display: table，每个子链接都有display: table-cell =＆gt;当布局非常简单时，这是在CSS中垂直居中的最简单方法。
我会使用链接的填充来调整每个菜单项的高度=＆gt;为用户提供更大的点击/触摸区域（您可以使用该链接获得良好的:hover效果）。一般情况下，我会尝试设置尽可能少的固定高度，以便在保留元素的同时允许内容增长（并且它更易于维护）。
然后我会将所有全局大小调整，定位和旋转放在父元素上：<nav>...</nav>。像这样，你只需要几个CSS规则就可以控制你的组件，只有一个 position: absolute。
最后，您需要调整元素的width以及top和left位置，具体取决于您想要的角度以及您希望它占据的位置页面（以及每个项目的填充）。

你会在下面找到一个POC，松散地基于你的代码;）

如果这个答案对您有所帮助，或者我需要澄清一些内容，请告诉我们。

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.menu-item {
  text-align: center;
  vertical-align: middle;
  display: table;
  width: 100%;
}

.menu-item a {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  display: table-cell;
  padding: 20px;
}

.menu-item a:hover {
  color: black;
}

#logo a {
  padding: 60px 0 30px;
  background-color: black;
}

#logo a:hover {
  background-color: blue;
}

#home    a { background-color: red;    }
#contact a { background-color: pink;   }
#about   a { background-color: yellow; }

nav {
  /* Pretty much everything is defined here: */
  position: absolute;
  width: 700px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -40px;
  left: -250px;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Chris Scalzi Portfolio</title>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" >
  </head>

  <body>

    <nav>
        <div class="menu-item" id="logo"><a href="*">LOGO</a></div>
        <div class="menu-item" id="home"><a href="*">Home</a></div>
        <div class="menu-item" id="contact"><a href="*">Contact</a></div>
        <div class="menu-item" id="about"><a href="*">About</a></div>
    </nav>

  </body>

</html>

旋转导航菜单

1 个答案: