CSS梯形导航菜单

最新推荐文章于 2024-08-12 11:42:27 发布
最新推荐文章于 2024-08-12 11:42:27 发布
阅读量965 收藏 6
点赞数 4
分类专栏： CSS相关 文章标签： javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/118068745
版权

CSS梯形导航菜单

写个大屏项目，结果没给图片，我真是****，搜了下别人写的梯形，部分不符合我的需求，我都是梯形菜单，并且点击高亮，下面是效果和代码，我用了定位方面，调试的时候花费的时间比较多 具体看个人需求，css基础很一般，写得不好的，大佬们自个调试下了 ，再次做个笔记而已！
vue项目，被我改成业务组件使用了，嫌弃父页面代码太多，看花眼了

补充：介绍直角梯形的写法，直接上代码和图片

.box{
    position: relative;
    height: 31px;
    width: 78px;
    text-align: center;
    line-height: 31px;
    background-color: #050c1f;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    border-left: 1px solid blue !important;
    &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 76px;
    border: 2px solid blue;
    transform-origin: 0 100%;
    background-color: #0a2c63;
    transform: skewX(33deg);
    z-index: 1;
  }
}

效果如下：利用左边框和伪元素变形合成。后面的介绍可能有点乱，自己抽着看吧，尴尬了 哈哈
在这里插入图片描述

1、介绍下主要的相关css属性

/*
1、第一个：左边的陌生人警告，是通过父盒子border-left 
和 伪类元素生成的四边形组成的，通过父盒子的overflow: hidden和子元素的四边
形，组成一个直角梯形
*/
  .nav_title_left {
	  position: relative;
	  height: 33px;
	  width: 105px;
	  text-align: center;
	  line-height: 33px;
	  background-color: #050c1f;
	  overflow: hidden;
	  cursor: pointer;
	  border-left: 1px solid #0a2c63 !important;
	  &::before {
	    content: "";
	    display: block;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    width: 105px;
	    border: 2px solid #0a2c63;
	    transform-origin: 0 100%;//代表以左下边为原点 变形
	    background-color: #0a2c63;
	    transform: skewX(33deg); // 这个是控制四边形变形的幅度
	    z-index: 1;
  }
}
/*
2、第二种，如黑名单警告，是直接通过transform: skewX(33deg)属性控制的，
形成变形，像我的需求，是这样的，那么是通过伪类元素生成变形的四边形，通过
子绝父相定位到父盒子里，不然连文字也会跟着变形，不符合需求
*/
 .nav_title_item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 13px;
    margin: 0px 3px;
    color: #fff;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      border-radius: 1px;
      z-index: -1;
      background: #0a2c63;
      transform: skewX(33deg);
      -webkit-transform: skewX(33deg);
    }
  }



<template>
  <div>
    <div class="nav_title_box">
      <div class="nav_left_position" @click="changeMonitoringNav(1)">
        <div :class="monitoringChange === 1 ? 'nav_title_left2' : 'nav_title_left'">
          <span style="margin-right: 12px; z-index: 100; position: relative">陌生人警告</span>
        </div>
      </div>

      <div class="nav_title_center">
        <div
          @click="changeMonitoringNav(2)"
          :class="monitoringChange === 2 ? 'nav_title_item_blue' : 'nav_title_item'"
        >
          黑名单警告
        </div>
        <div
          @click="changeMonitoringNav(3)"
          :class="monitoringChange === 3 ? 'nav_title_item_blue' : 'nav_title_item'"
        >
          重点人员警告
        </div>
        <div
          @click="changeMonitoringNav(4)"
          :class="monitoringChange === 4 ? 'nav_title_item_blue' : 'nav_title_item'"
        >
          车辆超速警告
        </div>
        <div
          @click="changeMonitoringNav(5)"
          :class="monitoringChange === 5 ? 'nav_title_item_blue' : 'nav_title_item'"
        >
          视频警戒告警
        </div>
        <div
          @click="changeMonitoringNav(6)"
          :class="monitoringChange === 6 ? 'nav_title_item_blue' : 'nav_title_item'"
        >
          紧急呼叫告警
        </div>
      </div>
      <div class="nav_rgiht_position" @click="changeMonitoringNav(7)">
        <div :class="monitoringChange === 7 ? 'nav_title_right2' : 'nav_title_right'">
          <span style="z-index: 100; position: relative; margin-left: 16px">周界联动警告</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      monitoringChange: 1,
    }
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    changeMonitoringNav(value) {
      this.monitoringChange = value
      this.$emit("policeNavMenu", value)
    },
  },
}
</script>

<style scoped lang="less">
.nav_title_box {
  position: relative;
  width: 100%;
  height: 34px;
  margin-top: 10px;
  > div {
    font-size: 14px;
  }
}
.nav_left_position {
  position: absolute;
  left: 5px;
  top: 0;
}
.nav_title_left {
  position: relative;
  height: 33px;
  width: 105px;
  text-align: center;
  line-height: 33px;
  background-color: #050c1f;
  overflow: hidden;
  cursor: pointer;
  border-left: 1px solid #0a2c63 !important;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 105px;
    border: 2px solid #0a2c63;
    transform-origin: 0 100%;
    background-color: #0a2c63;
    transform: skewX(33deg);
    z-index: 1;
  }
}
.nav_title_left2 {
  position: relative;
  height: 33px;
  width: 105px;
  text-align: center;
  line-height: 33px;
  background-color: #050c1f;
  overflow: hidden;
  cursor: pointer;
  border-left: 1px solid blue !important;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 105px;
    border: 2px solid blue;
    transform-origin: 0 100%;
    background-color: #0a2c63;
    transform: skewX(33deg);
    z-index: 1;
  }
}
.nav_title_center {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 104px;
  z-index: 10000 !important;
  .nav_title_item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 13px;
    margin: 0px 3px;
    color: #fff;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      border-radius: 1px;
      z-index: -1;
      background: #0a2c63;
      transform: skewX(33deg);
      -webkit-transform: skewX(33deg);
    }
  }
  .nav_title_item_blue {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 13px;
    margin: 0px 3px;
    color: #fff;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      border-radius: 1px;
      z-index: -1;
      background: #0a2c63;
      transform: skewX(33deg);
      -webkit-transform: skewX(33deg);
      border: 2px solid blue;
    }
  }
}
.nav_rgiht_position {
  position: absolute;
  right: 0;
  top: 0;
}
.nav_title_right {
  position: relative;
  height: 33px;
  width: 106px;
  border-right: 1px solid #0a2c63;
  text-align: center;
  line-height: 33px;
  background-color: #050c1f;
  overflow: hidden;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 106px;
    border: 1px solid #0a2c63;
    transform-origin: 100% 0;
    background-color: #0a2c63;
    transform: skewX(32deg);
    z-index: 1;
  }
}
.nav_title_right2 {
  position: relative;
  height: 33px;
  width: 106px;
  border-right: 2px solid blue;
  text-align: center;
  line-height: 33px;
  background-color: #050c1f;
  overflow: hidden;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 104px;
    border: 2px solid blue;
    transform-origin: 100% 0;
    background-color: #0a2c63;
    transform: skewX(32deg);
    z-index: 1;
  }
}
</style>
爱睡D小猪
关注
专栏目录
html div 不规则形状,CSS DIV制作梯形状的不规则网站导航
weixin_33291624的博客
06-03 949
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。先看图(图片只是大致做了一下)效果展示：运行代码框无标题文档* {margin:0;padding:0;font:normal 12px/25px "宋体";}body {background:#f8f8f8;}u...
html和css画梯形背景,CSS-实战-梯形背景导航
weixin_36467048的博客
06-25 1191
1、实现效果梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。梯形背景导航2、总体实现思路(1)准备背景图注意图片，一定是透明背景格式的，可以另存为下图。透明背景图(2)创建A标签嵌套B标签的导航菜单测试(3)设置A...
CSS实现梯形标签页的方法
01-21
在web设计中，梯形标签页是很常见的一种形式，但是梯形又是一种很难实现的样式，很多开发者会直接用梯形背景图片来生成效果，但是采用背景图片的方式产生了额外的http请求，并不是一种非常理想的方式，这里笔者为大家带来一种直接用css来实现梯形效果的方法。   以一个简单的div为例： <div class=div>这是一个梯形</div> .div{ position: relative; display: inline-block; padding: .5em 1em .35em; color: white; } .div::before{ co
CSS 实现梯形tabs切换
最新发布
weixin_44175192的博客
08-12 240
【代码】CSS 实现梯形tabs切换。
纯css的梯形菜单
幸福有多远
01-10 346
前言： 选中后的z-index添加!important;设置成最高权限，覆盖生成的内联样式 <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .barbox{ margin: 20px; ...
CSS-实战-梯形背景导航
weixin_33749131的博客
07-13 1288
1、实现效果 梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。 梯形背景导航 2、总体实现思路 （1）准备背景图...
CSS3 圆角梯形导航菜单
weixin_52031970的博客
07-19 908
HTML <div id='cssmenu'> <ul> <li class='active'><a href='index.html'>Home</a> </li> <li><a href='#'>Products</a> </li> <li><a href='#'>...
梯形菜单
andyyukun的专栏
04-15 1036
menu li a{...}{              float:left;              margin-right:1px;              display:block;              border:1px solid red;              text-decoration:none;      }无意中发现，如果这样定义UL的话
css3箭头菜单效果.rar
07-04
2. **边框与背景图像**：CSS3允许我们创建梯形、圆角和其他复杂形状的边框，这在制作箭头时非常有用。通过调整边框宽度和颜色，可以轻松实现箭头的形状。 3. **转换（Transforms）**：`transform`属性可以改变元素...
使用CSS3制作倾斜导航条和毛玻璃效果
12-12
本次分享的主题：通过CSS3来制作类似下面的导航条和毛玻璃效果。 导航条是梯形形状的。 背景区域的毛玻璃效果。 把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。 ...
20个超漂亮实用的纯CSS web2.0导航菜单模板
06-17
本资源集合了20个超漂亮且实用的纯CSS Web2.0导航菜单模板，它们完全基于CSS（Cascading Style Sheets）编写，无需JavaScript或其他脚本语言，易于定制和整合到你的项目中。 首先，我们来了解什么是CSS。CSS是一种...
jQuery实现简单的列表式导航菜单效果代码
10-23
主要介绍了jQuery实现简单的列表式导航菜单效果代码,涉及jquery操作鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CSS DIV制作梯形状的不规则网站导航
09-27
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。先看图（图片...
一个梯形的Tabbar导航栏
小旋风nice
11-01 374
【代码】一个梯形的Tabbar导航栏。
css制作 平行四边形和梯形导航条
qq_35679291的博客
09-19 2319
1.平行四边形 导航条 这个效果看起来不错吧!其实实现起来很简单平行四边形的制作运用了CSS 2D变形中的skew( ) 倾斜属性,因为我们只是在水平方向上倾斜 所以skew( x, y) 中的第二个参数指定为0,否则x,y 方向上都会发生倾斜 ul li{ position:relative; float:left; width:100
CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果
笨小孩
11-28 1875
一、平行四边导航条 效果图： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .rhomboid li { list-style: none
css实现梯形等图形
LLL_liuhui的博客
01-11 1387
 css &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div{margin: 20px;float: left;} .box,.box1{width:
标题栏怎么实现css,css实现标题栏梯形效果
weixin_39614874的博客
08-04 461
如图要实现这里标题栏效果，可以使用css而不用图片项目总浏实时监控复制代码.header-slide {color: #fff;display: flex;position: absolute;left: 50%;transform: translateX(-50%);cursor: pointer;span {padding: 0.4rem;z-index: 1;top: 0.3rem;posi...
css实现梯形
Spider--Man
03-27 7267
使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border 使用3d旋转矩形，使之看起来像矩形 <html> <head> <meta charset="utf-8"> <style> .trapezoid-0{ border-bottom: 100px solid #fb3; border-left: 50p
纯CSS打造高效三级导航菜单
"纯CSS实现的三级导航菜单效果代码，适用于网页设计，提供了一个实用的导航栏解决方案。" 在网页设计中，导航菜单是至关重要的组成部分，它帮助用户轻松地浏览网站的不同部分。本资源介绍了一种纯CSS方法来创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值