What is a fallback for the “hamburger icon” or HTML entity ☰?

后端 未结 3 1946
眼角桃花
眼角桃花 2021-01-14 13:21

I have this as my menu bar for the site when viewed on tablet:

\"Header

The menu icon on the rig

3条回答
  •  挽巷
    挽巷 (楼主)
    2021-01-14 13:46

    Image is a wrong way to go about this - as is an entity, in my opinion. As this one is not well supported at all. No Android, renders weird on Windows Chrome, Internet Explorer, etc.

    Go the CSS3 route. This is supported by every major browser - and all modern mobile devices.

    jsFiddle here: http://jsfiddle.net/328k7/

    Use CSS3 as below. Edit where you see fit...

    div {
        content: "";
        position: absolute;
        left: 0;
        display: block;
        width: 14px;
        top: 0;
        height: 0;
        -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px     #69737d,1px 22px 1px 1px #69737d;
        box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
    }
    

提交回复
热议问题