时间戳

首页 > 解决方案 > 疯狂造型的导航菜单

html - 疯狂造型的导航菜单

问题描述

我目前正在开发一个网站，作为我为客户的实践工作。我的问题是我无法获得客户想要的导航。菜单应大致如下所示

我试过：只是像素定位（没有响应，所以不......），弯曲的路径和附加的链接（对我来说不起作用。可能是因为我是初学者）和只是 div，但这也是糟糕的。

我也在这个项目上安装了顺风，如果这在某种程度上比这个菜单的香草 css 更好。

The svg wave(if someone wants)
<svg width="1920" height="300" viewBox="0 0 1920 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1920 300H0V0C435.72 154.841 831.391 213.662 1920 247.761V300Z" fill="#1D4ED8"/></svg>

那么我应该如何创作这个杰作的任何想法或片段？谢谢！

标签： htmlcsssvgtailwind-css

解决方案

定位导航列表元素的一种直接方法是将每个元素放置在距离背景图像左侧 x% 和顶部 y% 的位置。这样，即使您不知道曲线的数学形状，或者实际上如果没有曲线并且它只是任何需要将元素放置在其周围的旧图像，整体也会响应。

下面的代码片段创建了这个：

在此处输入图像描述

但是任何元素的位置都可以通过改变 CSS 变量 --t 和 --l 来改变。这些是通过测量每个图像的顶部和左侧的距离并测量图像的宽度和高度来获得的。（你测量的单位无关紧要，只要你对所有东西都使用相同的单位）。CSS calc 然后计算出百分比。

为了确保响应性，字体大小设置为相对于视口宽度。在实践中，您可能想要放弃设计并为非常狭窄的设备放置一个汉堡菜单。

* {
  margin: 0;
  padding: 0;
}
nav {
  --svgw: 1920;/*the builtin width and height of the svg */
  --svgh: 300;
  position: relative;
  width: 100vw;
  height: calc((100vw * var(--svgh)) / var(--svgw));
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vw * var(--svgh) / var(--svgw));
  z-index: -1;
}
nav ul {
  list-style-type: none;
  position: relative;
  height: 100%;
  width: 100%;
}
nav ul li {
  display: inline-block;
  position: absolute;
  color: white;
  top: calc(((var(--t) + 0.3) / 2.6) * 100%);/* 2.6 was the height of the img when measured 0.3 is the amount from the top of the curve of the first item */
  left: calc((var(--l) / 17.5) * 100%);/* 17.5 was width of the img when measured */
  font-size: 1vw;
}
/* for each li item, --t is measurement from top and --l is from left */
nav ul li:nth-child(1) { --t: 0.3; --l: 0.5; }
nav ul li:nth-child(2) { --t: 0.6; --l: 1.7; }
nav ul li:nth-child(3) { --t: 0.9; --l: 3; }
nav ul li:nth-child(4) { --t: 1.2; --l: 4.4;} 
nav ul li:nth-child(5) { --t: 1.4; --l: 6.1;}
nav ul li:nth-child(6) { --t: 1.6; --l: 7.6;}
nav ul li:nth-child(7) { --t: 1.7; --l: 9; }
nav ul li:nth-child(8) { --t: 1.8; --l: 10.5;}
<nav>
  <ul>
    <li>AVALEHT</li>
    <li>CONTAKT</li>
    <li>TASUD</li>
    <li>EESKIRJAD</li>
    <li>URITUSED</li>
    <li>VISIOON</li>
    <li>GALERII</li>
    <li>TANAME</li>
  </ul>
  <svg width="1920" height="300" viewBox="0 0 1920 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1920 300H0V0C435.72 154.841 831.391 213.662 1920 247.761V300Z" fill="#1D4ED8"/></svg>
</nav>

推荐阅读