css - 旋转导航菜单-6ren

css - 旋转导航菜单

转载作者：行者123 更新时间：2023-11-28 03:29:02

25

4

我正在尝试设计一个导航菜单，它起源于 Angular 落并以 45 度 Angular 分散:

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

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%;
}

<!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>

最佳答案

这是我的做法:

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

您会在下面找到一个大致基于您的代码的 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>

关于css - 旋转导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44836306/

25

4

0

文章推荐： c++ - 如何从外部函数更改局部静态变量值

文章推荐： c++ - (V)C++ (2010) 正则表达式, "recursive captures"

文章推荐： javascript - 在 iframe 中访问对象

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

css - 旋转导航菜单