[Pro] Another cool menu

The ‘click to open’ image next to the hamburger (as shown above) is just there to point out to the visitor that ‘the hamburger’ is the (only) navigation option there is at that point. It’s nothing more than just a rather friendly gesture other than letting the visitors find it out for themselves. You could get rid of it of course, but there’s nothing wrong with a heads-up to your clientèle :slight_smile:

The hamburger is a button item, styled like this:

 .dl-menuwrapper button:after {
     content: '';
     position: absolute;
     width: 68%;
     height: 5px;
     background: #fff;
     top: 10px;
     left: 16%;
     box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;
 }

The ‘height’ here is the height of 1 horizontal bar, the top bar of the hamburger. The middle and bottom bars are both ‘drop shadows’, placed at a distance of 10px and 20px and both coloured ‘white’ to complete the hamburger.

– Richard


tutorials mailing list
email@hidden
Update your subscriptions at: