V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sarlanori
V2EX  ›  问与答

请教前端大佬这种导航条怎么做?

  •  1
     
  •   sarlanori · 2019-09-27 10:09:03 +08:00 · 2651 次点击
    这是一个创建于 1644 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是后端开发,最近有个项目需要自己做点前端工作,遇到个导航条不知道怎么做,还请各位前端大佬指点一下,不胜感激。

    下图是美工切出来的导航条背景图,我需要在每个菱形的正中显示菜单文字,还要保证窗口大小改变时不会显示错乱,应该怎么做呢?

    nav_bot.png

    第 1 条附言  ·  2019-09-28 20:34:27 +08:00

    非常感谢大家的回复,不能一一回复还望见谅。

    在参考了@redbuck的回复后,我找美工切了一个矩形背景图(两张图片,对应两种状态:默认状态和高亮状态),再参考@redbuck给出的代码示例,最终算是完美解决了这个问题,有兴趣的同学可以看一下:http://jsrun.pro/hMbKp

    • 默认状态背景图:

    bot_default.png

    • 高亮状态背景图:

    bot_pre.png

    19 条回复    2019-09-27 18:17:40 +08:00
    kdylan
        1
    kdylan  
       2019-09-27 10:22:55 +08:00
    切图 用背景图片呗,
    有渐变有高光 css 累死
    TangMonk
        2
    TangMonk  
       2019-09-27 10:28:05 +08:00
    切图的时候为什么不直接把文字也加到图片里面去,这样也可以啊
    Chappako
        3
    Chappako  
       2019-09-27 10:29:16 +08:00
    @TangMonk 把文字加到图片里就要有 5 张图,不加文字就只有 2 张图
    TangMonk
        4
    TangMonk  
       2019-09-27 10:30:22 +08:00
    @Chappako #3 用 sprite 就行了嘛
    RaymondYip
        5
    RaymondYip  
       2019-09-27 11:15:15 +08:00
    全图片。稳如狗
    7gugu
        6
    7gugu  
       2019-09-27 11:22:51 +08:00 via Android
    用一下自适应,scale 这些
    littleylv
        7
    littleylv  
       2019-09-27 11:27:57 +08:00
    又想要酷炫的效果,又没有专业的前端来做,这是要逼死后端么
    redbuck
        8
    redbuck  
       2019-09-27 11:34:59 +08:00
    切开,弄一个矩形背景,设置给每一个 item,然后 transform: skew 倾斜.文字再用一个标签包下,反向 skew 扶正
    markzyh
        9
    markzyh  
       2019-09-27 11:35:19 +08:00
    图片吧,又不是不能用
    ochatokori
        10
    ochatokori  
       2019-09-27 11:36:27 +08:00 via Android
    弄个 div 把图片作为背景,里面放 4 个浮动的 div 当文字和链接

    只要你把宽度写死,就不会乱
    不会前端的话没必要做成菱形的点击区域,直接长方形的 div 点击就算了
    redbuck
        11
    redbuck  
       2019-09-27 11:38:19 +08:00   ❤️ 3
    <ul class="list">
    <li class="item"><span>test</span></li>
    <li class="item"><span>测试</span></li>
    <li class="item"><span>测测测试</span></li>
    </ul>

    .list .item{
    float: left;
    padding: 20px 50px;
    background-color: #4c93ff; // 更换成切分后的矩形背景
    margin: 0 5px;
    -webkit-transform: skew(-30deg);
    transform: skew(-30deg);
    color: #fff;
    }

    .list .item span {
    display: inline-block;
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
    }
    JasonSi
        12
    JasonSi  
       2019-09-27 14:09:42 +08:00
    没有人考虑过 点击位置吗? 直接切图是方形吧,点击右上角和右下角 算点击哪个按钮呀? 要是需要做的这么精确,还是挺好玩的事情
    learnshare
        13
    learnshare  
       2019-09-27 14:31:30 +08:00
    切图作为背景,然后可点击区域通过倾斜与背景重叠即可
    不过通常不建议用太多图片素材。一是尺寸固定,不能配合内容变化;二是调整起来要重新做素材,挺麻烦的
    lan2e
        14
    lan2e  
       2019-09-27 16:31:45 +08:00
    以前看见过一个 css 属性 "clip-path", 可以实现这种形状,具体使用我也不熟,你可以看一下文档,这里有一个在线的网站
    http://bennettfeely.com/clippy/
    Rekkles
        15
    Rekkles  
       2019-09-27 16:33:38 +08:00
    一个 GIF 不就完事了吗。。。
    yixiang
        16
    yixiang  
       2019-09-27 16:43:10 +08:00
    乱答一通:

    * canvas 一把梭,点击时根据鼠标座标计算点了哪个标签
    * 把图倾斜一下,p 成长方形的,div 背景放这个图,再用 transform 变成平行四边形的
    * 纯图片,map 和 area 标签了解一下
    * flash 一把梭!
    lneoi
        17
    lneoi  
       2019-09-27 17:01:09 +08:00
    不是专门的前端也不好弄太复杂了
    这种最简单的做法就是直接切一个矩形,那个斜线图片两头可以拼成一整条斜线,斜角区域正常不会点,所以没关系的。做成背景图,然后里面套个 div 设置好高度放文字。第一张图片另外设置,一共就两张。老式的网站很多这种风格的
    chengxy
        18
    chengxy  
       2019-09-27 17:01:55 +08:00
    https://stackblitz.com/edit/angular-esqq1f
    写了一点,实在是写不出来了,平行四边形上下边框的渐变太难,中间突起的,现在最大的问题就是点击范围问题,不知道该怎么做。
    tyx1703
        19
    tyx1703  
       2019-09-27 18:17:40 +08:00
    https://jsfiddle.net/xtaz902L/56/

    贴一个,弧形渐变真鸡儿真难🚑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3348 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:23 · PVG 21:23 · LAX 06:23 · JFK 09:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.