Beyondme changelog 4
My goal this time was to create a hamburger icon, which is basically a button that consists of three lines representing a hamburger, specifically the buns and the patty. So that when the screen gets smaller, the contents will disappear and the icon will appear. The reason being that when the width of the header decreases, the contents start to overlap, so to tackle this, I set up a media listener where, when the width of the screen reached 630 px, the header contents home, about, blog, and the Twitter button would be hidden and the hamburger icon would come into view.
An issue I encountered was that the icons, after being hidden and being indicated to show, would hide under the first image and thus be unable to be pressed. I tried a couple of ways, but the icons either got smushed or just vanished, so I then set up a style changing attribute in my java script code so when clicked, it essentially increased the top margin of the image, and when clicked again, it would revert back to its original position. I do have a few concepts for future updates where the hamburger icon will have an animation and the content will have a background blur and hover and therefore not move any of the other elements.
I’m sure there are easier ways to do these things with fewer components and just copy-pasting code, but I believe that doing things on your own and in a way that makes sense to you is a crucial component of the learning process and that everybody should at least try once to figure out what’s going on on their own before searching for help because the feeling of discovering an answer to a difficult problem on your own has a feeling that is unlike any other.
do check out beyondmebtw.com
also check out this article on medium
https://medium.com/@beyondmebtw/beyondme-changelog-4-3aba525d4ec5
Comments